SlideShare a Scribd company logo
Accessibility of Rich Internet Applications (Afternoon Session) Hans Hillen (TPG) Steve Faulkner (TPG) 1 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011
HTML5 accessibility New Solutions New Problems
Accessible HTML5 will be a beautiful thing
Current support for HTML5 accessibility What is meant by support? Features provided Features implemented Features implemented with accessibility support In Browsers In Assistive Technology
What is meant by support? Features are implemented in browsers Useful site - When can I use... Does not mean features are usable by all users even if they use a browser that ‘supports’ a feature. Firefox video support
the <video> element No major browser has full accessibility support for HTML5 video Providing full accessibility support means jumping through hoops: Scripted controls Scripted captioning and audio description
the <video> element All major browser now support HTML5 video Meaning you can watch/hear a video and use the controls if you can see, hear and use a mouse
the <video> element Terril Thompson: “That all sounds like a lot of work. Isn't HTML5 <video> supposed to be easy?” “Ultimately though ... HTML5 <video> is easy. A novice web developer can pop a video onto their web page in less than a minute with some very simple HTML markup. Unfortunately if they do that today it won't be accessible without a little additional sweat. Someday, hopefully, browsers will do all of this work for us, and every video will be accessible. That's what we're working toward.”
Example the <canvas> element All major browser now support HTML5 canvas Meaning dynamic images, animation, games and content is available without plug-ins
Example the <canvas> element Only one major browser supports HTML5 canvas accessibility And only partially
Example the <canvas> element The accessibility features of canvas are still being specified. What is implemented in IE9 gives an idea of how canvas accessibility will work. Example
Accessible implementation What’s it mean? Conveys semantics required to understand and interact. Can be used in a device independent way Uses common design patterns Accomodates browser & OS accessibility features interoperable
The humble button Accessibility API Input device browser role=button state=focused value= search action=press
Accessibility APIs MSAA Iaccessible2 UI automation AX STK roles states properties interaction + device independent interaction
A tool to look under the hood MSAA inspect.32.exe or inspect.exe
Another tool to look under the hood Aviewer
The humble button Accessibility features for a button a whirlwind tour
New HTML5 form controls When implemented and implemented accessibly, will make it a lot easier to provide accessible UI’s Current implementation is patchy and where implemented, accessibility support is poor. Lets take a quick tour: HTML5 form controls
Placeholder attribute Minor addition to HTML5 Yet brings new headaches for developers and users Poor contrast disappears Results in different accessible labels across browsers and labelling methods HTML5 Accessibility Chops: the placeholder attribute
ARIA landmark roles vs HTML5 section elements ARIA defines roles that act as landmarks for intra page navigation and identification of common content areas HTML5 defines section elements for common semantic features of pages, some old some new There is some overlap HTML5 section elements are largely unimplemented (accessible). FireFox has some experimental implementation
Section elements and landmarks Examples of use Bruce Lawson’s site Wordpress Mappings between section elements and landmark roles:  HTML5 Accessibility Chops: section elements
ARIA Landmark Roles Landmark roles identify important sections commonly found in web pages: Applied to container elements Allow AT users to quickly see which sections a page has and navigate to individual sections  In JAWS, use the following commands: ; (semicolon):jump to next landmark Shift + ;(semicolon): jump to previous landmark Ctrl + Ins + ;(semicolon): Show list of available landmarks   In NVDA use D  to jump to next landmark Shift + D to previous landmark NVDA+f7 Show list of available landmarks
ARIA Landmark Roles ,[object Object]
Banner: A region that contains the primary heading or web site title. (site logo, login details, etc.)
Search: The search tool of a web document.
Navigation: The documents Navigation menus and links.
Main: The main content of web document.
Form: contains a collection of items and objects that, as a whole, combine to create a form.
Complementary: content that has meaning outside the page as well (e.g. a sidebar with related articles).
Contentinfo: Metadata that applies to the parent document (e.g. copy right disclaimers, company info).
Application: See next slide.Using WAI ARIA Landmark Roles
Aria Landmark Roles: Role=“Application” Normally, Screen readers browse in ‘virtual mode’ Screen reader navigates a virtual copy of the web page. Screen reader intercepts all keystrokes, and uses them for its own virtual navigation (e.g. ‘H’ for heading navigation). For dynamic web apps, virtual mode may need to be turned off Interactive widgets need the keystrokes themselves. Content needs to be live, not a virtual copy. Normally, the user  had to switch manually between virtual an non-virtual mode. role=“application” When applied a container element the  screen reader will automatically switch to non virtual mode.
Application Role vs. Document Role Some parts of your application may actually be treated as a document rather than application UI. For example: A web based email client has panes in which messages are read or created. A blog viewer web application can load articles to read. In these parts, the screen reader user needs virtual mode: To make use of the special navigation that comes with it.  To be able to read non focusable content role=“document” When applied to a container inside an application role, the screen reader will switch back to virtual mode. Allows documents to be read or edited inside a web app.
HTML5 Accessibility information HTML5Accessibility.com
Implementing ARIA Solutions Practical examples 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 27
Recap: How to Apply ARIA Start with HTML elements Any HTML element can be extended with ARIA. Examples: ,[object Object],Add a ‘role’ attribute. Only one role is allowed per element,  ,[object Object]
<div role=“tab”>Add state /properties attributes if applicable. A single elements can have one or more states ,[object Object]
<div role=“button” aria-pressed=“true” aria-disabled=“true”>Attribute names always start with ‘aria-’ 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 28
ARIA: Important Notes ,[object Object],It only provides semantic information for AT Behavior and styles still need to be provided by developer ,[object Object],e.g. <td> (role = ‘cell’), <a> (role=“link”), <input>, <li> Native role is always overridden by ARIA role ,[object Object]
Role values generally stay the same, state values can change	Trough user input (event handlers),  elem.setAttribute(‘aria-selected’, ‘false’); ,[object Object],E.g. A ‘radio’ role requires the ‘aria-checked’  state ,[object Object],03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 29
Focus and Keyboard Accessibility 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 30
Focus & Keyboard Accessibility To be accessible, ARIA input widgets need focus Use natively focusable elements, such as <a>, <input />, etc Add ‘tabindex’ attribute for non focusable elements, such as <span>, <div>, etc. Tabindex=“0”: Element becomes part of the tab order Tabindex=“-1” (Element is not in tab order, but focusable) For composite widgets (menus, trees, grids, etc.): Every widget should only have 1 stop in the tab order. Keep track where your widget’s  current tab stop is: Alternative for tabindex: ‘aria-activedescendant=“<idref>” Focus remains on outer container AT perceives element with the specified ID as being focused. You must manually highlight this active element, e.g. With CSS 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 31
Focus & Keyboard Accessibility (2) ,[object Object]
Create you own event handlers to manage
For composite widgets (trees, menus, etc.) individual parts can be reached using other keys, such as:
Arrow keys
Home, End, PgUp, PgDn
Enter, Space
Keep in mind: how would I navigate this widget in a desktop environment?
Mouse based actions must also be available through the keyboard. For example:
Write Key handlers trigger the same results mouse events
Use context menus to make relevant options accessible.03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 32
Expected Widget Behavior Not sure about how a widget should behave with the keyboard? Use the DHTML Style Guide: http://dev.aol.com/dhtml_style_guide 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 33
Managing Interwidget Navigation Make sure that all widgets are reachable through keyboard Depend on Tab order (default or custom?) Support global keyboard shortcuts How do you notify your users? Implementing a custom focus manager Might be best solution for very complex UI's Let go of the traditional tab order idea ("all focusable elements must be reachable by tab order") Provide intuitive skipping mechanisms 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 34
Skipping Mechanisms ,[object Object]
Skip links are out of date, out of fashion and often is misused
Better alternatives for skipping:Collapsible sections Consistent shortcuts (e.g. a shortcut that moves focus between panes and dialogs) Custom focus manager that allows the user to move focus into a container to skip its contents  03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 35
Popup Dialogs and Windows ,[object Object],Get a screen reader to perceive it properly using role="dialog" ,[object Object],Focus should "wrap" ,[object Object],Prevent keyboard access Virtual mode access can't be prevented ,[object Object]
If dialog supports moving or resizing, these features must be keyboard accessible
Support closing dialogs using Enter (OK) or Escape (Cancel) keysFocus should be placed back on a logical element, e.g. the button that triggered the dialog. 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 36
Selection & Editing Trees, Lists, Grids can support single or multiple selection Multiple selection must be keyboard accessible, for example:  Shift + arrow keys: contiguous selection Ctrl + arrow keys: move focus without selection Ctrl + space: Toggle focused item in selection (discontiguous selection) Editable grids need to support switching to edit mode by keyboard 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 37
Forms & ARIA ,[object Object],aria-required & aria-invalid states Role="alert" to flag validation errors immediately ,[object Object],Role="alertdialog" to mark up the summary ,[object Object],Tooltips must be keyboard accessible  Tooltip text must be associated with the form control using aria-describedby 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 38
Advanced ARIA Implementation Techniques 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 39

