Icon-Only Button

<button class="icon-button-bad">
  <svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>
</button>

<button aria-label="Close dialog" class="accessible-icon-button">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="24" height="24">
    <path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
  </svg>
</button>

button(aria-label="Close dialog" class="accessible-icon-button")
  svg(aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="24" height="24")
    path(fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z")

<button aria-label="Close dialog">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

<button aria-label="Close dialog">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

<button 
  aria-label="Close dialog"
  class="p-2 bg-indigo-50 text-indigo-600 rounded-full hover:bg-indigo-100 transition-colors focus:ring-2 focus:ring-indigo-600 focus:outline-none"
>
  <svg aria-hidden="true" focusable="false" class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
    <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
  </svg>
</button>

The Standard

An icon-only button (like a close “X” or a hamburger menu icon) has no visible text. This means screen readers have nothing to announce—unless you provide an accessible name.

WCAG Criteria

• 1.1.1 Non-text Content (Level A): All non-text content must have a text alternative.
• 4.1.2 Name, Role, Value (Level A): The button’s name must be programmatically determinable.

❌ The Bad (Inaccessible)

What’s Wrong?

1. No Accessible Name: The button has no text, so the screen reader can only say “button.”
2. User Confusion: Users cannot distinguish this button from any other unnamed button.

✅ The Good (Accessibility-Ready Code)

Why This Works

1. Clear Name: Screen readers announce: “Close dialog, button.”
2. Icon Hidden: aria-hidden="true" on the SVG prevents double-announcements.
3. Focus Safe: focusable="false" on the SVG prevents a broken focus trap in old IE/Edge.

<button aria-label="Send message">
  <svg aria-hidden="true">...</svg>
</button>

Technical Deep Dive

The Accessibility Tree

Role: button
Name: "Close dialog"
State: focusable