Accessibility Series - HTML5 Aria attribute
Tags: html, a11y, ux, webdev
Published: 2020-12-28 15:32:05

#### ❓ What is it?
&nbsp;&nbsp;&nbsp;&nbsp; It's a HTML5 tag **attribute**.
&nbsp;

#### ❓ When should you use this?
&nbsp;&nbsp;&nbsp;&nbsp; Whenever you build/replace a native html element with a custom one.
&nbsp;&nbsp;&nbsp;&nbsp; **and**
&nbsp;&nbsp;&nbsp;&nbsp; Your site/app is intended to be used by a variety of people.
&nbsp;

#### ❓ What problems does it solve?
&nbsp;&nbsp;&nbsp;&nbsp; [Web Accessibility (a.k.a A11y or Wai Aria)](https://developer.mozilla.org/en-US/docs/Web/Accessibility) related problems.

&nbsp;&nbsp;&nbsp;&nbsp; It allows you to convey the meaning of an element to people who
&nbsp;&nbsp;&nbsp;&nbsp; rely on assistive technology in order to browse the web.
&nbsp;&nbsp;&nbsp;&nbsp; (see example below)
&nbsp;

##### 💢📽 **Problem example:**
&nbsp;&nbsp;&nbsp;&nbsp; A visually impaired person is browsing an online page listening to the
&nbsp;&nbsp;&nbsp;&nbsp; screen-reader dictate the content to him/her.

&nbsp;&nbsp;&nbsp;&nbsp; Suppose that a section of the page is rendering some custom-made
&nbsp;&nbsp;&nbsp;&nbsp; checkboxes which are built only from divs.

&nbsp;&nbsp;&nbsp;&nbsp; In this case, listening to the screen reader recite the nested divs and
&nbsp;&nbsp;&nbsp;&nbsp; text won't be very useful in understanding what is going on and that
&nbsp;&nbsp;&nbsp;&nbsp; those are some required checkboxes meant to be used.

&nbsp;&nbsp;&nbsp;&nbsp; Therefore the solution is using this neat **aria** attribute, labeling
&nbsp;&nbsp;&nbsp;&nbsp; the checkboxes and any other relevant content in order to prevent such
&nbsp;&nbsp;&nbsp;&nbsp; issues.
&nbsp;

#### ❓ Is is supported by all of the main browsers?
&nbsp;&nbsp;&nbsp;&nbsp; YES, it is well supported by almost all versions from 2006 till present.
&nbsp;&nbsp;&nbsp;&nbsp; [![Image of all the browsers which support this feature](https://dev-to-uploads.s3.amazonaws.com/i/75pf6kyerr4g9vqiflvp.png)]
(https://caniuse.com/?search=aria)
###### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (click the picture to view more info)
&nbsp;

✅👩‍💻 **Problem Code & Solution:**
Try it for yourself by opening the [page below](http://codepen.io/RobotCherries/debug/NWRwzjR/bZAQWKbPONVM) in a new tab and [Narrator](https://www.google.com/search?q=how+to+open+narrator&oq=how+to+open+narrator&aqs=chrome..69i57.3482j0j4&sourceid=chrome&ie=UTF-8) on Windows or [Voiceover](https://www.google.com/search?ei=cfnpX5iMDePrrgTA4I6oAQ&q=how+to+open+voiceover&oq=how+to+open+voiceover&gs_lcp=CgZwc3ktYWIQAzIECAAQRzIECAAQRzIECAAQRzIECAAQRzIECAAQRzIECAAQRzIECAAQRzIECAAQR1AAWABgp3NoAHADeACAAQCIAQCSAQCYAQCqAQdnd3Mtd2l6yAEIwAEB&sclient=psy-ab&ved=0ahUKEwjYiL_T_vDtAhXjtYsKHUCwAxUQ4dUDCA0&uact=5) on Mac.
{% codepen https://codepen.io/RobotCherries/pen/NWRwzjR %}

&nbsp;

---
&nbsp;

##### ♿🎯 Find out the accessibility score of your site/app
&nbsp;&nbsp;&nbsp;&nbsp; ▪ https://www.webaccessibility.com/
&nbsp;&nbsp;&nbsp;&nbsp; ▪ https://wave.webaim.org/
&nbsp;

##### 📚🔭 Learn more about Aria
&nbsp;&nbsp;&nbsp;&nbsp; ▪ [Google Chrome Devs - Intro to Aria](https://www.youtube.com/watch?v=g9Qff0b-lHk)
&nbsp;&nbsp;&nbsp;&nbsp; ▪ [Accessibility Developer Guide](https://www.accessibility-developer-guide.com/knowledge/aria/)

##### 📚🔭 Learn more about Accessibility
&nbsp;&nbsp;&nbsp;&nbsp; ▪ [Google A11ycasts Series](https://www.google.com/search?q=google+a11ycasts&spell=1&sa=X&ved=2ahUKEwiyyJLe3OvtAhUoposKHXuBCHAQBSgAegQIBhAw&biw=1920&bih=973&dpr=1)
&nbsp;&nbsp;&nbsp;&nbsp; ▪ [A11y Checklist for Designers & Devs](https://www.a11yproject.com/)
&nbsp;&nbsp;&nbsp;&nbsp; ▪ [Free Udacity Course on Web Accessibility](https://www.udacity.com/course/web-accessibility--ud891)
&nbsp;

----
&nbsp;

## Thank you for reading! 🤘💖

###### [Photo by MagicPattern on Unsplash](https://unsplash.com/@magicpattern)