How does WAI-ARIA help with digital accessibility?
WAI-ARIA is a technology that can help make websites more accessible. But if not used properly, it can also actually cause more accessibility problems. That is why it is important to know what it is and how to use it properly.
What is WAI-ARIA?
First, it is important to know exactly what WAI-ARIA is. Let's start by explaining the meaning. WAI-ARIA is an abbreviation. The first part of this abbreviation, WAI, stands for the "Web Accessibility Initiative". This is an intiative aimed at making the web more accessible to all. The second part, ARIA, stands for "Accessible Rich Internet Applications". This is a collection of attributes that allows you to improve the accessibility of websites, by placing them in the website's code. This can be especially useful for self-built components in a website. WAI-ARIA thus allows developers to convey certain information to auxiliary software.
You can actually think of WAI-ARIA as a kind of CSS for assistive software. We use CSS to improve users' visual experience. You use WAI-ARIA to improve users' non-visual experience. So using WAI-ARIA does not affect users' visual experience. However, it does affect how someone using, for example, pre-reading software or a braille reader perceives the website.
Often, WAI-ARIA is also simply called ARIA. Surely that is just a bit easier to pronounce and write down!
Risks of WAI-ARIA
You can use WAI-ARIA to make your website more accessible, but it also comes with risks. Therefore, the first rule of its use is: use it only when it is really necessary. Or, as it is also said in the world of digital accessibility, "First rule of ARIA: don't use ARIA!".
If WAI-ARIA is not applied properly, it can actually give wrong information to users of assistive software. Thus, accessibility problems may actually increase. a study by WebAIM, in which 1 million homepages were scanned, found that pages with ARIA had more accessibility problems than those without. Therefore, make sure you know what you are doing and use WAI-ARIA appropriately.
For clear instructions on how best to use WAI-ARIA, check out the English-language manuals of WAI-ARIA. Here are examples of all kinds of different design patterns. That way, you can apply ARIA correctly without causing more problems.
Using WAI-ARIA
We won't explain all the ways to use WAI-ARIA in this article. There are a lot of them! A few examples will hopefully give you an idea of what you can do with it.
Customise role of an element
WAI-ARIA allows you to customise the function of elements on your website. For example, by putting role="button" on an element, you indicate to auxiliary software that that element is a button. This can be useful, for example, if you build interactive elements yourself, instead of using standard HTML.
Note that, when possible, it is often easier to just use a button element. With role="button" you don't make sure that an element also works as a button. You have to make sure that such an element can be operated with the keyboard.
Indicate active part
WAI-ARIA can also be used to convey certain visual information to auxiliary software. For example, consider a main menu in which the active item is visually designed differently. That link is then often formatted differently from the other links in the menu using CSS. But CSS only ensures that this information is visually clear.
So you can use WAI-ARIA in such a case to make this information available to auxiliary software users as well. This can be done by adding the attribute aria-current to the active link. This allows reading software, for example, to indicate which link in the main menu is active.
Add text alternative
WAI-ARIA can also be used to add a text alternative to images. This can be useful for svg elements, for example. You can then add a role="img" to indicate that it is an image. Then you add the aria-label attribute with a text describing the image. The aria-label is then a replacement for the alt attribute, which allows you to add a text alternative to img elements.
Advice on digital accessibility and WAI-ARIA
Could you use some advice on digital accessibility and WAI-ARIA? For example, do you want to know whether it is necessary to use it to solve accessibility problems in your website? Or how to use it in the right way? Then feel free to contact us and we will see what we can do for you.