More Related Content

What's hot

How to create ui using droid draw
How to create ui using droid drawHow to create ui using droid draw
How to create ui using droid draw
info_zybotech
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
Aiman Hud
 
Twitter trends
Twitter trendsTwitter trends
DOM and Accessibility API Communication
DOM and Accessibility API CommunicationDOM and Accessibility API Communication
DOM and Accessibility API Communication
Aimee Maree Forsstrom
 
Accessiblity 101 and JavaScript Frameworks
Accessiblity 101 and JavaScript Frameworks Accessiblity 101 and JavaScript Frameworks
Accessiblity 101 and JavaScript Frameworks
Aimee Maree Forsstrom
 
Android application-component
Android application-componentAndroid application-component
Android application-component
Ly Haza
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
Patrick Lauke
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
Patrick Lauke
 
Android accessibility for developers and QA
Android accessibility for developers and QAAndroid accessibility for developers and QA
Android accessibility for developers and QA
Ted Drake
 
Html 5
Html 5Html 5
Html 5
Ajay Ghosh
 
Mastering the Lightning Framework - Part 2
Mastering the Lightning Framework - Part 2Mastering the Lightning Framework - Part 2
Mastering the Lightning Framework - Part 2
Salesforce Developers
 
Android Training (Android UI)
Android Training (Android UI)Android Training (Android UI)
Android Training (Android UI)
Khaled Anaqwa
 
