This document is in beta. Help us by reporting issues via Github or email.
Back to the overview page
Accessibility name matches or includes visible label
Does an interactive element have a visible label?
→ Make sure that assistive technologies know it by the same name. Or by a name that includes the name shown on screen.
The name by which assistive technologies know a user interface component must match the name that users see on screen for that component.
On this page:
Requirements
- Every interactive component must have a name that assistive technologies (like screen readers or speech input software) can understand. That name of a component that is exposed to assistive technologies is called its ‘Accessible Name’.
Requirements covered by this guideline
- Ideally, the ‘Accessible Name’ of a user interface component should be the same as the name of that component that is displayed on screen (for example, the label of a button or text input field).
If it’s not possible to make the visible name and the ‘Accessible Name’ the same, then:
- Make sure that the ‘Accessible Name’ at least includes the name that’s visible on screen.
- Try to make ‘Accessible Name’ start with the name that’s visible on screen.
Notes
- In some cases, an element’s ‘Accessible Name’ and its visible name are automatically the same, like the text of a button or the label associated with a text input field. But in other cases that’s not automatic.
- There are also cases where you might want to make the ‘Accessible Name’ more descriptive that the text visible on screen so that it makes sense out of the visual context.
- For example, the ‘Accessible Name’ of a ‘Buy’ button that is positioned next to a Harry Potter book might be ‘Buy Harry Potter and the Philosopher’s Stone’.
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.
Why?
When a user interface component’s ‘Accessible Name’ matches the name visible on screen, then:
- 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 screen.
Official wording in the Web Content Accessibility Guidelines
2.5.3 Label in Name: For user interface components with labels that include text or images of text, the name contains the text that is presented visually. (Level A)
A best practice is to have the text of the label at the start of the name.
See the W3C’s detailed explanation of this guideline with techniques and examples.
Guidance for Design
- On your designs, write what the ‘Accessible Name’ of interactive components should be, whenever it’s not the same as the visible name
- If the ‘Accessible Name’ and the visible name are different, make sure that the ‘Accessible Name’ starts with the visible name
More guidance for Design
Guidance for Web
More info
Sources
Contribute
This document is in beta. Help us by reporting issues via Github or email.