WAI-ARIA

WAI-ARIA refers to the Web Accessibility Initiative - Accessible Rich Internet Applications. It is a technical specification written by the World Wide Web Consortium (W3C). WAI-ARIA is usually called just ARIA.

Something I've been paying a lot of attention to lately is the use of ARIA. People seem to be using it quite excessively, and unfortunately, it often leads to accessibility issues. Everywhere where they teach about ARIA they say something along the lines of "Don't use ARIA unless you are sure you are using it correctly" or "No ARIA is better than Bad ARIA". The latter one is on W3C's official specification page of ARIA.

Rules of ARIA

The ARIA specification defines five rules of ARIA use:

1. If you can use a native HTML element or attribute with the semantics and behavior you require already built-in, then do so.
2. Do not change native semantics, unless you really have to.
3. All interactive ARIA controls must be usable with the keyboard.
4. Do not use role="presentation" or aria-hidden="true" on a focusable element.
5. All interactive elements must have an accessible name.

Always think of these rules while you implement any ARIA. Because it is crucial to have ARIA make the user experience better for your users instead of worse.

ARIA components

There are three main components of ARIA. They are roles, properties, and states. Roles are used for defining a type of user interface element. Properties and states can be applied to elements and are used together to support ARIA roles existing on a page. States can change on their own or with user interaction, usually with JavaScript. Properties rarely change once they’re set.

Some examples of roles are the landmark roles. These are the ones that are now mostly semantically equivalent to HTML5 elements. Read more about ARIA roles on my accessibility site.

Some examples of properties and states are aria-label and aria-hidden. With aria-label you can provide the assistive technologies with a label even if there is no visible label and with aria-hidden you can hide an element completely from the assistive technologies. Read more about ARIA properties and states on my accessibility website.

How not to use ARIA

First an example of how not to use ARIA. Once I saw an aria-label "Footer_first". This is absolutely useless for the user. For me, this clearly proves that the person who created this didn't know what they were doing, and they definitely didn't test the ARIA with a screen reader. So what exactly is wrong with this label? First of all, Footer as a term is easily problematic for your users because some might not understand it. And to be honest, what value does the user get from the information that these links are in the footer? Screen readers announce the landmarks, so the screen reader user will already know they are in the footer. Then there is the underscore when there should be a space. And lastly what good does the word first mean for the user? Nothing. What this basically is, is a first footer column or something similar. So there clearly is an error here, this information is not meant for the user, at least I hope it isn't.

I've also seen empty aria-label attributes. This causes immediate accessibility issues on assistive technologies because the screen readers at least don't tend to read anything. So if you have a link with an empty aria-label, you might give your assistive technology users only the element info. Make sure your ARIA works!

And aria-label is one of the most simple ARIA attributes. You can probably imagine that those bad examples get a lot worse when the use of ARIA gets more complicated.

ARIA is not a particularly easy subject to grasp, so it is very important that you always test what you use. And don't be afraid to even ask for help. The accessibility community is always willing to help because we all aim for the same goal - to have the web usable for all people. You can find a lot of people and communities online, but I've also collected some communities I'm part of, as well as some people I follow on Twitter to accessibility in social media page on my accessibility site.

How to use ARIA

Before you implement any ARIA, always think whether or not you actually need it. And I'll say it again, test what you use. I simply cannot stress this enough. Even if you know what you are doing, still test. We are only humans after all, we sometimes make mistakes.

On the WAI-ARIA Authoring Practices 1.1 page you can see a few examples of how to implement ARIA. There are examples for an accordion, alerts, message dialogs and carousels to name but a few. Also just by searching for an attribute online, you can find lots of materials and examples on about pretty much everything related to ARIA.

You can also read more about WAI-ARIA on my accessibility site, where I also link to various sources I've used for learning. I'm constantly updating my site because I'm learning something new all the time. And if you have any good info I'm missing on that site, please let me know!