ARIA, Accessible Rich Internet Applications, defines ways to make Web content more accessible to people with disabilities.

ARIA helps add more context to your content.

It is important to only use it if you really need to add more context. Improper usage of ARIA can actually make the web content less accessible.

ARIA doesn't change functionality, it only changes how a screen reader announces the content.

Let's have a look at an example where we are using role attribute, which is one of the most popular ARIA attributes.

<div role="button">Menu</div>

In the example above, the div will be announced as a button if the screen reader was to announce it.

The issue here is it is not a button semantically, meaning, we lose the other functionalities of a button, such as being able to Tab or Enter.

Such functionalities can be added with JavaScript and tabindex, though, that would be a lot of unnecessary work.

<button>Menu</button>

The example above would be announced as a button, and also contains the necessary functionalities a button should contain.

Another point to bring up, ARIA can be inconsistent among operating systems and browsers. Native elements are way more consistent.

When to use ARIA?

You may be wondering, how to decide if you should use ARIA.

Two questions you can ask yourself to determine whether you need ARIA or not:

• Is there a semantic option supported by browsers?

• Does the semantic HTML need some more context? Can we somehow through ARIA make the content more perceivable?

Attributes

Let's go over some commonly used attributes.

Role

Using the role attribute is a way to change the role in the Accessibility Tree.

<div role="link">Menu</div>

The example above would be announced as a link.

You can't make up values. A handful of roles exist already that are predefined, you can read more here: Roles.

A real-life example for this would be in one of my side projects, Madara.

aria-labelledby

The aria-labelledby attribute identifies the element that labels the current element, the element that sets the accessible name of the current element.

This attribute's value takes on a string that matches the id of the element used to label it. So it's labeled by an element with the same id, kinda how form inputs and labels are connected.

A silly example:

<button aria-labelledby="text-for-button"></button>
<span id="text-for-button">Menu</span>

Here the accessible name of the button, the name voiced by screen readers, would be Menu.

aria-label

The aria-label attribute sets the current element's accessible name.

<button aria-label="Menu"></button>

In the example above, the screen reader would still voice the button's name as Menu.

A real-life example for this would be in one of my side projects, Madara.

aria-describedby

The aria-describedby attribute identifies the element that describes the current element. This attribute's value takes on a string that matches the id of the element used to describe it.

The text used to describe the current element will be announced after the current element has been announced.

This attribute is often used to give detailed information or instructions.

<button aria-describedby="description-for-button" disabled>Menu</button>
<span id="description-for-button">Disabled because the text form is empty.</span>

In the above example, the screen reader would announce the button as Menu, button, Disabled because the text form is empty.

Obviously not the best example. A real-life example can be found in one of my side projects, Madara.

aria-expanded

The aria-expanded attribute is used to tell the user whether the element or a grouping element it controls is currently expanded or collapsed. It takes on true or false values, which you would dynamically set using JavaScript depending on the state.

<button aria-expanded="true">Toggle Options</button>
<ul>
 <li>
  <button>Option 1</button>
 </li>
 <li>
  <button>Option 2</button>
 </li>
 <li>
  <button>Option 3</button>
 </li>
</ul>

In the above example, the list of options would obviously be somehow dynamically shown via JavaScript.

A real-life use-case for this can be found in one of my side projects, Madara.

aria-hidden

The aria-hidden attribute removes an element from the Accessibility Tree, hence it won't be available for assistive technologies at all. This is great if you want don't want something to get voiced by the screen reader but still for it to be visible, perhaps a certain icon or something used solely for decoration purposes.

<nav>
 <ul>
 <li><a href="/">Home</a></li>
 <li>
 <span aria-hidden="true">»</span>
 <a href="/menu">Menu</a>
 </li>
 </ul>
</nav>

The link will be voiced as Menu, Link. The span is not in the Accessibility Tree at all.

A real-life example for this would be in one of my side projects, Madara.

Conclusion

This was more of an introduction to ARIA and going over some ARIA attributes.

I hope you found it useful.

If you want to learn more about ARIA, I recommend continuing digging here: ARIA.