2.5.3 Label in Name (A)
Understanding 2.5.3 Label in Name (A)
For user interface components with labels that include text or images of text, the Accessible name contains the text that is presented visually.
Why is this a problem?
The ‘name’ is text by which software can identify a component within Web content to the user. The ‘Accessible Name’ is text in the DOM that is understood by both the AT (like a screen reader) and the browser. This is often hidden in code.
These need to match so that:
- Speech input users can activate controls on a page.
- Text-to-speech users will have a better experience because the labels that they hear match the visible text labels that they see on the screen.
Requirements / What to do?
The accessible name can be the ‘label’ used on a form input. This can be provided by the label element in HTML or by an aria-label or similar. There are other ARIA and HTML elements that can provide the accessible name for a component.
Ensure that the:
- Accessible name matches the visible label: The accessible name and visible label of a control match.
- Accessible name starts with visible label: The accessible name of a “Start here” button begins with the same text as the visible label.
Common mistakes
- The Accessible name does not contain the visible label text
- The Accessible name contains the visible label text, but the words of the visible label are not in the same order.
- The Accessible name contains the visible label text, but there are extra words in the label.