Aria-describedby

We’ve talked a lot about establishing some kind of relationship between two elements. The classic example is the <label> in combination with FOR and an ID sitting within its corresponding <input>. What about another way? Let’s say we have an <input> for type password. Now we want to add some ort of description. Maybe we want to communicate how many characters the password should have.

<label for="pw">Password</label>
<input type="password" id="pw">
<button>Submit</button>
<p>The password should contain at least 18 characters</p>

Yes this works - especially for sighted persons. Remember that the browser will interpret the HTML from top to button. In this case that means the hint comes after the submit button. Imagine you don’t see what’s on your screen - perhaps you’ll never reach the hint. So we have to establish a connection between the password field and the hint. Please welcome the aria-describedby:

<label for="pw">Password</label>
<input type="password" id="pw" aria-describedby="pw-hint">
<button>Submit</button>
<p id="pw-hint">The password should contain at least 18 characters</p>

As with the for-id relationship we connect the input with the hint by adding aria-describedby and another ID.

ChromeVox will read password, password edit text, the password should contain at least 18 characters as soon as the user sets the focus on the <input>. VoiceOver, on the other hand, needs a few seconds. Then it will read You are currently on a text field inside of a HTML content. To enter text in this field, type. This is a secure text field. Text typed into this field will not be displayed and will not be spoken by VoiceOver. The help tag is: The password should contain at least 18 characters. Not only do we have to wait, but VoiceOver will tell you a lot before getting to the point with the help tag.

To go one step further let’s add a aria-hidden to the hint text so this paragraph will not be read out loud twice.

<label for="pw">Password</label>
<input type="password" id="pw" aria-describedby="pw-hint">
<button>Submit</button>
<p id="pw-hint" aria-hidden="true">The password should contain at least 18 characters</p>

Video example