Best Practices on aria-label, aria-labelledby and aria-describedby
Introduction: ARIA, also known as WAI-ARIA stands for Web Accessibility Initiative — Accessible Rich Internet Applications (WAI-ARIA). This is a specification describing how to achieve accessibility for websites (developed using AJAX, JavaScript, HTML, which is how most websites in past few years have been).
Aria offers roles, states and attributes which enable assistive technologies such as screen readers to better understand (and better narrate) the web page. In this article, we look at 3 ARIA attributes viz. aria-label, aria-labelledby and aria-describedby and the use cases for each.
Similarities and Differences between aria-label, aria-labelledby and aria-describedby
aria-label This attribute can be attached to any HTML element. The screen reader will announce the label text when the user is on this element. In the example below the screen reader will announce “Real time news by CNN”
<a href="..." aria-label="Real time news by CNN">
CNN
</a>aria-labelledby This attribute allows the label to be set based on content of other ids. E.g. in the code below, we have 3 divs with ids of account, firstName and lastName. The div with id of account has the value of “Primary Account Holder”. The div with the id of firstName has the value of “First Name”. So when the screen reader reaches the line <input type=”text” aria-labelledby=”account firstName”/>, it will announce “Primary Account Holder First Name”.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Demo</title>
</head><body><div id="account">Primary Account Holder</div> <div>
<div id="firstName">First Name</div>
<input type="text" aria-labelledby="account firstName"/>
</div> <div>
<div id="lastName">Last Name</div>
<input type="text" aria-labelledby="account lastName"/>
</div>
</body></html>
aria-describedby This is very similar to aria-labelledby described above.This attribute allows the description to be set for an element based on ids.
So what is the difference between aria-describedby and aria-labelled-by? This is hard to tell as both these are very similar. A label describes the essence of an element where as the description provides greater information to help the user. So aria-described by tends to be longer although this is only a heuristic, not a rule.
Use Cases where these can be leveraged:
aria-label, aria-labelledby and aria-describedby can be used in interactive HTML elements.
These should not be used for non interactive elements such as <div>, <span>,etc.
The best use case for leveraging the above attributes is form inputs. Here either aria-label or one of aria-labelledby or aria-describedby can help screen readers.
Other interactive elements such as button may not require the above attributes although these can still be used. E. g. a screen reader would be able to read the narration “Save Form” quite easily and hence the above attributes may not be required.
<button>Save Form</button>Here is a good note from Paciello Group on suggestions on when to use the above attributes.
Conclusion: Either aria-label or one of aria-labelledby and aria-describedby allow the screen reader to better narrate the inputs of a form to the user and should be used in form input elements. Hence these must be leveraged while developing web forms.
Using these attributes on other interactive elements will also help. However there are other ways by which screen readers can read such elements (as described in the button example above). Hence these attributes are not required to be used exclusively for most interactive elements except form inputs.
