Label Content Name Mismatch
Critical - WCAG Level A
The label-content-name-mismatch rule identifies instances where the visible text of a labeled element does not match its accessible name. This can occur when elements such as buttons or links have text that is not reflected in their accessible name, which is crucial for assistive technologies like voice navigation on the page. For users with disabilities, particularly those relying on voice navigation technology, being able to specify the visible text and have it match to the accessible label is important for successful navigation of the page.
How to fix it:
Identify the Element: Locate the element that has a mismatch between its visible text and accessible name.
Ensure Consistency: Make sure that the visible text is included in the element's accessible name. This can be done by using the
aria-label,aria-labelledby, or ensuring the text is directly within the element.
Best practices:
Always use visible text that clearly describes the action or purpose of the element.
Use
aria-labelonly when necessary; it's better to rely on visible text whenever possible.For icons, consider providing a descriptive text alternative using
aria-labeloraria-labelledby.
Common mistakes:
Using icons without text and relying solely on
aria-labelwithout providing context.Overusing
aria-labelwhen the visible text already conveys the necessary information, leading to redundancy.Neglecting to update accessible names when the visible text changes, which can lead to mismatches.