ARIA/Accessibility - A Beginner's Guide
Tags: html, a11y, tutorial
Published: 2021-05-31 04:22:33

## Introduction 

**What is WAI-ARIA and why we need it?**
_It stands for **Web Accessibility Initiative - Accessible Rich Internet Applications**, more commonly known as ARIA. As per [MDN Web Doc](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA), ARIA is a set of attributes that define ways to make web content and web applications (HTML, JavaScript) more accessible to people with disabilities._

Internet is a place that is open for all and should be accessible to everyone, hence web application, even a simple HTML page needs to be built in a way that could be used by everyone, even people with some challenges.

ARIA doesn't interfere with DOM and neither impacts the visual appearance, it just enriches the web content making content within reach for all.

If correct HTML5 tags are used, then half work is already done, as HTML5 brings the semantic that is understood by browsers and screen readers. For example, using an anchor element with a role as a button to submit a form instead of using a button element is not an ideal practice.

```html
//This is NOT ideal
<a role="button">Submit</a>
//This is ideal
<button>Submit</button>
```

Again, same for using div with a role as a heading instead of using h1 element, when h1 is designed for heading.

```html
//This is NOT ideal
<div role="heading" aria-level="1">This is a heading</div>
//This is ideal
<h1>This is a heading</h1>
```

ARIA defines semantics that can be applied to HTML elements, with these divided into roles, and states and properties that are supported by a role. For the complete list of roles, and state and properties visit [here](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques).

## Let's see an example:
### 1. Table

```html
<div role="table" aria-label="Table for city to state mapping">
  <div role="rowgroup">
     <div role="row">
       <span role="columnheader" aria-sort="none">City</span>
       <span role="columnheader" aria-sort="none">State</span>
     </div>
   </div>
   <div role="rowgroup">
    <div role="row">
       <span role="cell">Chicago</span>
       <span role="cell">Illinois</span>
    </div>
    <div role="row">
      <span role="cell">Norwalk</span>
      <span role="cell">Connecticut</span>
    </div>
  </div>
</div> 
```

To create an ARIA table, add `role="table"` to the container element. Within that container, each row has a `role="row"` set and contains child cells. Each cell has a role of either `columnheader`, `rowheader`, or `cell`. Rows can be children of the table or within a `rowgroup`.

ARIA is a vast topic that can't be wrapped up in a single blog, however, hopefully, this is enough to get you started with it. There are a lot of resources available, but I generally refer to MDN docs, which provides precise explanation. I have mentioned few references at the end of this article. But, before I end this article, wanted to walk you through few common mistakes.

## Common Mistakes:
### 1. Overriding default roles 

The button element has default characteristics that should not be overridden with anything else.

```html
<button role="heading">submit</button>
```

### 2. Adding redundant roles

The button tag already has the implicit role for the element, why to explicitly declare it again.

```html
<button role="button">submit</button>
```

_If you have reached here, then I did a satisfactory effort to keep you reading. Please be kind to leave any comments or ask for any corrections. **Happy Coding!**_

## References:
- https://www.w3.org/TR/html-aria/
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques
- https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles