Principle 4: Robust

Using ARIA for status and module information

ARIA is a W3C specification that stands for “Accessible Rich Internet Applications”. It consists of markup that can be added to HTML in order to clearly communicate the roles, states, and properties of user interface elements. This information helps screen readers and other assistive technologies to better understand the elements on a web page, and to provide a user interface that enables their users to effectively interact with those elements.

For example, imagine a web page where a user is able to click a button to trigger some action on the page. When they click the button, a message appears at the top of the page informing the user of their success or failure. Using HTML alone, screen reader users would have no idea that this message has appeared, and even if they suspected it had appeared, they might not be able to easily find it. With ARIA, the developer could simply add role="alert" to the container where the message will appear. Then, when the content of that container changes screen readers will interrupt the user by announcing the message content. The user’s focus will remain in their original location so they can resume their work.

If you are developing dynamic, rich, interactive user interface elements for web pages, they must include ARIA markup or there is very little possibility of their being accessible.

testing and checks

Checking for alt text problems

If you are choosing widgets, modules or plugins that provide this same sort of functionality, you must research their accessibility, including whether they include ARIA markup.

If you are developing your own web applications or widgets, consult the resources section to learn more about how to integrate ARIA into your development.

additional guidance

References and useful links

  • WAI-ARIA Authoring Practices- This resource from the W3C provides detailed steps for developing rich web applications using ARIA, including example code.
  • WAI-ARIA Design Patterns- This resource is a part of the preceding resource but deserves special mention. It is a growing collection of recommendations for implementing specific web widgets such as accordions, dialogs, and menus. The recommendations, developed with input from a wide variety of stakeholders, include recommended keyboard models and ARIA markup.
  • MDN ARIA Site- This site from the Mozilla Developer Network is a hub for excellent information, including tutorials, articles, and examples.
  • Introduction to ARIA- This article by Gez Lemon on the Dev.Opera site is one of the best at providing an introductory explanation of ARIA.
  • The W3C ARIA Specification- This is the definitive resource on ARIA, but as a technical spec it is not especially easy reading.
  • WCAG 2.1 guidelines