a11yTips
35. Introduction to ARIA
6 December 2021One of the top rules in accessibility is to use semantic HTML. We all know that building interactive and application Native HTML tags are not enough. Eg: there is no HTML tag for banner, notification, carousel, tabs, etc. which are the most used in every web application. Building these accessible modules is a challenge. In addition to this, notifying the assistive tools of any change happening on the page due to the JavaScript is a challenge
How we can solve this problem?
The answer is ARIA and today we will learn ARIA.
What is ARIA
ARIA stands for the 'Accessible Rich Internet Application'. ARIA in DOM bridges the gap between the DOM and Assistive tools. Where-ever there is no semantic tag ARIA helps in adding the additional information to make it accessible for the tools.
1) ARIA are the HTML attributes
2) ARIA adds subtle information in the DOM for the Assistive tools.
There is 3 part of the ARIA:
1) Roles
2) Property
3) State
Role
aria-role
in layman means telling the tools 'what' it is. Eg: with semantic HTML header
assistive tools can recognize that it is a header. If you are working on a feature such as a menu and there is no native HTML then we can use aria-role
. AT will identify 'what' tag it is because of 'aria-role'. An important thing to remember about aria-role
once they are set they won't get changed.
Eg: Here we are using role=banner
. This will notify the screenreaders this is a banner
.
<div aria-role="banner">
<h1>Some Heading...</h1>
</div>
There are 6 categories of Roles:
a. landmark
b. document
c. widget
d. abstract
e. Composite widget
f. Live region
g. Window
Property
aria-property
in layman language telling the AT 'what' property it has. It is more descriptor of the tool. It explains the relationship with the other elements. You can use the aria property with native and non-native HTML
tags. Similarly, like the role
property
can't be changed too.
Eg: In this example as the input has no label
tag we can use ARIA property for AT to read the label.
<input type="search" aria-label="enter product name to search..." />
States
aria-state
in layman language tell AT 'what state' it has. This is an important pillar to make the javaScript interactive web apps accessible for the AT. Eg: checked, unchecked, etc. The state can be changed by using JavaScript.
Eg: In this based on the user action we can toggle the aria-checked
state and AT will be notified accordingly.
<ul>
<li aria-checked="false">Apple</li>
<li aria-checked="true">Orange</li>
</ul>
When NOT to use ARIA
There is a saying:
No ARIA is better than the wrong ARIA.
The reason for this is ARIA augments the ADOM (accessibility DOM) for the assistive tools. Wrong ARIA will provide the wrong information to the assistive users.
Rule of ARIA
1) No ARIA is better than bad ARIA
2) Always prefer semantic tag over ARIA
3) Do not change the behavior of the native HTML tags
4) For any focusable elements do not add role=presentation
or hidden=true
5) Always change the 'state' when any change is triggered by JavaScript.