Android accessibility
Android accessibilityAndroid accessibility
Android accessibility
Puneet Kumar
 
What are accessible names and why should you care?
What are accessible names and why should you care?What are accessible names and why should you care?
What are accessible names and why should you care?
Russ Weakley
 
01 08 - graphical user interface - layouts
01  08 - graphical user interface - layouts01  08 - graphical user interface - layouts
01 08 - graphical user interface - layouts
Siva Kumar reddy Vasipally
 
Mobile testing android
Mobile testing   androidMobile testing   android
Mobile testing android
Basant Dewangan
 
Android development session 3 - layout
Android development   session 3 - layoutAndroid development   session 3 - layout
Android development session 3 - layout
Farabi Technology Middle East
 
How to enhance Email with Embedded Experiences
How to enhance Email with Embedded ExperiencesHow to enhance Email with Embedded Experiences
How to enhance Email with Embedded Experiences
IBM Connections Developers
 
MOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app developmentMOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app development
anistar sung
 
The Audio User Experience for Widgets
The Audio User Experience for WidgetsThe Audio User Experience for Widgets
The Audio User Experience for Widgets
toddkloots
 

What's hot (20)

How to create ui using droid draw
How to create ui using droid drawHow to create ui using droid draw
How to create ui using droid draw
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
Twitter trends
Twitter trendsTwitter trends
Twitter trends
 
DOM and Accessibility API Communication
DOM and Accessibility API CommunicationDOM and Accessibility API Communication
DOM and Accessibility API Communication
 
Accessiblity 101 and JavaScript Frameworks
Accessiblity 101 and JavaScript Frameworks Accessiblity 101 and JavaScript Frameworks
Accessiblity 101 and JavaScript Frameworks
 
Android application-component
Android application-componentAndroid application-component
Android application-component
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
 
Android accessibility for developers and QA
Android accessibility for developers and QAAndroid accessibility for developers and QA
Android accessibility for developers and QA
 
Html 5
Html 5Html 5
Html 5
 
Mastering the Lightning Framework - Part 2
Mastering the Lightning Framework - Part 2Mastering the Lightning Framework - Part 2
Mastering the Lightning Framework - Part 2
 
Android Training (Android UI)
Android Training (Android UI)Android Training (Android UI)
Android Training (Android UI)
 
Android accessibility
Android accessibilityAndroid accessibility
Android accessibility
 
What are accessible names and why should you care?
What are accessible names and why should you care?What are accessible names and why should you care?
What are accessible names and why should you care?
 
