Button Accessibility Guidelines

Shawn Sandy (Ally.Cafe) ~ June 10, 2024

Buttons are a fundamental part of any website’s interactive elements. They enable users to perform actions, such as submitting forms, navigating to different pages, or triggering scripts. Ensuring that buttons are accessible is crucial for creating an inclusive web experience that allows all users, including those with disabilities, to interact with web content effectively.

Why Button Accessibility Matters

Accessible buttons ensure that all users, regardless of their abilities, can navigate and interact with web content. This is particularly important for users who rely on assistive technologies such as screen readers, keyboard navigation, or voice commands. Accessible buttons contribute to a positive user experience, increase usability, and comply with legal requirements and standards such as the Web Content Accessibility Guidelines (WCAG).

Relevant WCAG 2.2 Guidelines

The WCAG 2.2 guidelines provide a comprehensive framework for making web content accessible. Several success criteria within these guidelines apply specifically to buttons:

1.1.1 Non-text Content (Level A)

Guideline: All non-text content, such as images used as buttons, must have a text alternative that serves the equivalent purpose.
Purpose: To ensure that users who cannot see the images can still understand and interact with the content.

2.1.1 Keyboard (Level A)

Guideline: All functionality must be operable through a keyboard interface without requiring specific timings for individual keystrokes.
Purpose: To ensure that users who cannot use a mouse can still navigate and interact with buttons using a keyboard.

2.4.7 Focus Visible (Level AA)

Guideline: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
Purpose: To help users who navigate via keyboard to see which element has focus, making it easier to interact with buttons.

4.1.2 Name, Role, Value (Level A)

Guideline: For all user interface components (including buttons), the name and role can be programmatically determined, and states, properties, and values that can be set by the user can be programmatically set and notified to the user agents, including assistive technologies.
Purpose: To ensure that assistive technologies can accurately convey the button’s purpose and status to users.

Best Practices for Accessible Buttons

Use Semantic HTML:
- Use the <button> element or an <input type="button"> for buttons. This ensures that buttons are recognized correctly by browsers and assistive technologies.
```
<button type="button">Click Me</button>
```
Provide Text Alternatives:
- Ensure that buttons have meaningful text labels. Avoid using only icons without accompanying text.
```
<button type="button">
  <img src="icon.png" alt="Submit">
</button>
```
Keyboard Accessibility:
- Make sure buttons can be focused and activated using the keyboard. Use the tabindex attribute if custom elements are used as buttons.
```
<div role="button" tabindex="0" onclick="doSomething()">Custom Button</div>
```
Visible Focus:
- Ensure that buttons have a visible focus indicator when they are focused via keyboard navigation.
```
button:focus {
  outline: 2px solid blue;
}
```

ARIA Attributes:

Use ARIA attributes to enhance button accessibility when necessary. For instance, use aria-pressed to indicate a toggle button state.

<button type="button" aria-pressed="false" onclick="toggleState(this)">Toggle</button>
<script>
  function toggleState(button) {
    const isPressed = button.getAttribute('aria-pressed') === 'true';
    button.setAttribute('aria-pressed', !isPressed);
  }
</script>

Conclusion

By following these guidelines and best practices, you can ensure that buttons on your website are accessible to all users. This not only improves usability and user experience but also helps you comply with important accessibility standards like WCAG 2.2.

Relevant Links

Here are some useful resources to learn more about accessible buttons and web accessibility in general:

By implementing these practices and leveraging these resources, you can create web content that is accessible and inclusive for all users.

Found an error, typo, or bug please edit on github or open an issue or ticket

Edit on Github Open an issue