aria-label vs aria-labelledby vs aria-describedby
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 , 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>
This is a good article about Labeling Controls: w3.org/WAI/tutorials/forms/labels