Elements must have their visible text as part of their accessible name
What is the problem?
The "label-content-name-mismatch" rule ensures that the accessible name of an element, such as the aria-label, contains the text from the visible label. The text a user sees should also be the text that screen readers and speech input devices recognize.
Impacted Groups
Why is this important?
When the visible label and accessible name don't match, it can be confusing for users who rely on screen readers or speech input devices. For example, if a button says "Submit" visually, but its accessible name is "Send Form," users may not know which command to use. This can hinder their ability to navigate and interact with the website.
How to solve this issue
To fix this issue, ensure that the visible label and accessible name of elements are consistent. Use appropriate HTML elements and ARIA attributes to establish clear relationships between labels and their associated elements. For example, use the <label> element to associate a label with an input field, or use the aria-label attribute to provide an accessible name for an element, ensuring that the text appears in the same order as the visible label.
Rule Information
Rule ID
label-content-name-mismatch
Severity
Manual Review Required
Rule Group
Experimental Rules
Guidelines
- WCAG 2.1 Experimental
- EN 301 549
Customise Guidance
You can customise each accessibility rule in SiteAlly with your own guidance, instructions and even links to your own organisation specific documentation.
Enable your website editors to resolve issues quickly with SiteAlly.
Ready to make your website accessible?
SiteAlly provides automated accessibility monitoring, detailed reports, and step-by-step guidance to help you achieve and maintain compliance.