Accessible name does not match visible text
| Field | Value |
|---|---|
| Rule code | Aria_Label_TextContent_MisMatch |
| WCAG conformance level | A |
| WCAG success criterion | 2.5.3 Label in Name |
| Must be fixed at source | No |
Description
HTML Elements that are given an aria-label as an accessible name must match the visually presented text-name. We found that this element has text-content that is a mismatch to its aria-label attribute. Either remove the aria-label and ensure the text-content is accessible to Screen Readers or ensure that the aria-label attribute value starts with or equates the same value as the element's text content.
How to fix
When possible, it is recommended to use the visible text as the accessible label. Do not add an aria-label to the element as a matter of practice, only add one when it is needed.
<button>Save Settings</button>
If a separate accessible label is needed, make sure the label matches the visible text. The labels must start with the same words so that assistive tools can match them up.
<button aria-label="Save Settings">Save</button>