HTML: aria-describedby

The aria-describedby attribute connects a control to supplementary text such as instructions, hints, or an error message.

What you will learn

How to connect a control to help text
How to reference one or more descriptions by id
How this attribute differs from a label or accessible name

Minimal example

<label for="password">Password</label>
<input id="password" aria-describedby="password-help" type="password">
<p id="password-help">Use at least 12 characters.</p>

The input keeps its name from the visible label. The text in password-help is additional information that assistive technology can announce.

Error message example

<input id="email" aria-describedby="email-error" aria-invalid="true">
<p id="email-error">Enter a valid email address.</p>

The referenced element must have a matching unique id. Keep the help or error text visible when sighted users also need it.

Common mistakes

Do not use aria-describedby as a replacement for a visible label.
Make sure every referenced id exists and is unique.
Use aria-label for an accessible name only when a suitable visible name is not available.