Rich Schwerdtfeger
CTO Accessibility IBM Software
Chair, W3C WAI-ARIA Working Group
ARIA
A way for authors to apply rich accessibility semantics in Web content
A way to reproduce the keyboard fuctionality of desktop apps
Accessibility API defines a standard contract between an application component and an assistive technology
- Role
- State
- Actions
- Caret
- Selection
- Text
- Hypertext
- Value
- Name
- Descrtipion
- Children
- Changes
- Relations
Early problem with HTML accessibility depends on tag names
JavaScript creates custom widgets using HTML, user imput, and CSS changing their meaning and purpose.
HTML lacked the accessibility meta data to support accessibilty APIs to repurpose HTML content
Dependence on excessive tabbing makes keyboard access unusable
What is WAI-ARIA?
- role attribute
- states
- properties
TABINDEX modification allows script to set focus on all elements with or without affecting tab order
implement TABINDEX
Browser manufacturers map HTML semantics and WAI-ARIA metadata to platform accssibility APIs
e.g. <div tabindex=”-1″ role=”menuitem” aria-disabled=”true”>
– Delivers semantics and desktop keyboard functionality to provide full interoperability with ATs
- typical widget states
- relationships
- new AJAX live region properties
- drag/drop
- miscellaneous
- role (widgets and navigational landmarks)
- tabindex
Role navigation Landmarks facilitates stuctural navigation
Browser Accessibility API Mapping – WAI-ARIA-enabled Checkbox
Web 2.0 / ARIA Navigation Paradigm Shift Navigation
- navigation tab and click
- everything but forms are browsed by AT
- pages reloads for new content
goes to:
- tabs to links, form elements, widgets, read-only text
- arrow key nav within widgets
- keyboard accellerators to widgets
- ATs to supply region nav
ARIA Landmarks
- application
- contentinfo
- main
- search
- complentary
- form
First thing to do on ALL web pages – apply regional landmarks
- define all Regional Landmarks
- ensure that all content resides in each nav landmark
- ensure landmarks have the same role have a label within the region
- where possible ensure labels are visible
- where possible make the labels an H1 to facility heading nav
- headning nav must be properly formed within landmark regions
- avoid role=”application” where possible
Keyboard Nav (manging focus) basics
- Tabindex=”-1″ – can set focus on and elemvnt without adding to tab order
- 0 – place focusable element in tab order in doc order
- >0 Same as today’s tabindex
Author-managed arrow key nav within widgets
- Capture key strokes at widget managing focus
- move focus to the child using tabindex
- managing parent indicate which child has focus using active descendant
WordPress password reset – A big bang with minor tweaks
- demonstration
Markup
e.g <div id=”pass-strength-result” aria-live=”assertive” class=”hide-if-no-js”>
WAI-ARIA is an extension to what you already know.
For tonight’s attendees: http://stage.knowbility.org/moodle/