Using aria-describedby to provide helpful form hints

When a form field has a label, screen readers will announce it automatically when focus moves to the field. If additional information is available to help people complete the task, it’s also a good idea to associate it with the field in question.

Quick label recap:

<label for="password">Choose a password</label>
<input type="password" id="password" …>

If this field was included in a form for creating a new account, the field might have the following additional information displayed:

<label for="password">Choose a password</label>
<input type="password" id="password" …>

<p>Your password must be at least 10 characters in length. It must contain a mixture of upper and lower case letters, numbers and punctuation marks.</p>

The additional information will be visually styled and positioned to make its relationship to the field apparent. However, a screen reader user who tabs through the form (from one field to the next) will be completely unaware that the additional information exists.

The aria-describedby attribute is used to provide an accessible description for an object within the user interface. Where the programmatically associated label provides the field’s accessible name, the aria-describedby attribute associates the field with the additional information to provide the field’s accessible description.

<label for="password">Choose a password</label>
<input type="password" id="password" aria-describedby="hint" ...>

<p id="hint">Your password must be at least 10 characters in length. It must contain a mixture of upper and lower case letters, numbers and punctuation marks.</p>

The aria-describedby attribute takes the idref of the paragraph containing the additional information as its value. It works in the same way as the for/id attribute pairing between the <label> and the <input>.

Note: it is possible to associate multiple sources of information using aria-describedby. Refer to Notes on Using ARIA in HTML for more information.

When a screen reader focuses on the field in this example, it will announce the label, the type of field, then the additional information (in that order). One of the advantages of this is that the additional information is announced last, so screen reader users are not obliged to listen to it every time they move to that field. They can listen to it if they choose, but if not they can listen to the label announcement and then carry on without waiting for the rest.