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.
Introducing the Accessibility Node Inspector
Recent nightly builds of WebKit include a new accessibility section in the node properties of the Web Inspector. Select any DOM element to see relevant accessibility information, such as the computed role.
We’ll use the WebKit Accessibility Node Inspector to diagnose and inspect the examples below.
Complex ARIA Widget Examples
Making ARIA widgets can be challenging. The examples below illustrate some of the trickier bits of implementation. Debugging these controls is made easier by observing accessibility properties in the Web Inspector.
Example 2: Selectable List Box with Full Keyboard Support Using Native Focus Events
This demo was created in 2009 for Apple’s World Wide Developer Conference (WWDC) and uses the “roaming tabindex” technique on a custom list box.
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
During the life cycle of a web application, there may be multiple points of user interest. In the list box example, the web application moves focus to the updated item, but moving focus is not always appropriate. In a combo box, keyboard focus should remain on the text field so the user can continue typing. The selected item in the related drop-down list is conveyed to the API when the selection changes, allowing a a screen reader to speak updates to both elements. Some combo boxes have an additional status display to indicate the total number of results. In this demo, we’ll use an ARIA “live region” for the status updates.
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
ARIA 1.0 has much room for improvement, but it’s an incredibly important step toward ensuring equal access, opportunity, and usability of the web platform.
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.
- WWDC 2014: Improving the Accessibility and Usability of Complex Web Applications
- WWDC 2012: Improving Accessibility in Books
- WWDC 2011: Combining Web Accessibility and Automation on iOS
- WWDC 2009: Improving Accessibility in Web Applications
Feed Source: Surfin’ Safari
Article Source: Using ARIA 1.0 and the WebKit Accessibility Node Inspector