2 minute read

WCAG 2.5.3: Label in Name (Level A)

Imagine you’re trying to close a pop-up using voice control, but saying “Close” does nothing because the button is visually labeled as “X.”

For users relying on assistive technology, labels need to match across all formats.

Label in Name ensures that visual labels match what screen readers and voice controls recognize.

Who this impacts

  • Voice control users: People who use voice navigation need the visible label to match what they say, so they can interact with elements by name.
  • Screen reader users: Consistent labels help screen reader users understand and interact with elements without confusion.
  • All users: Matching labels improve usability for everyone, making actions easier to understand and perform.

How to meet Label in Name

  1. Align visible labels with programmatic names: Make sure the visual label and the accessible name match, so screen readers and voice commands can interpret elements accurately.
  2. Use intuitive, descriptive names: Ensure all interactive elements have clear, concise names that describe their purpose.
  3. Verify with assistive tech: Test the site with screen readers and voice control software to make sure labels work as expected.

Practical example

A media player’s “Play” button is labeled visually and programmatically as “Play,” ensuring that users can activate it with a voice command or screen reader.

Top tips

  • Use consistent labeling: Ensure visual labels and programmatic names are aligned to reduce confusion, particularly the first word.
  • Optimize for clarity: Use straightforward language for labels so users immediately understand each element’s purpose.
  • Test with voice navigation: Check that all elements respond correctly when users speak their visible label.

Further reading

Previous articleNext article
Back to top