One 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) Properties
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 7 categories of Roles:
a. landmark
b. document
c. widget
d. abstract
e. Composite widget
f. Live region
g. Window
Properties
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.
Eg: instead of using role="button" use native tag. It would be too noisy for the AT
<div role="button">I am button</div>
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.
Happy Learning!!
Top comments (4)
Very nice, just a little typing error in the end with hidden=true, I think you mean aria-hidden="true".
Also the role "none" is the same as the "presentation" role.
And Developpers shall be careful the use of the "tabindex" attribute with value "-1", which basically put an element out of the tab order.
Or Any value superior to "0", beacause it overwrites the natural tab order.
Great article Neha! ❤🦄
One minor typo:
and then you have 7 items! 😋🤣
Thank you.
Hahaha...will correct :p
Very insightful.