Using ARIA for Web Applications

Overview

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.

Techniques

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 following resources to learn more about how to integrate ARIA into your development.

  • 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.
  • Open Ajax Examples
    This site features a collection of working examples of interactive widgets that feature ARIA techniques.
  • 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.

Testing

  • Use the W3C Markup Validation Service to check your HTML against current web standards. This tool includes checks for valid use of ARIA markup.
  • Test your website or web application with multiple browser/screen reader combinations. Support for ARIA is a moving target, and even if your code is valid, there might be problems in the way its rendered with assistive technologies. There is no substitute for testing, especially if your site has rich, interactive content.

References