Skip to main content

Buttons

The button role is used for clickable elements that trigger a response when activated by the user (via mouse, keyboard, or assistive technology). To makes a button accessible it must be focusable and respond to click, Enter, and Space (native buttons do this by default).

Examples​

Button​

✅ Correct

<button>Play</button>

Submit button​

✅ Correct

<button type="submit">Submit</button>

❌ Incorrect

<!-- prefer native elements -->
<div id="saveChanges" tabindex="0" role="button" aria-pressed="false">Save</div>

Toggle button​

✅ Correct

<!--- Use `aria-pressed` to indicate the current state.-->
 <button aria-pressed="false">
   Mute Audio
 </button>

Button that opens a popup​

✅ Correct

<!-- A popup is an element that appears **outside the normal page flow**, like a dropdown, dialog, or floating panel. -->
<button aria-haspopup="dialog" aria-expanded="false" aria-controls="settingsDialog">
  Settings
</button>

<div role="dialog" id="settingsDialog">
  <h2>Settings</h2>
  <button>Close</button>
</div>

Button that opens inline content​

✅ Correct

<button aria-expanded="false" aria-controls="section1">
  More details
</button>

<div id="section1">
  <p>This is additional content revealed by the accordion.</p>
</div>

👍 Do's​

  • Prefer using <button> over type="button"
  • Use type="button" for <button> in a form if it’s not a submit button
  • For toggles - add aria-pressed
  • For popups - add aria-haspopup with the correct value
  • For accordions/disclosures - use aria-expanded + aria-controls