ARIA

Check out the official ARIA Documentation.

For a complete list, also see the official spec.

Labels

Earlier, we learned about the <label> tag in HTML and how it can be used to label certain form elements.

The ARIA spec provides us with great tools for labelling and describing any element we want. They are:

• aria-label
• aria-labelledby
• aria-describedby

What is the difference between labelledby and describedby?

A label provides essential information about an object, while a description provides extended information that the user might need.

Roles, States and Properties

ARIA also provides roles which can be applied to any element. Examples include:

• button
• checkbox
• tree
• banner
• aria-autocomplete
• aria-haspopup

For a full list of all roles, states and properties click here.

CSS Selectors

        
          .dropdown[aria-expanded="false"] .icon::after {
            content: '▶';
          }
          .dropdown[aria-expanded="true"] .icon::after {
            content: '▼';
          }
        
      

Live Regions

Applications can become very dynamic. For cases where important information could be coming in at any time, the ARIA spec provides the ability to mark an element as containing live data so that screen readers can read out updates as they come.

Think of using the Uber app to hail a ride. At first your status will be "waiting for a ride" but at an undetermined time it will change to "drive en route". For this we could:

        
          <div aria-live="assertive">Waiting for a ride</div>
        
      

Then, all we have to do is update the content of that div and any assistive technology will let the user know.

One of my favorite APIs, the value that you pass in to aria-live is a politeness setting. You can pass in:

• assertive - will interrupt whatever it's doing to announce.
• polite - will announce the live region update when it next idles.
• off - will not read the update.

Let's play around with live regions in exercise 3.