meaningful-accessibility-label-buttons
Mobile validation
When a button's accessible name does not describe its purpose, or lacks context, people who use assistive technologies such as screen readers, braille displays, or voice input may hesitate to use it, or may not understand what it does. This is common with icon-only buttons, whose name is set in code rather than shown on screen. Give each button an accessible name that clearly describes the result of activating it. Avoid single letters, special characters, and vague words that only make sense visually or in context, such as “X”, “Tap”, “Click”, or “Go”.
Note: Buttons that perform different actions should also have different names. See the related duplicate-name validation.
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Turn on VoiceOver on iOS, or TalkBack on Android.
- Swipe right or left to move to each button.
- Listen to the button's name, without looking at the screen.
Expected results: From the name alone, you can tell what the button will do when activated, without needing visual context such as its position or the group it belongs to.
Actual results: The name is vague or meaningless, such as “X, button” or “Go, button”, so you cannot tell what the button does.
Using voice input
New to voice input testing, or need a refresher?
Review this article first: Practical guides for using voice input
- Turn on Voice Control on iOS, or Voice Access on Android.
- Say “Show names” on iOS, or “Show labels” on Android.
- Check the names shown for icon-only buttons.
Expected results: Each button shows a meaningful name that you can say to activate it, such as “Close”.
Actual results: Buttons show names that are vague or hard to say, such as single letters or symbols.
FAQ
How does this issue relate to 1.1.1 Non-text Content
SC 1.1.1 requires a text alternative for non-text content that serves the same purpose as the visual. Many mobile buttons are icons with no visible text. For these, the accessible name is the text alternative. If the name is missing or unclear, people who use assistive technology do not receive the equivalent information and may be unsure how to use the control.
Give every button a clear accessible name that states the result of activation and reflects its context and purpose. Use different names for different actions. This provides the required text alternative for icon-only buttons and meets 1.1.1 for this control type.
How does this issue relate to 1.3.1 Info and Relationships
SC 1.3.1 requires that information and relationships shown visually are also available programmatically. A clear accessible name gives a button’s purpose to assistive technology, matching what sighted users get from the icon, text, or placement.
If a button has a vague, missing, or context-only name, the programmatic relationship between the control and its outcome is lost. Icon-only buttons are especially at risk, so provide an action-focused accessible name that reflects the result of activating the control.
Buttons that perform different actions must have different accessible names to preserve distinctions among controls. Avoid single letters, symbols, or vague terms such as “Go” that do not express purpose.
Why is this issue marked as Critical?
When a button's name does not describe its purpose, screen reader users cannot tell what it will do, and voice input users may not know what to say to activate it. They may avoid the button or activate the wrong one, and this can keep them from completing core tasks, so it is rated critical.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.1.1 Non-text Content (A) | All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for controls/input, time-based media, tests, sensory experiences, CAPTCHA, and decoration/formatting/invisible content. |
| WCAG 2.2 | 1.3.1 Info and Relationships (A) | Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. |
| EN 301 549 | 11.1.1.1 Non-text Content | Same as the WCAG text. |
| EN 301 549 | 11.1.3.1 Info and Relationships | Same as the WCAG text. |