ARIA Guidelines

Overview

ARIA (accessible rich internet applications) is a set of attributes that can make interactive web content more accessible to people with disabilities. It can explicitly create semantic associations between different HTML elements, and can provide information to assistive technologies without exposing that same information to most users. It can help you do things like:

  • Inform screen readers when the state of content changes
  • Tell you when new content dynamically renders on the page
  • Alert you that a link will open in a popup

Guidelines

Use ARIA Sparingly

What ARIA does not do is expand upon the default functionality of a given HTML element. ARIA was published before the HTML5 specification, and many of the early uses of ARIA, especially the role attribute, are now largely redundant with the expanded set of semantic HTML 5 elements. Many people new to ARIA assume that, because ARIA is associated with accessibility, that more ARIA is always better. This is incorrect.

  • ARIA is not a replacement for semantic HTML. 
  • No ARIA is better than redundant ARIA.

Example:

If you use the <button> element, it will automatically receive keyboard focus. It will automatically be announced by screen readers as a button. If you implement this with an ARIA role on a generic container like <div role=”button”> you will need to manually add a tabindex attribute, add an id attribute to the <div> for JavaScript to target it, and write a JavaScript event handler to listen for keystrokes or interactions with the button. The end result of this added complexity is something that behaves like an out of the box <button>. Use native semantic HTML whenever possible.

References for Appropriate Uses of ARIA

By design, EOU websites don’t have many of the complex interactive elements that would benefit from using ARIA attributes. If your website has interactive elements with multiple states like image sliders, pop ups, dynamically updating content, and accordions, the WAI-ARIA Authoring Practices provides a repository of well-implemented patterns to use.