Accessibility Series - HTML5 Aria attribute

❓ 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
 

---

 

Thank you for reading! 🤘💖

Photo by MagicPattern on Unsplash