Skip to main content

Oregon State Flag An official website of the State of Oregon »

Oregon.gov Homepage

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.

ARIA Explained

ARIA sends parts of the HTML to screen readers to indicate details that may not otherwise have been available to them.

Difference between Accessibility with HTML5 and ARIA

The following shows where HTML5 references tags, and ARIA references attributes.

  • HTML5 tag example = <header>, ARIA attribute example = <div role="banner">
  • <button aria-label="Close" onclick="myDialog.close()">X</button>
  • For more, see dequeuniversity's page.

Similarities

WCAG says when it is possible to use HTML5 instead of ARIA, to use HTML5 instead. However there are tags and attributes that do the same thing, but some screen readers ignore the HTML5 tag... so in that case it is good to use ARIA.

See the following three page examples that are stripped down to show you bare landmark essentials. All three work.

1: HTML5

               <header>
   <p>Put company logo, etc. here.</p>
</header>
<nav>
   <ul>
      <li>Put navigation here</li>
   </ul>
</nav>
<main>
   <p>Put main content here.</p>
</main>
<footer>
   <p>Put copyright, etc. here.</p>
</footer>

2: HTML5 and ARIA Combined

               <header role="banner">
   <p>Put company logo, etc. here.</p>
</header>
<nav role="navigation">
   <ul>
      <li>Put navigation here</li>
   </ul>
</nav>
<main role="main">
   <p>Put main content here.</p>
</main>
<footer role="contentinfo">
   <p>Put copyright, etc. here.</p>
</footer>

3: ARIA

               <div role="banner">
   <p>Put company logo, etc. here.</p>
</div>
<div role="navigation">
   <ul>
      <li>Put navigation here</li>
   </ul>
</div>
<div role="main">
   <p>Put main content here.</p>
</div>
<div role="contentinfo">
   <p>Put copyright, etc. here.</p>
</div>

HTML and ARIA in Screen Readers

Even though this devqueuniversity web page says it is out of date, it shows examples of differences between screen readers, browser versions, HTML5, and ARIA.

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.
  • 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.

External WCAG References

Most Details from this page were gleaned from the University of Washington's Accessible Technology section.