What is ARIA?

ARIA is an acronym that stands for _Accessibility Rich Internet Applications,_and from [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA#:~:text=Accessible Rich Internet Applications (ARIA,accessible to people with disabilities.&text=For instance%2C native elements have,keyboard accessibility%2C roles and states.), they are a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

It is designed to bridge the gap when HTML cannot sufficiently handle accessibility concerns.

This means the first solution to accessibility is to use semantic HTML. If that does not suffice, employ ARIA. [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA#:~:text=Accessible Rich Internet Applications (ARIA,accessible to people with disabilities.&text=For instance%2C native elements have,keyboard accessibility%2C roles and states.) continues:

Developers should prefer using the correct semantic HTML element over using ARIA, if such an element exists.

When to use ARIA?

From the above statements, we see ARIA comes into use where native HTML fails.

Scenarios of when to use ARIA:

When the HTML5 element does not have accessibility support.

The HTML5 Accessibility site outlines a list of HTML5 elements and shows accessibility support for each browser. From the site:

This includes if they are keyboard accessible, mapped to the platform accessibility APIs, and if any accessibility related features are supported. An accessibly supported feature means it is usable by people who rely on assistive technology, without developers having to supplement with ARIA or other additional workarounds.

Table showing HTML5 elements accessibility support from HTML5 Accessibility Website

The table above shows accessibility support for different sections & grouping elements in different browsers. We can see all browsers have support except Internet Explorer that has “partial support” in most cases and “not available” in one.

#html #accessibility #aria