Mastering ARIA (Accessible Rich Internet Applications)

Sep 8, 2019 · 492 words · 3 minute read

The search for a more inclusive web has driven the development of many tools and practices. Among these, ARIA (Accessible Rich Internet Applications) has emerged as a key player in making the web more accessible to everyone, including those with disabilities. In this post, we’ll review the world of ARIA and discuss how you can use it to enhance web accessibility.

ARIA is a set of attributes that can be added to HTML elements to define ways to make web content and applications more accessible. They are especially useful when developing complex widgets and controls that HTML alone can’t describe.

However, it’s important to note that ARIA should be used as a complement to semantic HTML, not a replacement. The first rule of ARIA use, according to the WAI-ARIA Authoring Practices, is: “If you can use a native HTML element HTML5 or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.”

In general, you should use ARIA in these three cases:

1. Widgets: When creating custom controls that aren’t available in HTML, such as a complex slider or a tree view, you can use ARIA roles and properties to provide the necessary semantics.

2. Live Regions: If a part of the page updates dynamically without a full page reload, such as notifications or live chats, you can use ARIA to inform assistive technologies about these changes.

3. Semantic Enhancements: If your element is semantically correct but still lacks necessary semantic information for assistive technologies, ARIA can fill in the gaps.

To illustrate, let’s take a look at a simple example. Suppose you’re building a custom checkbox. In HTML, a checkbox is usually created with the <input type="checkbox"> element, but if you’re building a custom one, you might use a <div> instead. Here’s how you can make it accessible:

<div role="checkbox" aria-checked="false" tabindex="0">
  I agree with Terms and Conditions
</div>

role="checkbox" tells assistive technologies that this div acts as a checkbox. The aria-checked attribute indicates the state of the checkbox, and tabindex="0" ensures it’s reachable via keyboard navigation. Remember, ARIA doesn’t affect how an element looks or behaves for users without assistive technologies, it only provides extra information for those who need it.

ARIA is a powerful tool in the web accessibility toolkit. But like any tool, it’s most effective when used wisely. Always start with semantic HTML, then use ARIA to bridge any remaining accessibility gaps. By doing so, you can create rich, engaging web experiences that are accessible to all.

Accessibility