Accessible name should match visual label

Description

This rule checks for mismatches between the accessible name and the visible label of elements. The accessible name is what screen readers announce to users, while the visible label is what sighted users see on the screen. Ensuring that these two match is critical for providing a consistent user experience for both sighted and non-sighted users.

Disabilities impacted

  • Visual impairments: users with visual impairments rely on screen readers to navigate web content. A mismatch between the accessible name and the visible label can cause confusion and misinterpretation of the content.
  • Cognitive disabilities: users with cognitive disabilities may rely on consistent and predictable labeling to understand and interact with web elements.
  • Motor impairments: users who navigate using voice commands or other assistive technologies may encounter difficulties if the accessible name does not match the visible label, leading to errors or inefficiencies in interaction.

Why it matters

Consistency between the accessible name and the visible label ensures that all users, regardless of their abilities, receive the same information and can interact with web elements effectively. This alignment is crucial for creating an inclusive and accessible web experience, reducing confusion, and improving usability for everyone.

Coding problems and solutions

Common coding problems

  • Different text in accessible name and visible label: the text used in the accessible name differs from the text in the visible label.
  • Invisible elements included in accessible name: the accessible name includes text from elements that are not visible to sighted users.
  • Use of ARIA attributes without matching visible labels: ARIA attributes are used to define accessible names that do not match the visible labels.

How to Fix It

Ensure text consistency

Make sure the text used for the accessible name matches the text in the visible label.

Correct example
<label for="email">Email Address</label>
<input type="email" id="email" aria-label="Email Address">
Incorrect example
<label for="email">Email Address</label>
<input type="email" id="email" aria-label="Your Email">

Exclude invisible elements

Ensure that the accessible name only includes text from elements that are visible to sighted users.

Correct example
<button aria-label="Submit">Submit</button>
Incorrect example
<button aria-label="Submit">
    <span class="sr-only">Submit</span> <!-- This text is visually hidden -->
</button>

Match ARIA labels with visible labels

When using ARIA attributes to define accessible names, ensure they match the visible labels.

Correct example
<button aria-label="Search">Search</button>
Incorrect example
<button aria-label="Go">Search</button>

Known Limitations

  • Dynamic content: for dynamically changing content, ensure that both the accessible name and the visible label are updated simultaneously to maintain consistency.
  • Complex elements: for complex interactive elements, ensure that all parts of the element are considered when setting the accessible name and visible label.
  • Browser and screen reader compatibility: different browsers and screen readers may interpret accessible names differently. Testing across multiple platforms is recommended.

Resources