What the issue is
Buttons that are inadequately labeled or utilize generic text such as "click here" or "submit" without providing context of the action being performed can significantly reduce accessibility. Users, especially those relying on screen readers, may not understand the purpose of the button or the action it initiates. This lack of clarity can lead to confusion and impede the ability to navigate and use a website effectively.
The lack of clarity come from how users navigate with screen readers. Users may quickly navigate a page or form using the tab key for example, listenign to each interactive element focus alights upon to better understand the page. When they do this, the only have the context of the text of the button and not the elements that surround it. Similarly, screen readers provide short-uct navigation to allow users to brows lists of similar elements ona. apge, including buttons. That list of biuttons is only as useful as the quaity of the button text.
Why this is important
Providing clear, descriptive labels for buttons is crucial for conveying their purpose to users, facilitating better understanding and interaction with web content. It enhances the user experience for all, particularly for users who rely on assistive technologies and for those who may have cognitive impairments. Descriptive labels help users make informed decisions before taking an action, thus improving navigation and accessibility.
Who it affects
This issue affects:
- Users of screen readers who rely on audible cues to understand the purpose of buttons.
- Users with cognitive disabilities who benefit from clear and explicit instructions on what action will be performed.
- Users not fluent in the language of the web page who may rely on familiar action words to understand functionality.
- Users of voice navigation, who may need to say "click" and the text of the button. Multiple buttons named "submit" slow down this action, and a secondary cchoice of which submit button must be made.
- All users, as descriptive labeling of buttons contributes to a more intuitive web navigation experience.
How to remediate the issue
- Ensure button labels clearly describe the action the button will perform. Use specific verbs that indicate the action, such as "Save," "Download," "Submit," or "Continue" paired with context, like "Download PDF Form."
- For icon buttons (e.g., a search magnifying glass), use `aria-label` or `aria-labelledby` attributes to provide screen readers with descriptive text. Note that this text must be intuitive so that users of voice navigatin can also interact with the icon button.
- Avoid using vague or generic text, such as "Click here" or "Go," which does not provide information about the function of the button.
- Review the content of buttons in the context of their function to ensure clarity and relevance.
Guidance on making controls accessible by providing descriptive labeling can be found at WCAG Quick Reference on Label in Name.