Introduction to ARIA
Tags: webdev, a11y, programming
Published: 2021-12-06 17:27:19

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`.

```html
  <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

[List of all roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques)

## 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.

```HTML
<input type="search" aria-label="enter product name to search..." />
```

[List of all property](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques)

## 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.

```HTML
<ul>
    <li aria-checked="false">Apple</li>
    <li aria-checked="true">Orange</li>
</ul>
```

[List of all states](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques)

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

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