Accessible Rich Internet Applications (ARIA) is a set of roles and attributes designed to make web content and applications more accessible. For the visually impaired using screen readers, ARIA enhances the user experience by providing additional cues and context.
However, it’s crucial to remember that ‘no ARIA is better than bad ARIA’. Misusing these attributes can make your site less accessible, causing more harm than good. Good HTML semantics can solve most accessibility issues without the need for ARIA. Proper use of elements like <header>, <nav>, <main> and <footer> provide a solid foundation for accessibility. These native HTML tags are already designed to be understood by screen readers and other assistive technologies.
To see if ARIA can improve your website’s accessibility, here are its most commonly used attributes and their roles in enhancing user experience:
Aria-label
The aria-label attribute functions like a hidden label, supplying a text description for elements that don’t have visible text. This description is picked up by screen readers, offering users with visual impairments a clearer understanding of the element’s purpose. For instance, a button shown only as an ‘X’ can be made more accessible by adding an aria-label.
<button aria-label="close">X</button>
In this case, a screen reader will announce it as ‘Close, button’. Without ARIA, the same element would typically be read as ‘X, button’.
For images, it’s best to use the alt attribute for accessibility, rather than aria-label. The exception is inline SVG graphics, where aria-label can be used to provide a text description.
Aria-hidden
If you have elements like icons or decorations that don’t need to be read by screen readers, aria-hidden should be used.
For example, if you have a star emoji that’s purely decorative, you can use aria-hidden like this:
<span aria-hidden="true">🌟</span>
Screen readers will skip this element and not read it out. Without ARIA, it might be read as ‘star’. Don’t use aria-hidden on elements that provide key functionality or information.
Aria-expanded
If you have interactive elements like accordions that can be toggled open or closed, it’s advisable to use the aria-expanded attribute. For a button that reveals more information when clicked, you can set it up like this:
<button aria-expanded="false">Menu</button>
<div>...</div>
With aria-expanded, a screen reader will initially say ‘Menu, collapsed, button’. When the button is clicked, you can update ‘false’ to ‘true’ using JavaScript, and the screen reader will announce ‘Menu, expanded, button’. Without aria-expanded, the screen reader would just say ‘Menu, button’, leaving the user unsure whether the menu is open or closed.
Summary
ARIA attributes are a powerful tool for enhancing website accessibility, but their use should be thoughtful and targeted. Writing clean, semantic HTML should be your first line of defence. If you resort to using ARIA, it’s crucial to actually test your site with a screen reader. Hearing how your site works can give you invaluable insights and guide you in making truly accessible web content. It’s not just about ticking boxes; it’s about providing a usable experience for all.
If you want to explore ARIA more, you can find patterns and code on W3C ARIA Patterns Guide.
