R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

Accessible Name and Visible Label Mismatch

  • Home
  • Blog
  • Accessible Name and Visible Label Mismatch
  • June 1, 2025

Accessible Name and Visible Label Mismatch

Rule ID: label-content-name-mismatch
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 Experimental, EN 301 549

How to Fix the Problem

To fix this issue, ensure that the accessible name (e.g., via aria-label or aria-labelledby) contains the complete visible text label of the interactive element, ideally in the same order it appears visually. Although a perfect one-to-one match is not required, placing the visible label at the beginning of the accessible name is considered best practice for both consistency and usability.

✅ Examples That Pass

html
<!-- Exact text match ignoring trailing spaces -->
<div role="link" aria-label="next page ">next page</div><!– Case-insensitive match –>
<div role=“link” aria-label=“Next Page”>next page</div>

<!– Visible label fully contained in accessible name –>
<button aria-label=“Next Page in the list”>Next Page</button>

❌ Examples That Fail

html
<!-- Accessible name does not match visible label -->
<div role="link" aria-label="OK">Next</div><!– Only part of the visible label included in accessible name –>
<button aria-label=“the full”>The full label</button>

Best Practices:

  • Keep the visible label and programmatic name synchronized.

  • Always include the visible text in aria-label or aria-labelledby.

  • Avoid abbreviating or omitting visible label content in the accessible name.

  • Pay attention to capitalization and whitespace only when they affect screen reader behavior, though they are typically ignored.

Why it Matters

This rule is crucial for users who rely on assistive technologies such as speech recognition tools. These users often speak visible labels like “Submit” or “Next Page” to activate a button or link. If the programmatic name differs from what is displayed, the command may not register, causing confusion and interaction failure.

It also benefits screen reader users by ensuring consistency between what is visible on the screen and what is announced. Proper synchronization increases usability, clarity, and efficiency for all users with disabilities.

When the accessible name includes the visible label text:

  • Speech input becomes intuitive and reliable.

  • Users can trust that what they see will work when voiced.

  • Accessibility compliance is enhanced.

Rule Description

All interactive components (such as buttons, links, checkboxes, etc.) that are labeled with visible text must have that same text included in their accessible name. This ensures that users relying on assistive tech receive the same label information as visual users.

The Algorithm (in Simple Terms)

  1. Find any UI element (with an interactive role) that has visible text.

  2. Check its accessible name via aria-label or aria-labelledby.

  3. Confirm that the visible text is included in the accessible name.

  4. Ignore case and whitespace differences, but not actual content mismatches.

Tags:
Share:

Leave A Comment