Button

A native button element that triggers an action and communicates its purpose through a visible label, supporting keyboard operability and correct semantics out of the box.

Demo

Tab to each button and press Enter or Space to activate it. Observe how the button responds to keyboard input, how its label is announced by a screen reader, and how disabled buttons are communicated without removing them from the tab order.

What to Observe

Each button is reachable by Tab and activatable with Enter or Space
The button's label is announced by screen readers as soon as it receives focus
Primary and secondary visual variants do not change the button's semantic role or keyboard behavior
Icon-only buttons carry an accessible name that conveys the action without relying on the icon itself
Disabled buttons are communicated to assistive technology without hiding them from the focus order

Anatomy

[Anatomy image placeholder — will be added when assets are available]

Button Element — the native HTML element that provides keyboard operability, focus management, and the implicit button role without any additional attributes
Label Text — the visible text inside the button that describes the action it performs; this becomes the button's accessible name
Icon — an optional visual symbol that supplements or replaces the text label; decorative icons are hidden from assistive technology, while meaningful icons require a text alternative
Focus Indicator — the visible outline or ring that appears when the button receives keyboard focus, communicating the user's current position

Accessibility Behavior

Use a native button element for all actions to inherit correct keyboard behavior and semantics without extra ARIA
Ensure every button has a clear, descriptive accessible name — either from visible label text or an accessible name technique for icon-only buttons
Support both Enter and Space key activation, which is the expected behavior for button elements
Maintain a visible focus indicator on all buttons so keyboard users can see which button currently has focus
When disabling a button, communicate the disabled state to assistive technology; consider whether a disabled button should remain focusable with an explanation of why it is unavailable
Do not use links styled as buttons for actions that do not navigate — use an actual button element so the semantics match the behavior

Common Mistakes

Using a div or span as a button, losing keyboard operability, focus management, and the implicit role that screen readers rely on
Using an anchor element for actions that do not navigate to a new page or location, creating a mismatch between the element's semantics and its behavior
Providing no accessible name on an icon-only button, causing screen readers to announce only "button" with no indication of the action
Removing the focus indicator with CSS, making it impossible for keyboard users to see which button is currently focused
Disabling a button by removing it from the tab order without any explanation of why the action is unavailable

Why This Matters

Buttons are the most fundamental interactive element on the web, yet they are frequently replaced with styled divs or anchors that lack the native behavior keyboard and assistive technology users depend on. A div styled as a button does not respond to Enter or Space, is not reached by Tab, and is announced incorrectly by screen readers. Even when using a native button, missing labels, removed focus indicators, and ambiguous icon buttons create barriers that prevent users from understanding or completing actions. Using the correct element with a clear label is the simplest and most impactful accessibility decision in UI development.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.