Accessibility Series - HTML5 Aria attribute

RobotCherries — Mon, 28 Dec 2020 15:32:05 +0000

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

DEV Community: RobotCherries

Accessibility Series - HTML5 Aria attribute

❓ What is it?

❓ When should you use this?

❓ What problems does it solve?

💢📽 Problem example:

❓ Is is supported by all of the main browsers?

(click the picture to view more info)

♿🎯 Find out the accessibility score of your site/app

📚🔭 Learn more about Aria

📚🔭 Learn more about Accessibility

Thank you for reading! 🤘💖

Photo by MagicPattern on Unsplash