Semantic Aria Command Name
Serious - WCAG Level AA
The issue at hand is the use of ARIA roles such as button, link, or menuitem without providing a meaningful name. This can occur when developers use generic HTML elements (like <div> or <span>) and assign ARIA roles to them without ensuring that these elements have accessible names. An accessible name is crucial because it is what screen readers announce to users, allowing them to understand the purpose of the element and interact with it effectively.
This issue matters because users who rely on assistive technologies, such as screen readers, need clear and descriptive labels to navigate web content efficiently. Without meaningful names, these users may find it challenging to understand the functionality of interactive elements, leading to a poor user experience and potential exclusion from accessing important content or functionality.
To fix this issue:
Developers should ensure that any element with an ARIA role of
button,link, ormenuitemhas a meaningful name.This can be achieved by using the
aria-labelattribute or by ensuring the element has visible text content.
If the element has visible text, assistive technologies will typically use this as the accessible name.
If not, use
aria-labeloraria-labelledbyto provide a descriptive name.
Best practices:
Use native HTML elements like
<button>or<a>whenever possible, as these elements inherently provide accessible names and roles.If custom elements must be used, ensure that they are fully accessible by providing meaningful names and ensuring they are keyboard navigable.
Common mistakes:
Using
aria-labelwith non-descriptive text or failing to update the label when the element's function changes.Avoid using ARIA roles unnecessarily on elements that already have semantic meaning, as this can lead to confusion and redundancy.