The <button> Element
As defined in the HTML Living Standard, the <button> element represents a button labeled by its contents. It is a fundamental interactive element used to trigger actions or submit forms.
<button type="button">Standard Button</button>
<button type="submit">Submit Form</button>
View HTML Living Standard: The button element
Native Accessibility: The Rule of Three
Using the native <button> element provides three critical accessibility features for free:
- Keyboard Access: Native buttons are automatically in the tab order and can be triggered with the Enter and Space keys.
- Roles & States: Screen readers automatically identify the element as a button and report states like
disabledorpressed. - Focus Management: Browsers handle the visual focus state and focus-ring behavior natively.
WCAG Requirement: Keyboard
Success Criterion 2.1.1 (Level A): All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.
A native <button> satisfies this criterion immediately. If you use a <div> or <span> as a button, you must manually add tabindex="0" and complex JavaScript keyboard listeners.
Button Types & Use Cases
The type attribute is essential. If omitted, the default is submit when inside a form.
type="button": Use for general actions that do not submit data (e.g., opening a modal, toggling a menu).type="submit": Use within a<form>to send data to a server.type="reset": Clears all fields in a form. Use sparingly, as this can be a disruptive user experience.
WCAG Requirement: Name, Role, Value
Success Criterion 4.1.2 (Level A): For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically determined.
For icon-only buttons, you must provide an accessible name using aria-label or aria-labelledby to satisfy this criterion.
<button type="button" aria-label="Close">×</button>
Understand SC 4.1.2: Name, Role, Value
Visual States
Buttons must have distinct visual states for hover, active, and focus. The focus state is especially critical for users who navigate with a keyboard.
WCAG Requirement: Contrast
Success Criterion 1.4.3 (Level AA): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.
Ensure your button's text contrast is high, and that the focus indicator (often the focus ring) also meets contrast requirements against the background.
Understand SC 1.4.3: Contrast