CHAPTER 3 OF 5

3. Names and descriptions

Your goal: give a control a clear name and add instructions separately.

A name identifies; a description explains

A button can take its accessible name from its text. An input can take its name from an associated label. Extra instructions can be connected with aria-describedby.

<label for="email">Email address</label> <p id="email-help">We will use this for workshop updates.</p> <input id="email" type="email" aria-describedby="email-help">

Choose the naming method deliberately

• aria-labelledby references existing text by ID to provide a name, where naming is supported.
• aria-label provides a name directly when an appropriate visible naming method is not available.
• aria-describedby references additional explanatory text; it is not the primary label.

These naming attributes can override a control’s text-derived name. Do not add them simply because a control already has visible text.