Overview

Buttons are one of the most common interactive elements on the web. When implemented correctly, screen readers announce them as “button” with their label, and users can activate them with Enter or Space. When implemented with a <div>, none of this works.

WCAG Criteria:

• 2.1.1 Keyboard  — all functionality must be operable via keyboard
• 4.1.2 Name, Role, Value  — interactive elements must expose their role and name

Key requirements:

• Use the <button> element (not <div> or <span>)
• Ensure keyboard focusability and activation (Enter/Space)
• Provide a visible focus indicator
• For toggle buttons, use aria-pressed to convey state
• For icon-only buttons, use aria-label to provide an accessible name

Basic Button

<div class="btn" onclick="handleClick()">Submit</div>

<button type="button" class="btn">Submit</button>

What’s wrong with the div?

• No button role announced by screen readers — it’s just text
• Not focusable with Tab key
• Cannot be activated with Enter or Space
• No focus indicator visible
• onclick only works with mouse

What the screen reader announces:

Toggle Button

<!-- Label changes on toggle — confusing for SR users -->
<button onclick="this.textContent = this.textContent === 'Mute' ? 'Unmute' : 'Mute'">
  Mute
</button>

<!-- Stable label + aria-pressed conveys state -->
<button aria-pressed="false"
        onclick="let p = this.getAttribute('aria-pressed') === 'true'; this.setAttribute('aria-pressed', String(!p))">
  Mute
</button>

What’s wrong with changing the label?

• Screen reader users hear “Mute, button” then “Unmute, button” — the label change implies it’s a different button
• With aria-pressed, the label stays “Mute” and the state changes: “Mute, toggle button, not pressed” → “Mute, toggle button, pressed”

Icon Button

<!-- No accessible name — SR says just "button" -->
<button>
  <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
    <path d="M4 4L16 16M16 4L4 16" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>

<!-- aria-label provides the accessible name -->
<button aria-label="Close dialog">
  <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
    <path d="M4 4L16 16M16 4L4 16" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>

What the screen reader announces:

Resources

• WAI-ARIA Authoring Practices — Button Pattern 
• MDN — <button> element
• WCAG 2.1.1 — Keyboard 
• WCAG 4.1.2 — Name, Role, Value