01 08 - graphical user interface - layouts
01  08 - graphical user interface - layouts01  08 - graphical user interface - layouts
01 08 - graphical user interface - layouts
 
Mobile testing android
Mobile testing   androidMobile testing   android
Mobile testing android
 
Android development session 3 - layout
Android development   session 3 - layoutAndroid development   session 3 - layout
Android development session 3 - layout
 
How to enhance Email with Embedded Experiences
How to enhance Email with Embedded ExperiencesHow to enhance Email with Embedded Experiences
How to enhance Email with Embedded Experiences
 
MOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app developmentMOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app development
 
The Audio User Experience for Widgets
The Audio User Experience for WidgetsThe Audio User Experience for Widgets
The Audio User Experience for Widgets
 

Similar to Accessible web applications

Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Steven Faulkner
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
Patrick Lauke
 
Technology Research
Technology ResearchTechnology Research
Technology Research
Katrina Washington
 
Actsheet10
Actsheet10Actsheet10
Actsheet10
Katrina Washington
 
Introduction to Shiny for building web apps in R
Introduction to Shiny for building web apps in RIntroduction to Shiny for building web apps in R
Introduction to Shiny for building web apps in R
Paul Richards
 
An Introduction to WAI-ARIA
An Introduction to WAI-ARIAAn Introduction to WAI-ARIA
An Introduction to WAI-ARIA
IWMW
 
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
Patrick Lauke
 
Actsheet10-slideshow
Actsheet10-slideshowActsheet10-slideshow
Actsheet10-slideshow
Katrina Washington
 
How to Use Material UI Tooltip Component Like a Pro
How to Use Material UI Tooltip Component Like a ProHow to Use Material UI Tooltip Component Like a Pro
How to Use Material UI Tooltip Component Like a Pro
RonDosh
 
Basic Introduction Flutter Framework.pdf
Basic Introduction Flutter Framework.pdfBasic Introduction Flutter Framework.pdf
Basic Introduction Flutter Framework.pdf
PhanithLIM
 
Sencha touch
Sencha touchSencha touch
Sencha touch
Akshay Prabhu
 
Introduction to Flex Hero for Mobile Devices
Introduction to Flex Hero for Mobile DevicesIntroduction to Flex Hero for Mobile Devices
Introduction to Flex Hero for Mobile Devices
Ryan Stewart
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
Doncho Minkov
 
Workshop Android for Java Developers
Workshop Android for Java DevelopersWorkshop Android for Java Developers
Workshop Android for Java Developers
mhant
 
Accessibility: A Journey to Accessible Rich Components
Accessibility: A Journey to Accessible Rich ComponentsAccessibility: A Journey to Accessible Rich Components
Accessibility: A Journey to Accessible Rich Components
Achievers Tech
 
How To Build An Accessible Web Application
How To Build An Accessible Web ApplicationHow To Build An Accessible Web Application
How To Build An Accessible Web Application
Dennis Lembree
 
flutteragency-com-handling-events-and-user-input-in-flutter-.pdf
flutteragency-com-handling-events-and-user-input-in-flutter-.pdfflutteragency-com-handling-events-and-user-input-in-flutter-.pdf
flutteragency-com-handling-events-and-user-input-in-flutter-.pdf
Flutter Agency
 
Titanium Meetup Deck
Titanium Meetup DeckTitanium Meetup Deck
Titanium Meetup Deck
sschwarzhoff
 
WPF Fundamentals
WPF FundamentalsWPF Fundamentals
WPF Fundamentals
Our Community Exchange LLC
 
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern ImplementationJavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementation
davejohnson
 

Similar to Accessible web applications (20)

Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
 
Technology Research
Technology ResearchTechnology Research
Technology Research
 
Actsheet10
Actsheet10Actsheet10
Actsheet10
 
Introduction to Shiny for building web apps in R
Introduction to Shiny for building web apps in RIntroduction to Shiny for building web apps in R
Introduction to Shiny for building web apps in R
 
An Introduction to WAI-ARIA
An Introduction to WAI-ARIAAn Introduction to WAI-ARIA
An Introduction to WAI-ARIA
 
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
 
Actsheet10-slideshow
Actsheet10-slideshowActsheet10-slideshow
Actsheet10-slideshow
 
