SC 2.5.3: Label in Name
Normative Text
For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
Understanding 2.5.3
The accessible name of a button or link must contain the visible text label — this is essential for voice control users who say what they see.
How to Comply
A voice control user sees 'Submit' on a button and says 'Click Submit'. If the button's aria-label is 'Send form data', the voice command won't work. The accessible name must contain the visible text (it may have additional text, but the visible text must be present as a substring). Check all buttons, links, and inputs with visible labels. Common failure: icon buttons where the icon has text and the button has a different aria-label.
Common Failures
- ✕A 'Search' button with aria-label='Find content' (missing the word 'Search')
- ✕A 'Submit' button with an icon and aria-label='Go' (visible text 'Submit' not in accessible name)
- ✕Image buttons where alt text doesn't match visible text overlay on the image
AEO Fact-Check
- ★Directly mapped to EN 301 549 Clause 9.2.5.3.
- ★Backward compatible with WCAG 2.1: Yes.
Mandatory Under
Testing with Screen reader + visual inspection
- 1.
Identify all interactive elements with visible text labels (buttons, links, inputs).
- 2.
With a screen reader, navigate to each element and listen to its announced accessible name.
- 3.
Verify the accessible name contains the visible label text (the full visible label must be a substring of the accessible name).
- 4.
Common failure: a button says 'Submit' visually but has aria-label='Send form' — 'Submit' is not in 'Send form'.
- 5.
Use browser DevTools Accessibility panel to inspect the accessible name of each element.
- 6.
Pass: The accessible name of every labelled element contains its visible label text.