❓ What is it?
It's a HTML5 tag attribute.
❓ When should you use this?
Whenever you build/replace a native html element with a custom one.
and
Your site/app is intended to be used by a variety of people.
❓ What problems does it solve?
Web Accessibility (a.k.a A11y or Wai Aria) related problems.
It allows you to convey the meaning of an element to people who
rely on assistive technology in order to browse the web.
(see example below)
💢📽 Problem example:
A visually impaired person is browsing an online page listening to the
screen-reader dictate the content to him/her.
Suppose that a section of the page is rendering some custom-made
checkboxes which are built only from divs.
In this case, listening to the screen reader recite the nested divs and
text won't be very useful in understanding what is going on and that
those are some required checkboxes meant to be used.
Therefore the solution is using this neat aria attribute, labeling
the checkboxes and any other relevant content in order to prevent such
issues.
❓ Is is supported by all of the main browsers?
YES, it is well supported by almost all versions from 2006 till present.
(click the picture to view more info)
✅👩💻 Problem Code & Solution:
Try it for yourself by opening the page below in a new tab and Narrator on Windows or Voiceover on Mac.
♿🎯 Find out the accessibility score of your site/app
▪ https://www.webaccessibility.com/
▪ https://wave.webaim.org/
📚🔭 Learn more about Aria
▪ Google Chrome Devs - Intro to Aria
▪ Accessibility Developer Guide
📚🔭 Learn more about Accessibility
▪ Google A11ycasts Series
▪ A11y Checklist for Designers & Devs
▪ Free Udacity Course on Web Accessibility
Top comments (0)