In plain English
Voice-control users operate your site by speaking the labels they see: “click Add
to cart”, “tap Search”. That only works if the control’s coded name actually
contains those visible words. The trap is a well-meaning aria-label that replaces
the visible text with something different, the button says “Search” but its
accessible name is “Submit”, so saying “click Search” does nothing.
The rule: the accessible name must include the visible label text.
Who this is for
- Voice-control users, who say the visible label to activate a control.
- Screen-reader users, who are confused when the announced name does not match what they see.
How to check and fix it yourself
For each labelled control, check that any aria-label contains the visible text
(and ideally starts with it). The safest option is often no aria-label at all,
letting the visible text be the name:
<!-- Good: visible text is the name -->
<button>Add to cart</button>
<!-- Bad: aria-label doesn't contain the visible label -->
<button aria-label="Purchase item">Add to cart</button>Where we can help
Mismatched labels usually come from aria-labels added with good intentions. We compare the visible label and accessible name on your controls and flag any that break voice control. It sits on the common failures list.