The “Missing Button Accessible Name Check” evaluates whether there is any <button> elements without an accessible name.
Example outcome
I found 1 <button> element without accessible name.
Impact
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.
Fixes
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-label for icon-only buttons.
Use aria-labelledby to point to a visible label elsewhere.