DEV Community

Neha Sharma
Neha Sharma

Posted on • Originally published at

Introduction to ARIA

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


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>
Enter fullscreen mode Exit fullscreen mode

There are 7 categories of Roles:

a. landmark

b. document

c. widget

d. abstract

e. Composite widget

f. Live region

g. Window

List of all roles


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..." />
Enter fullscreen mode Exit fullscreen mode

List of all property


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.

    <li aria-checked="false">Apple</li>
    <li aria-checked="true">Orange</li>
Enter fullscreen mode Exit fullscreen mode

List of all states

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>
Enter fullscreen mode Exit fullscreen mode

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!!

Discussion (4)

francoisaudic profile image

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.

inhuofficial profile image
InHuOfficial • Edited on

Great article Neha! β€πŸ¦„

One minor typo:

There are 6 categories of Roles:

and then you have 7 items! πŸ˜‹πŸ€£

hellonehha profile image
Neha Sharma Author

Thank you.

Hahaha...will correct :p

anandbaraik profile image

Very insightful.