Label in Name
Summary:
WCAG 2.5.3, "Label in Name," ensures that user interface components with visible text labels also include that text in their accessible name. This is particularly beneficial for users who rely on voice recognition software or screen readers.
What:
The guideline requires that the accessible name (the name exposed to assistive technologies) of a control includes the text that is visible to all users.
Why:
For voice navigation users, it's crucial that speech commands match visible labels. Similarly, screen reader users benefit from consistent naming, making interactions more intuitive and straightforward.
Examples and Scenarios:
- Buttons: A submit button labeled "Submit" visually should have the same accessible name.
- Links: Text links should have the same text in their accessible name as shown on screen.
- Form Fields: Labels for form fields should match their accessible names.
How to Comply:
- Websites: Use ARIA labels or other HTML techniques to ensure the accessible name matches the visible label.
- Mobile Apps: Apply consistent naming for UI elements in their code and visible labels.
- Software Applications: Ensure labels and their corresponding accessible names are consistent across the UI.
Exceptions:
- Non-text Controls: Controls without text, like icons, may not follow this rule but should still have descriptive accessible names.
- Decorative Elements: Elements purely for decoration and not interactive might not require matching labels and names.