Rule ID: ace-form-label-content-match

Ensure visible labels match the element accessible name for voice control users

WCAG 2.1 (A) 2.5.3: Label in Name Mobility Cognitive Low Vision Legal Risk

What This Rule Checks

Voice control users activate elements by speaking their visible label. When the accessible name (set via aria-label or aria-labelledby) does not include the visible text, voice commands will not work, effectively making the control unusable for these users.

Who Is Affected

This issue primarily affects: Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices; Cognitive users, who benefit from clear structure, simple language, and consistent navigation patterns; Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes.

Why This Matters

Voice control users (e.g., Dragon NaturallySpeaking) activate controls by speaking their visible label. When aria-label overrides the visible text with something different, the spoken command does not match and the control cannot be activated. This is a WCAG 2.5.3 Level A violation.

How to Fix

Ensure the accessible name contains the visible text of the element. If using aria-label, include the visible text within it. Prefer using visible text as the primary accessible name rather than overriding with aria-label.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Visible text does not match accessible name -->
<button aria-label="Submit order form">
  Place Order
</button>

<!-- Voice control user says "Click Place Order" but it does not work -->

Copy

Correct Markup Solutions:

Code example

<!-- Accessible name includes visible text -->
<button>
  Place Order
</button>

<!-- If additional context needed, include visible text in aria-label -->
<button aria-label="Place Order - proceeds to checkout">
  Place Order
</button>

Copy

Common Mistakes to Avoid

Overriding visible text with a completely different aria-label.
Using aria-label to add context without including the original visible text.
Not considering voice control users who speak the visible label to activate controls.

AI Auto-Fix Available

This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.

Tip: Form accessibility is one of the most common sources of accessibility complaints. Every form control must have a programmatically associated label that is visible and descriptive. Test every form with keyboard-only navigation.

Related WCAG Criteria

2.5.3: Label in Name