How to Use Material UI Tooltip Component Like a Pro
How to Use Material UI Tooltip Component Like a ProHow to Use Material UI Tooltip Component Like a Pro
How to Use Material UI Tooltip Component Like a Pro
 
Basic Introduction Flutter Framework.pdf
Basic Introduction Flutter Framework.pdfBasic Introduction Flutter Framework.pdf
Basic Introduction Flutter Framework.pdf
 
Sencha touch
Sencha touchSencha touch
Sencha touch
 
Introduction to Flex Hero for Mobile Devices
Introduction to Flex Hero for Mobile DevicesIntroduction to Flex Hero for Mobile Devices
Introduction to Flex Hero for Mobile Devices
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
Workshop Android for Java Developers
Workshop Android for Java DevelopersWorkshop Android for Java Developers
Workshop Android for Java Developers
 
Accessibility: A Journey to Accessible Rich Components
Accessibility: A Journey to Accessible Rich ComponentsAccessibility: A Journey to Accessible Rich Components
Accessibility: A Journey to Accessible Rich Components
 
How To Build An Accessible Web Application
How To Build An Accessible Web ApplicationHow To Build An Accessible Web Application
How To Build An Accessible Web Application
 
flutteragency-com-handling-events-and-user-input-in-flutter-.pdf
flutteragency-com-handling-events-and-user-input-in-flutter-.pdfflutteragency-com-handling-events-and-user-input-in-flutter-.pdf
flutteragency-com-handling-events-and-user-input-in-flutter-.pdf
 
Titanium Meetup Deck
Titanium Meetup DeckTitanium Meetup Deck
Titanium Meetup Deck
 
WPF Fundamentals
WPF FundamentalsWPF Fundamentals
WPF Fundamentals
 
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern ImplementationJavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementation
 

Recently uploaded

Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
fredae14
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 

Recently uploaded (20)

Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 

