axe-core rule: button-name

Buttons have no accessible name

Fix reference | BarrierScan

What it is

One or more buttons contain no text that assistive technology can announce, typically icon-only buttons such as a hamburger menu, close button, or search button.

Who it blocks

Screen reader users hear only "button" and cannot tell what it does. Voice-control users cannot say a name to press it. Unnamed buttons frequently gate navigation menus and modal dialogs, blocking the whole site.

How to fix it

Add visible text, or an aria-label, to every button. Hide decorative icons inside the button from assistive technology with aria-hidden="true".

Example fix

<!-- Before -->
<button class="menu-toggle"><span class="icon-burger"></span></button>

<!-- After -->
<button class="menu-toggle" aria-label="Open navigation menu">
  <span class="icon-burger" aria-hidden="true"></span>
</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.