Can someone explain the HTML5 aria-* attribute?

html

accessibility

aria-attributes

semantic-html

byAlex Kataev·Nov 26, 2024

ARIA or aria-* attributes in HTML5 provide additional semantics to help assistive technologies, like screen readers, understand and convey the content to users with disabilities:

<button aria-label="Close">X</button> <!-- Nice 'X', but what does it mean? Oh, it's Close. Nice! -->

Similarly, aria-hidden tells such technologies to ignore or skip the content:

<div aria-hidden="true">Invisible to screen readers.</div> <!-- Peekaboo, I see you... not! -->

These additional attributes ensure your web content is not only accessible but also easily navigable and intuitive for all users.

Detailed understanding of ARIA attributes

ARIA (Accessible Rich Internet Applications) attributes cannot be created at will; they are predefined and should be used responsibly to avoid what I like to call - accessibility paradox, where the implementation of accessibility features itself becomes a barrier.

A classic example of ARIA use is aria-labelledby, which associates an element with another that provides its label. Here's how it works:

<h2 id="modal-title">Confirmation</h2>
<div role="dialog" aria-labelledby="modal-title">
  <!-- Some serious confirmation stuff inside-->
</div> <!-- Pssst... the secret confirmed inside! -->

Even though these attributes are a powerful tool to enhance your webpage accessibility, a word of caution: incorrect or redundant use can lead to a confusing and frustrating user experience.

Breaking down key ARIA roles and attributes

Understanding the key roles and attributes can make the ARIA implementation more effective. Wordpress bloggers, hold my coffee:

role="navigation": All your navigation links belong to this buddy!
aria-controls: Links an element to another element that it controls, like Master Yoda and the force!
aria-expanded: Imagine flipping a light switch on/off, except it's for your content that can be collapsed!
aria-live: Notifies assistive technologies about those pesky dynamic content like chat messages or weather updates!

And remember, with great power (read: roles and attributes), comes great responsibility (read: accurate application).

Practical ARIA applications and pitfalls

The jungle of ARIA is full of hypothetical snakes that can turn your attempts at accessibility into a nightmare. One such venomous snake is applying aria-hidden on elements that appear hidden but are actually interactive. This would deny screen readers any access to these elements.

Another practical aspect to consider is the appropriate level of assertiveness (passive vs assertive) while using aria-live. When push notifications are about discounts in your favorite store, 'assertive' is preferred, but ‘polite’ when you just want to say that it’s raining again.

Semantic HTML is the foundation of all good design. ARIA are like ornaments, they should complement, not replace, the structure formed by semantic HTML.

Do's and Don'ts with ARIA

Using ARIA attributes efficiently requires a bit of balancing act. The following best practices will give you a head start:

Use HTML5 whenever possible as it inherently supports accessibility
Ensure you're not providing misleading or redundant ARIA attributes
Test with actual screen readers and other assistive technologies
Remember, ARIA attributes are predefined and standardized. There's no scope for invention.

Broaden your accessibility vision

ARIA attributes are your best friends when it comes to accessibility, but remember, they're not the only friends you've got! Other factors come in play, like:

The good ol’ semantic HTML.
Considering usability testing with actual users, including users with disabilities.
Navigable keyboard support, sufficient color contrast, responsive design.