Using ARIA 1.0 and the WebKit Accessibility Node Inspector
On the heels of the 25th birthday of the Web, WAI-ARIA 1.0—the specification for Accessible Rich Internet Applications—is a W3C Recommendation, thanks in part to WebKit’s implementation. Most major web applications use ARIA and related techniques to improve accessibility and general usability. Many web developers are familiar with the simple parts of ARIA, such as retrofitting roles in legacy or otherwise non-semantic uses of HTML like
<div role="button" tabindex="0">, but ARIA has other equally important uses:
- Improving languages like SVG where no accessibility semantics exist natively.
- Augmenting technologies like EPUB that build on existing HTML semantics.
- Allowing accessibility in native implementations, like the sub-DOM controls of
- Supporting accessibility and full keyboard access when HTML is insufficient, such as with data grids, tree controls, or application dialogs.
- Enabling accessible solutions where there is no equivalent semantic or functionality. For example, HTML has no concept similar to “live” regions.
More on these topics below, including how to diagnose and debug problems using new accessibility inspection features in the WebKit Web Inspector.
Example 1: ARIA in an SVG map of Africa
The Scalable Vector Graphics (SVG) language does not include semantics to indicate what type of content is represented, such as a chart, illustration, or interactive application control. However, ARIA roles and attributes can be used in SVG today for both raster- and vector-based images, and the SVG Working Group recently adopted ARIA officially into SVG 2. The following video shows VoiceOver’s touchscreen navigation of an accessible map. It uses a simple
role="img" on each country path, and an
aria-labelledby relationship to associate that country path with the text label. After watching the video, view the source of the test case SVG map of Africa to see how it works.
Prior to WebKit’s implementation of ARIA in SVG, the best opportunity for a blind individual to experience spatial data like charts and maps was to print expensive tactile graphics on swell paper or with a modified braille embosser. Along with WebKit’s first native implementation of accessible MathML, accessible graphics represent new possibilities in the category of study collectively referred to as STEM: science, technology, engineering, and math. Note: The test case SVG map of Africa is based on an original by Peter Collingridge, with accessibility added for the demo.
Introducing the Accessibility Node Inspector
Complex ARIA Widget Examples
Example 2: Selectable List Box with Full Keyboard Support Using Native Focus Events
focus(). View the source or step through in the WebKit debugger for a deeper understanding.
For a full explanation of the techniques and test case roaming tabindex demo used in the video, see WWDC 2009: Improving Accessibility in Web Applications.
Example 3: Combo Box with a “Status” Live Region
setAttribute(). View the source or step through in the WebKit debugger for a deeper understanding of the techniques.
As this combo box demo shows, the ability for an assistive technology to simultaneously follow and report changes to multiple points of user interest was never possible in web applications prior to ARIA.
Major Contributors to WebKit’s ARIA Implementation
WebKit’s implementation of ARIA played a significant part in the ARIA 1.0 Recommendation milestone, and many individuals collaborated on the work. The initial implementation was completed in 2008 by Alice Liu Barraclough and Beth Dakin. Much of the remaining ARIA implementation in WebCore, as well as the Mac and iOS platform mapping, was completed by Chris Fleizach. Sam White made major improvements to WebKit’s accessibility architecture. Jon Honeycutt, Brent Fulgham, Dominic Mazzoni, Mario Sánchez Prada, and others completed the platform mapping to the Windows and Linux accessibility APIs. Credit for the ARIA test harness and WebKit test results goes to Michael Cooper, Jon Gunderson, Mona Heath, Joseph Scheuhammer, Rich Schwerdtfeger, and others. The full list of working group acknowledgements is available in the ARIA spec. The Web is a more enabling resource for everyone because of the efforts of these individuals. Thank you!
Future Direction of ARIA
contenteditable, such as the custom display and input-proxied views that are used on application suites like Google Docs and iWork for iCloud.
A Call to Action
focus() where appropriate. Detect and update your web app state based on user focus events. Don’t just style the CSS of controls to look focused; use real keyboard focus. The amount of effort it takes to add and test for accessibility is well worth the fit-and-finish it will bring to your web app. You’ll improve the experience for all users.
Additional Video Resources
Each of these videos is about an hour in length. They cover ARIA and related techniques in detail.