* - Buttons - Misalignment of Visible Label and Accessible Name

What the issue is

When the visible label text of a button does not match its accessible name (the name exposed to assistive technologies), it can lead to confusion and inconsistency for users relying on screen readers or other assistive technologies. An example of this issue is when a button labeled "Submit Form" on the screen has an accessible name of "Go" due to a mismatch in the `aria-label` attribute. This inconsistency between the visible label and the accessible name can cause users to be unsure of the button's function, leading to a decrease in the usability and accessibility of web content.

That differnce in naming also prevents vice navigation for working as voice navigation relies on the vuser saying :click: and the name of the button. It is the accessible name that will be used and not the visible name that the user will speak.

Why this is important

The alignment between a button’s visible label and its accessible name is fundamental for ensuring a consistent and predictable interaction for users of assistive technologies. This consistency helps users understand and trust the functionality of controls within the interface, which is crucial for efficient navigation and interaction. When the accessible name and visible label differ significantly, it can disrupt the user's ability to navigate and use the website effectively.

Who it affects

This issue affects:

  1. Users of screen readers and other assistive technologies who rely on spoken feedback to understand the purpose of buttons.
  2. Users with cognitive disabilities who may find inconsistencies between visual content and accessible names confusing.
  3. Users who utilize voice recognition software to interact with web content by speaking the visible text of buttons and controls.

How to remediate the issue

  1. Ensure that the accessible name (e.g., provided by `aria-label`, `aria-labelledby`, or the text content of the button) matches or closely corresponds with the button's visible label.
  2. When using `aria-label` to specify an accessible name, verify that it accurately reflects the action or purpose of the button as presented visually.
  3. Avoid arbitrary changes to accessible names that do not reflect the visible label or the intended action of the button.
  4. Regularly test your web content with screen readers and other assistive technologies to ensure that the accessible name and visible label are consistently perceived and understood.

Guidance on ensuring the visible label and accessible name are aligned can be found at WCAG Quick Reference on Label in Name.

Ticket category