| Title | Button Accessible Name Check |
|---|---|
| id | button_01 |
| type | true |
| elem | button |
| test | buttonAname |
| score | 10 |
| level | A |
| trust | 1 |
| ref | 97a4e1 |
| scs | 4.1.2 |
| dis | 43353 |
| result | passed |
The "Button Accessible Name Check" evaluates whether all <button> elements in the interface have an accessible name — a label or text that screen readers and other assistive technologies can recognize and announce.
I noticed that all <button> elements have accessible name.
- Visual Impairments: A button with no label might be announced as simply "button", "unlabeled button" or not announced at all. This makes it impossible to know what the button does (e.g., "Submit", "Close", "Next Page"), making navigation frustrating or impossible.
- Motor Impairments: Voice commands depend on element names like “Click Submit” or “Press Save.” Buttons without names can’t be targeted or activated by voice.
- Cogntive Impairments: If there's no visible label or the button is represented by an icon without accessible text, the function might be unclear. This increases confusion and reduces trust in the interface.
To address missing button accessible names:
- Locate the button missing an accessible name.
- Add visible text inside the button (e.g.,
<button>Submit</button>). - Use
aria-labelfor icon-only buttons. - Use
aria-labelledbyto point to a visible label elsewhere.