Accessible web applications

  • 1. Accessibility of Rich Internet Applications (Afternoon Session) Hans Hillen (TPG) Steve Faulkner (TPG) 1 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011
  • 2. HTML5 accessibility New Solutions New Problems
  • 3. Accessible HTML5 will be a beautiful thing
  • 4. Current support for HTML5 accessibility What is meant by support? Features provided Features implemented Features implemented with accessibility support In Browsers In Assistive Technology
  • 5. What is meant by support? Features are implemented in browsers Useful site - When can I use... Does not mean features are usable by all users even if they use a browser that ‘supports’ a feature. Firefox video support
  • 6. the <video> element No major browser has full accessibility support for HTML5 video Providing full accessibility support means jumping through hoops: Scripted controls Scripted captioning and audio description
  • 7. the <video> element All major browser now support HTML5 video Meaning you can watch/hear a video and use the controls if you can see, hear and use a mouse
  • 8. the <video> element Terril Thompson: “That all sounds like a lot of work. Isn't HTML5 <video> supposed to be easy?” “Ultimately though ... HTML5 <video> is easy. A novice web developer can pop a video onto their web page in less than a minute with some very simple HTML markup. Unfortunately if they do that today it won't be accessible without a little additional sweat. Someday, hopefully, browsers will do all of this work for us, and every video will be accessible. That's what we're working toward.”
  • 9. Example the <canvas> element All major browser now support HTML5 canvas Meaning dynamic images, animation, games and content is available without plug-ins
  • 10. Example the <canvas> element Only one major browser supports HTML5 canvas accessibility And only partially
  • 11. Example the <canvas> element The accessibility features of canvas are still being specified. What is implemented in IE9 gives an idea of how canvas accessibility will work. Example
  • 12. Accessible implementation What’s it mean? Conveys semantics required to understand and interact. Can be used in a device independent way Uses common design patterns Accomodates browser & OS accessibility features interoperable
  • 13. The humble button Accessibility API Input device browser role=button state=focused value= search action=press
  • 14. Accessibility APIs MSAA Iaccessible2 UI automation AX STK roles states properties interaction + device independent interaction
  • 15. A tool to look under the hood MSAA inspect.32.exe or inspect.exe
  • 16. Another tool to look under the hood Aviewer
  • 17. The humble button Accessibility features for a button a whirlwind tour
  • 18. New HTML5 form controls When implemented and implemented accessibly, will make it a lot easier to provide accessible UI’s Current implementation is patchy and where implemented, accessibility support is poor. Lets take a quick tour: HTML5 form controls
  • 19. Placeholder attribute Minor addition to HTML5 Yet brings new headaches for developers and users Poor contrast disappears Results in different accessible labels across browsers and labelling methods HTML5 Accessibility Chops: the placeholder attribute
  • 20. ARIA landmark roles vs HTML5 section elements ARIA defines roles that act as landmarks for intra page navigation and identification of common content areas HTML5 defines section elements for common semantic features of pages, some old some new There is some overlap HTML5 section elements are largely unimplemented (accessible). FireFox has some experimental implementation
  • 21. Section elements and landmarks Examples of use Bruce Lawson’s site Wordpress Mappings between section elements and landmark roles: HTML5 Accessibility Chops: section elements
  • 22. ARIA Landmark Roles Landmark roles identify important sections commonly found in web pages: Applied to container elements Allow AT users to quickly see which sections a page has and navigate to individual sections In JAWS, use the following commands: ; (semicolon):jump to next landmark Shift + ;(semicolon): jump to previous landmark Ctrl + Ins + ;(semicolon): Show list of available landmarks In NVDA use D to jump to next landmark Shift + D to previous landmark NVDA+f7 Show list of available landmarks
  • 23.
  • 24. Banner: A region that contains the primary heading or web site title. (site logo, login details, etc.)
  • 25. Search: The search tool of a web document.
  • 26. Navigation: The documents Navigation menus and links.
  • 27. Main: The main content of web document.
  • 28. Form: contains a collection of items and objects that, as a whole, combine to create a form.
  • 29. Complementary: content that has meaning outside the page as well (e.g. a sidebar with related articles).
  • 30. Contentinfo: Metadata that applies to the parent document (e.g. copy right disclaimers, company info).
  • 31. Application: See next slide.Using WAI ARIA Landmark Roles
  • 32. Aria Landmark Roles: Role=“Application” Normally, Screen readers browse in ‘virtual mode’ Screen reader navigates a virtual copy of the web page. Screen reader intercepts all keystrokes, and uses them for its own virtual navigation (e.g. ‘H’ for heading navigation). For dynamic web apps, virtual mode may need to be turned off Interactive widgets need the keystrokes themselves. Content needs to be live, not a virtual copy. Normally, the user had to switch manually between virtual an non-virtual mode. role=“application” When applied a container element the screen reader will automatically switch to non virtual mode.
  • 33. Application Role vs. Document Role Some parts of your application may actually be treated as a document rather than application UI. For example: A web based email client has panes in which messages are read or created. A blog viewer web application can load articles to read. In these parts, the screen reader user needs virtual mode: To make use of the special navigation that comes with it. To be able to read non focusable content role=“document” When applied to a container inside an application role, the screen reader will switch back to virtual mode. Allows documents to be read or edited inside a web app.
  • 34. HTML5 Accessibility information HTML5Accessibility.com
  • 35. Implementing ARIA Solutions Practical examples 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 27
  • 36.
  • 37.
  • 38. <div role=“button” aria-pressed=“true” aria-disabled=“true”>Attribute names always start with ‘aria-’ 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 28
  • 39.
  • 40.
  • 41. Focus and Keyboard Accessibility 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 30
  • 42. Focus & Keyboard Accessibility To be accessible, ARIA input widgets need focus Use natively focusable elements, such as <a>, <input />, etc Add ‘tabindex’ attribute for non focusable elements, such as <span>, <div>, etc. Tabindex=“0”: Element becomes part of the tab order Tabindex=“-1” (Element is not in tab order, but focusable) For composite widgets (menus, trees, grids, etc.): Every widget should only have 1 stop in the tab order. Keep track where your widget’s current tab stop is: Alternative for tabindex: ‘aria-activedescendant=“<idref>” Focus remains on outer container AT perceives element with the specified ID as being focused. You must manually highlight this active element, e.g. With CSS 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 31
  • 43.
  • 44. Create you own event handlers to manage
  • 45. For composite widgets (trees, menus, etc.) individual parts can be reached using other keys, such as:
  • 49. Keep in mind: how would I navigate this widget in a desktop environment?
  • 50. Mouse based actions must also be available through the keyboard. For example:
  • 51. Write Key handlers trigger the same results mouse events
  • 52. Use context menus to make relevant options accessible.03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 32
  • 53. Expected Widget Behavior Not sure about how a widget should behave with the keyboard? Use the DHTML Style Guide: http://dev.aol.com/dhtml_style_guide 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 33
  • 54. Managing Interwidget Navigation Make sure that all widgets are reachable through keyboard Depend on Tab order (default or custom?) Support global keyboard shortcuts How do you notify your users? Implementing a custom focus manager Might be best solution for very complex UI's Let go of the traditional tab order idea ("all focusable elements must be reachable by tab order") Provide intuitive skipping mechanisms 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 34
  • 55.
  • 56. Skip links are out of date, out of fashion and often is misused
  • 57. Better alternatives for skipping:Collapsible sections Consistent shortcuts (e.g. a shortcut that moves focus between panes and dialogs) Custom focus manager that allows the user to move focus into a container to skip its contents 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 35
  • 58.
  • 59. If dialog supports moving or resizing, these features must be keyboard accessible
  • 60. Support closing dialogs using Enter (OK) or Escape (Cancel) keysFocus should be placed back on a logical element, e.g. the button that triggered the dialog. 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 36
  • 61. Selection & Editing Trees, Lists, Grids can support single or multiple selection Multiple selection must be keyboard accessible, for example: Shift + arrow keys: contiguous selection Ctrl + arrow keys: move focus without selection Ctrl + space: Toggle focused item in selection (discontiguous selection) Editable grids need to support switching to edit mode by keyboard 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 37
  • 62.
  • 63. Advanced ARIA Implementation Techniques 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 39
  • 64.
  • 65. Singular interactive widgets, e.g. button, checkbox
  • 66. Composite widgets, such as trees or toolbars:
  • 67. Requires both a label for the widget as a whole and its individual parts
  • 69. A window or Pane requires a title
  • 70. To label ARIA widgets:
  • 71. You could use standard HTML labeling techniques:
  • 72. Label element and title attributes.
  • 73. Or: Aria-labelledby, aria-label, & aria-describedby03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 40
  • 74.
  • 75. Value is one or more IDs of elements that identifiy the widget.
  • 76. The elements ‘aria-labelledby’ targets can be any kind of text based element, anywhere in the document.
  • 77. Add multiple Ids to concatinate label text:
  • 78. Multiple elements can label one widget, and one element can label multiple widgets. (example)
  • 80. Similar to labelledby, except used for additional description, e.g. Form hints, instructions, etc.
  • 82. Simply takes a string to be used as label.
  • 83. Quick and dirty way of making the screen reader say what you want.
  • 84. Very easy to use, but only supported in Firefox at the moment. <h2 id=“treeLbl”>My Folders</h2> <p class=“hidden”>Each tree item has a context menu with more options</p> <div role=“tree” aria-labelledby=“treeLbl” aria-describedby=“treeDesc”> ... 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 41
  • 85. Labeling containers Containers such as toolbars, dialogs, and regions provide context for their contents When the user moves focus into the container, the screen reader should first announce the container before announcing the focused control <div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDescription"> <h2 id="dialogTitle">Confirm</h2> <p id="dialogDescription"> Are you sure you want to do that? </p> <button>Yes</button> <button>No</button> </div> 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 42
  • 86. ARIA Live Regions 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 43
  • 87. What are Live Regions? Live regions Parts of a Web page that the author expects to change and where new information maybe added updated or removed. Examples of live regions: Status updates Changing stock information Chat windows Log windows (chat transcript logs), notification areas (status, alerts) 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 44
  • 88.
  • 89.
  • 90. Example: stock updater03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 45
  • 91. Live Region Properties and How to Use Them To identify a live region, add the aria-live attribute. One of the most important concepts behind live regions is politeness. Politeness indicates how much priority a live region has. The following politeness values are available for aria-live: off, polite, and assertive. 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 46
  • 92.
  • 93. Number of users currently online
  • 94.
  • 95.
  • 96. Warnings & error notifications.
  • 97. Session timeout notifications03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 47
  • 98.
  • 99. aria-atomic=“false”: only the part of the region that changed should be announced on its own.
  • 100.
  • 101. aria-busy=“false”: region update is complete, AT can start announcing the update.03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 48
  • 102.
  • 103.
  • 104.
  • 105. Role=“log”Like marquee, but information is added in meaningful order and old information may disappear. 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 50
  • 106. Fallback solutions / Hacks 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 51
  • 107.
  • 108. It's possible to provide a fallback solution for IE to fix this, using hidden fieldsets to apply the ARIA dialog markup to Hide fieldset's padding, margin, and border Move legend off-screen <fieldset role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDescription"> <legend id="dialogTitle">Confirm</legend> <p id="dialogDescription"> Are you sure you want to do that? </p> <button>Yes</button> <button>No</button> </fieldset> 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 52
  • 109.
  • 110.
  • 112. Indicates that the element(s) referenced by the IDs should be considered a child of the element that has this attribute.<h3 id="header">Vegetables</h3> <ul role="list" aria-labelledby="header" aria-owns="external_listitem"> <li role="listitem">Carrot</li> <li role="listitem">Tomato</li> <li role="listitem">Lettuce</li> </ul> … <div role="listitem" id="external_listitem">Asparagus</div> 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 54
  • 113.
  • 114. Screen reader does not perceive one single table, but it sees two ore more separate tablesAssociation between column headers and cells is broken Screen reader's table navigation is broken 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 55
  • 115. Fixing Incorrect Grid Structure (2) If using a single table is not feasible, use ARIA to fix the grid structure as perceived by the screen reader Use role="presentation" to hide the original table elements form the screen readers Use a combination of "grid", "row", "gridcell", "columnheader" roles to make the screen reader see one big grid. 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 56
  • 116. Fixing Incorrect Grid Structure (3) Using ARIA to create a correct grid structure <div role="grid"> <table role="presentation"> <tr role="row"> <th role="columnheader">Dog Names</th> <th role="columnheader">Cat Names</th> <th role="columnheader">Cow names</th> </tr> </table> <table role="presentation"> <tr role="row"> <td role="gridcell">Fido</td> <td role="gridcell">Whiskers</td> <td role="gridcell">Clarabella</td> </tr> </table> </div> 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 57
  • 117. Color and Contrast 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 58
  • 118.
  • 119. If that's not possible, it's an option to design a high(er) contrast theme that the user can enable03 / 15 / 11 59 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011
  • 120.
  • 121. Add additional visual indications, e.g. font weight, decoration & style03 / 15 / 11 60 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011
  • 122. high contrast mode example 03 / 15 / 11 61 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011
  • 123. Wrapping Up 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 62
  • 124.
  • 125. Use a screen reader to try out your aria widgets and roles.
  • 126. JAWS 10 has decent support, but misses certain things
  • 127. NVDA has better ARIA support, is free and has a ‘silent’ mode
  • 128. Compare with widgets in Desktop to know what to expect.
  • 132. Shows Focus role, states, name and description
  • 134. Lets you have a look at your page’s underlying ‘accessible tree
  • 137. Developer Tools for IE803 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 63
  • 138. Where to Find More Get Started with ARIA: http://www.w3.org/WAI/intro/aria ARIA Best Practices: http://www.w3.org/TR/wai-aria-practices/ DHTML Styleguide: http://dev.aol.com/dhtml_style_guide 03 / 15 / 11 Accessibility of HTML5 and Rich Internet Applications - CSUN 2011 64

