Introduction to Accessible Rich Internet Applications (WAI-ARIA)

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

Video Training

Other Resources