Voice control users activate elements by speaking their visible label. If a button's aria-label reads 'Send form data' but the visible text reads 'Submit', a voice control user saying 'Submit' cannot activate it. WCAG 2.2 SC 2.5.3 (Label in Name) is a Level A requirement: the accessible name must contain the visible text label as a substring. This is a common bug introduced when developers override visible labels with different aria-label values for screen readers.
Low because the mismatch only breaks voice control activation — screen readers still announce the accessible name — but it fully blocks users of voice control software like Dragon NaturallySpeaking, violating WCAG 2.2 SC 2.5.3 at Level A.
Ensure aria-label always contains the visible button text verbatim, or eliminate aria-label in favor of augmenting the visible text with a screen-reader-only span.
// Bad — aria-label does not contain visible text 'Delete'
<button aria-label="Remove this item permanently">
<TrashIcon /> Delete
</button>
// Good — aria-label starts with visible text
<button aria-label="Delete account (permanent)">
<TrashIcon /> Delete
</button>
// Better — no aria-label needed; sr-only adds context without replacing label
<button>
<TrashIcon aria-hidden="true" />
Delete
<span className="sr-only"> your account permanently</span>
</button>
Search the codebase for buttons and links that have both visible text children and an aria-label. In every case, confirm the aria-label begins with the exact visible text string.
ID: accessibility-wcag.understandable.accessible-name
Severity: low
What to look for: Enumerate every relevant item. Check that all UI components have an accessible name that includes or matches the visible label text. This ensures that voice control users can activate components by speaking the visible label.
Pass criteria: At least 1 of the following conditions is met. Component accessible names include visible label text. Voice control users can activate components by saying the label.
Fail criteria: Accessible names do not match visible labels, or hidden aria-label text differs significantly from visible text.
Skip (N/A) when: Never — accessible names apply to all interactive components.
Detail on fail: Example: "Button labeled 'Submit' has aria-label='Send form'. Voice control user saying 'Submit' cannot activate the button"
Remediation: Ensure accessible names match visible labels:
// Good: visible text serves as accessible name
<button>Delete Account</button>
// If aria-label is needed, match the visible text
<button aria-label="Delete Account">
<TrashIcon />
</button>