Editor's Notes

  1. With accessibility support HTML5 will become a powerful, useful, interoperable, versatile language for the world wide web.
  2. Each HTML feature has a role, name, state and other property values that need to be hooked into the accessibility APIs by the browser. Assistive technology can then use this information to convey a representation of the feature to users.
  3. For users of assistive technology to be able to access and interact with web content, browser developers need to expose HTML5 features through accessibility applications interfaces and make interactive features operable without the use of a mouse.
  4. This site is a resource to provide information about which HTML5user interface features are accessibility supported in browsers, making them usable by people who rely upon assistive technology (AT) to use the web.It is not intended to dissuade developers from using HTML5 features. Sometimes there are better choices, sometimes developers have to add a little extra to make the feature useful or usable, and other times features have simply not been implemented by any browser or only by browsers that do not yet support assistive technologies. As a consequence it may not yet be practical to use a particular HTML5 feature. Example work around for lack of implementation or lack of accessible implementation are are provided.
  5. Demos:Bad treeGood Tree
  6. Demo: Slider
  7. Jquery Demo (collapsible sections)GXT Focus Manager
  8. GXT Focus Manager demo (open window under &quot;Window&quot; tab)
  9. Basic GridGridrow editor
  10. Validation sample
  11. CA example
  12. Jquery dialog example
  13. Stock sample
  14. ARIA grid fix example