ARIA stands for Accessible Rich Internet Applications—attributes of elements of HTML.
There are two kinds of ARIA attributes:
- roles, such as role=”navigation”
- states with values, such as aria-hidden=”true”
ARIA attributes can make or break the accessibility of a web component, so they should be used with care.
Five rules for using ARIA
The first rule of ARIA:
If you can use a native HTML element…or attribute with the semantics and behavior you require already built in, instead of repurposing an element and adding an ARIA role, state or property to make it accessible, then do so.
In other words, always go for the native HTML element first. That’s the most robust option, and it works on every device.
Go for native HTML first
Let’s look at selects. One disadvantage here is that the options are very hard to style. And then some designer comes up with all kinds of fancy styling and effects that are not possible with the native HTML5 select and optional elements.
Note to designers: Please learn how form controls work and what they look like. Not everything can be styled as a box. What users expect will often depend on what a form control looks like. For instance, they will expect radio buttons to be round.
And if you test this component with the screen reader VoiceOver, which is a quite common screen reader, selecting an option is completely silent. There is no feedback at all, despite all the ARIA. This component needs improvement.
Please keep in mind…
If it is quite difficult to make a component accessible, maybe it will also be too complicated for users to use without assistive technology. Maybe you need to rethink and simplify both your design and your set-up.
When can you use ARIA, then?
ARIA is all about feedback:
- What happens?
- What does this mean?
- How can I interact?
Let’s take an example: you can use ARIA to give feedback to assistive technology such as a screen reader so that it can announce whether a menu is open or closed, and point up a dynamically changing error message or the description of a form field.
The main takeaway
HTML is understood by all browsers and by all assistive technology. Go for native HTML first, and use ARIA to give additional feedback.
When you use ARIA to recreate an element or rebuild a web component from scratch, please test the result thoroughly, with a keyboard and a screen reader. Use zoom, different views, and mobile devices.
After all, you want your site to work for anyone, on any device.