Provide accessible text for user interface components with labels that contain visually presented texts. This enables people with disabilities to interact with user interface components.
Table of Contents
Official Requirements
Success Criterion 2.5.3 Label in Name (Level A): For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
A best practice is to have the text of the label at the start of the name.
Why is it required?
Users of speech recognition applications navigate by speaking the visible text labels of components, such as menus, links, and buttons, that appear on the screen. People with visual impairments use text-to-speech (screen readers) to navigate the web.
Therefore, visually presented text labels need to have accessible text, so that they can be programmatically determined by text-to-speech and speech-input applications. Furthermore, if the accessible name is different from the visible name, it will act as an unknown hidden command that is vulnerable to accidental activation.
How do we fix it?
- Ensure that the visible label and accessible name are exactly the same
- Make use of Accessible Name and Description Computation to create accessible names for labels
- When accessible names might require more details, make sure that it starts with the same text as the visible label.
Mistakes to avoid
- The accessible names does not contain visible label text
- The accessible name contains the visible label text, however, it is not in the same order
- The accessible name contains the visible label text but some words are interspersed in the label
