accessibility-guidelines

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

Requirement covered by the guideline ‘Name, Role and State of interactive controls’ – repeated here for context

Requirements covered by this guideline

If it’s not possible to make the visible name and the ‘Accessible Name’ the same, then:

Notes

  1. 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.
  2. 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

Why?

When a user interface component’s ‘Accessible Name’ matches the name visible on screen, then:

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

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.