Accessible Buttons

This lesson explains Accessible Buttons in web accessibility with clear examples, practical use cases, and implementation best practices.

Accessible Buttons Overview

Buttons are one of the most frequently used interactive elements on the web. Accessible buttons allow all users, including keyboard users, screen reader users, and people with motor or cognitive disabilities, to perform actions such as submitting forms, opening dialogs, expanding menus, and navigating applications.

Native HTML button elements provide built-in accessibility, keyboard support, and assistive technology compatibility. Developers should use semantic buttons instead of clickable div or span elements whenever possible.

Feature	Benefit
Native Button Element	Provides built-in accessibility.
Keyboard Support	Works with Tab, Enter, and Space keys.
Screen Reader Support	Announces button role automatically.
Visible Focus	Shows which button is currently active.
Touch Accessibility	Creates larger clickable targets.
WCAG Compliance	Supports accessible interaction.

Accessible Button Example

<button type="button">
  Save Changes
</button>

<button
  type="button"
  aria-expanded="false">
  Show Menu
</button>

Native HTML buttons provide keyboard accessibility automatically. When a button controls expandable content, attributes such as aria-expanded communicate its current state to assistive technologies.

Common Types of Accessible Buttons

Different buttons perform different actions. Choosing the correct HTML element and accessibility attributes helps users understand each button's purpose and behavior.

Button Type	Purpose	Example
Submit Button	Submits a form.	Sign In
Reset Button	Clears form values.	Reset Form
Action Button	Performs an action.	Save Changes
Toggle Button	Changes between two states.	Mute Audio
Menu Button	Opens a navigation menu.	Open Menu
Icon Button	Uses an icon with an accessible label.	Search

Accessible Button Best Practices

Best Practice	Description
Use Native Buttons	Prefer the HTML button element over custom clickable elements.
Write Descriptive Text	Use labels that clearly describe the action.
Support Keyboard Navigation	Ensure buttons work with Tab, Enter, and Space.
Provide Visible Focus	Never remove the keyboard focus indicator.
Use ARIA Only When Needed	Add attributes such as aria-expanded for dynamic controls.
Create Large Click Targets	Make buttons easy to activate on touch devices.

Common Button Accessibility Mistakes

Using clickable div or span elements instead of button elements.
Removing keyboard focus indicators with CSS.
Using vague button text such as "Click Here".
Creating icon-only buttons without accessible labels.
Using links to perform button actions.
Making buttons too small for touch devices.
Failing to update ARIA states such as aria-expanded.
Not testing buttons using keyboard navigation and screen readers.

Key Takeaways

Use the native HTML button element whenever possible.
Provide clear, action-oriented button labels.
Support keyboard interaction with Tab, Enter, and Space.
Keep focus indicators visible for keyboard users.
Use ARIA attributes only when buttons control dynamic content.
Accessible buttons improve usability, accessibility, and WCAG compliance.

Pro Tip

If an element performs an action, use a button. If it navigates to another page, use an a element. Choosing the correct semantic HTML element automatically provides better accessibility, keyboard support, and screen reader compatibility with less code.