Forms & Input

Button

Available

The most fundamental control. Covers the built-in accessibility the button element provides and the pitfalls of custom implementations.

What Is a Button?

A button is an element that triggers an immediate action when pressed. Submit, like, open a modal, play/pause -- buttons are used whenever you need to execute an in-page action.

The web has a dedicated <button> element built in, andsimply using it automatically provides interactivity, keyboard support, and assistive technology notification.

Why Does Accessibility Matter?

A "clickable <div>" may appear to work for mouse users, but it is broken for the following groups.

People who rely on the keyboard only. A <div> cannot receive focus via Tab, so they cannot even reach it.
People who use a screen reader. Without the "button" role being announced, they cannot tell it is interactive.
Everyone. A <div> has no concept of disabled, so a disabled state cannot be properly communicated. It also does not respond to Space.

With <button>, all of these are solved from the start.

Live Demo (Recommended Implementation)

The two buttons below follow the APG.Without using a mouse, try navigating with Tab and pressing both Enter and Space.

Native button

Try it: Tab to focus, then press Enter or Space to increment the count. The disabled button cannot be focused or activated.

Tip

With a screen reader, focusing the button announces "Like, button," and the disabled one announces "Submitted, dimmed, button" -- the role and state are conveyed automatically. This comes for free from <button> and the disabled attribute alone.

Keyboard Interaction

Key	Action	Priority
`Tab`	Move focus to the next/previous button (disabled buttons are skipped)	Required
`Enter`	Activate the focused button	Required
`Space`	Activate the focused button	Required

Note

With <button>, everything in this table works without writing any code.Links (<a>) activate with Enter only, while buttons activate with both Enter and Space -- this is the correct native behavior.

Required WAI-ARIA Roles and Properties

Target	Attribute / Role	Meaning
Button (recommended)	`<button type="button">`	Role, focus, and keyboard interaction are all automatic. ARIA is generally unnecessary.
Form submission	`type="submit" / type="button"`	To avoid unintended submission, add type="button" to buttons that do not submit.
Disabling	`disabled`	Makes the button inoperable and removes it from focus order. Communicated to assistive technologies.
Only when substituting with div	`role="button" + tabindex="0"`	Makes it recognized as a "button" and focusable. Custom key handling is also required.

Implementation: Recommended Pattern (Good)

Good / Recommended

When in doubt, use <button>. A single click listener covers all input methods.

Markup:

<!-- This alone makes a fully functional "button" -->
<button type="button" id="like-btn">
  Like (<span id="like-count">0</span>)
</button>

Script (a single click handler covers mouse, Enter, and Space):

const btn = document.getElementById('like-btn');
const count = document.getElementById('like-count');

if (btn && count) {
  // A single click listener handles mouse, Enter, and Space
  btn.addEventListener('click', () => {
    count.textContent = String(Number(count.textContent) + 1);
  });
}

Note

If you absolutely must use a <div>, you need at minimumrole="button", tabindex="0", and Enter/Space key handling. What a single <button> gives you for free requires all of this extra code:

<!-- Minimum requirements if you must use a div (not recommended) -->
<div role="button"
     tabindex="0"
     id="like-div">
  Like
</div>

const el = document.getElementById('like-div');

if (el) {
  el.addEventListener('click', activate);
  // With a button element this key handling would be unnecessary
  el.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault(); // Prevent Space from scrolling the page
      activate();
    }
  });
}
function activate() { /* ... */ }

Anti-Pattern (Bad)

Below is a <div> with onclick styled to look like a button.It works with a mouse, but the keyboard cannot reach it and Space does nothing.Compare it with the demo above.

Broken Button Built with div

Like（0）

Try it: Tab cannot reach it, Space does nothing. A screen reader does not announce it as a button, and the disabled state cannot be expressed.

<!-- anti-pattern: a div with onclick pretending to be a button -->
<div class="btn" onclick="like()">Like</div>

Bad / Avoid

Problems with this implementation:

Cannot receive keyboard focus -- a div is not part of the Tab order.
Space / Enter do not work -- no custom key handling is implemented.
Role is not communicated -- a screen reader does not recognize it as a "button."
Cannot be disabled -- there is no disabled concept, so an inactive state cannot be conveyed.

Tip

Elements that look like links but do not navigate, or look like buttons but go to another page, cause confusion.Use <button> for in-page actions and <a href> for navigation -- choose by role, not appearance.

Implementation Checklist

Action elements use <button>
Non-submit buttons have type="button"
Works with mouse, Enter, and Space
Uses the disabled attribute when disabling
Focus is visible (focus ring is not removed)
(div substitution only) role="button", tabindex="0", and key handling are all added

Source (English):Button Pattern — W3C APG(opens in a new tab)