Semantic Button Name
Serious - WCAG Level AA
The issue of semantic button naming arises when buttons on a webpage lack clear, meaningful text or labels that describe their function. This can be problematic for users who rely on assistive technologies like screen readers, as well as for those who navigate using keyboards. When a button is not labeled properly, these users may not understand what action the button will perform, leading to confusion and a poor user experience.
To fix this issue:
Each button should have a descriptive label that clearly communicates its purpose.
This can be achieved by ensuring that the text content of the button is meaningful.
If the button uses an icon or image, an accessible name should be provided using the
aria-labelattribute or by including visually hidden text within the button.For example, a button with just an icon of a magnifying glass should have an
aria-label="Search"to convey its purpose. Alternatively, you can use a visually hidden text span within the button to provide the label.
Best practices:
Use clear, concise text for button labels that describe the action performed.
Avoid using generic text like "Click Here" or "Submit" without context.
Ensure that icon-only buttons have an accessible name using
aria-labeloraria-labelledby.
Common mistakes:
Neglecting to update button labels when the button's function changes.
Assuming that visual context alone is sufficient for understanding.
Always ensure that the button's label is programmatically accessible.