Visible label must be included in the accessible name
Content available in English only.
Accessibility isn't just about avoiding violations — it's about ensuring that everyone can use your product with confidence. This guide explains each rule's intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
If the user reads it, they must be able to speak it — visible text must be in the accessible name.
Overview
Why this matters
Speech recognition, voice control, and screen reader users expect that the words they see on the screen match what they must speak or navigate to. If the visible label does not match the accessible name, users may be unable to activate controls by voice, causing broken workflows and frustration.
How to fix this issue
Ensure the visible text appears in the accessible name in the same word order, ideally at the beginning. If additional clarification is needed, append it using `aria-describedby` instead of replacing visible wording with a different `aria-label`.
Developer Guidance
This issue commonly appears when teams override `aria-label` with alternative phrasing. Keep visible label text and accessible name aligned for speech commands. A safe pattern is: visible label words first, optional context second (for example, 'Add to cart - Product A').
Code Examples
Incorrect Implementation
<button aria-label="Submit form">Send</button>
<!-- Visible label = 'Send'; Accessible name = 'Submit form' → mismatch -->Correct Implementation
<button aria-label="Send">Send</button>
<!-- Visible label and accessible name match → works for screen readers and voice control -->Real-World Implementation
Before
<button aria-label="Add item to shopping cart">Add</button>
<!-- Voice command 'Click Add' fails → accessible name does not contain visible label -->After
<button aria-label="Add to cart">Add</button>
<!-- Visible label 'Add' is included → user can say 'Click Add' reliably -->CSS Example (Guidance)
/* If you need to visually adjust label text, style — do not replace it with aria-label */
button span.label { font-weight: 600; }Manual Testing
- 1. Identify controls with visible labels (buttons, links, form fields).
- 2. In DevTools Accessibility pane, compare visible label text with computed accessible name.
- 3. Confirm visible words are present in the accessible name in the same order.
- 4. Test at least one control with voice command (for example, 'Click Add') and verify activation succeeds.
- 5. Move extra context to descriptions (`aria-describedby`) if it causes name mismatch.
Related Operable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance