The Accessible Rich Internet Applications (WAI-ARIA) technical specification helps make dynamic content accessible to people who use screen readers or who cannot use a mouse. Generally, the roles, states, and properties defined by the WAI-ARIA specification provide semantics when they are not available, such as when using Javascript, SVG, Ajax, or DHTML, to develop user interface controls that cannot be created with HTML alone.
Examples of when it is essential to implement WAI-ARIA include accordions, alerts, some menus, modal and non-modal dialogs, tree views, and drag and drop. With interactive widgets, like these, an assistive technology user needs to know about changes that either may happen automatically or may happen after initiating an action.
Details to Help You Get Started
Learning when to use WAI-ARIA can be overwhelming, as there are many roles, states, and properties to understand. Furthermore it is important to include additional functionality, such as focus indication and keyboard handling, that typically "come for free" in HTML and browsers. At the same time, screen readers and browsers (in various combinations) have increasingly stable support for ARIA, but certain adjustments may be needed, depending on what versions of them will be supported by the developed web page.
WAI-ARIA Landmark Roles
When appropriate, WAI-ARIA landmark roles should be included to offer information about the organization of content on a page. Landmarks are:
- Banner
- Complementary
- Contentinfo
- Form
- Main
- Navigation
- Region
- Search
To learn more about landmark roles, see the WAI-ARIA Authoring Practices 1.1 section on Landmark roles.
Working with Javascript Frameworks
When implementing a Javascript framework, it is important to make sure you consider accessibility from the very beginning, by looking for accessible components and/or tools that will help you implement the framework accessibly. Researching these in the beginning will save you time and effort, and you won't "reinvent the wheel".
Resources from the W3C
- Background and documents that support the specification, including code samples: WAI-ARIA Overview
- Current recommendation: Accessible Rich Internet Applications (WAI-ARIA 1.0)
- Working document for updated version of the recommendation: WAI-ARIA 1.1
- Using ARIA, including the five rules of ARIA
- WAI-ARIA Authoring Practices 1.1
- HTML 5.1 specification module: ARIA in HTML
Video Training
- Start Building Accessible Web Applications Today - course by Marcy Sutton via Eggheadio
- A11ycasts with Rob Dodson - Google Chrome Developers