axe-core rule: aria-command-name

Custom buttons, links, or menu items are missing accessible names

Fix reference | BarrierScan

What it is

An element with role="button", role="link", or role="menuitem" has no accessible name, so assistive technology announces the role but not the purpose.

Who it blocks

Screen reader and voice-control users cannot identify or activate the control.

How to fix it

Add inner text, an aria-label, or aria-labelledby to the element carrying the role. Better: use a native button or a element, which handle most of this automatically.

Example fix

<!-- Before -->
<div role="button" class="close-x" onclick="closeModal()"></div>

<!-- After (better: use a real button) -->
<button type="button" class="close-x" aria-label="Close dialog" onclick="closeModal()"></button>

This is one of the barrier types BarrierScan checks for on every scan. Request a free accessibility scan to see whether it appears on your site, alongside the rest of the automated findings.