How to Fix Buttons With No Accessible Name WCAG

Why this matters

Screen reader users hear 'button' with no context about what it does. This affects navigation menus, close buttons, social media buttons, and any icon-based UI. It is a Level A failure — the most serious category.

Code examples

<button><i class="fas fa-times"></i></button>
<button class="menu-toggle"></button>
<button><img src="search.png"></button>

<button aria-label="Close dialog">
  <i class="fas fa-times" aria-hidden="true"></i>
</button>
<button class="menu-toggle" aria-label="Open navigation menu" aria-expanded="false">
</button>
<button>
  <img src="search.png" alt="Search">
</button>

How to fix it — step by step

1. 1
   Add aria-label='description' to any button that has no visible text
2. 2
   Add aria-hidden='true' to decorative icons inside buttons
3. 3
   For toggle buttons (menus, accordions), add aria-expanded='true' or 'false'
4. 4
   Never use a <div> or <span> as a button — use real <button> elements
5. 5
   Real <button> elements are keyboard focusable by default — divs are not
6. 6
   For buttons with both icon and text, the text alone is sufficient — no aria-label needed

Test it for free

Use WebPossum to automatically detect this violation and every other WCAG 2.2 issue on your site. Free, instant, no signup required.