Overview
Buttons should be accessible via keyboard navigation using the Tab and Enter keys.
Use descriptive labels that clearly communicate the button's purpose to screen readers.
Maintain adequate colour contrast (4.5:1 minimum) and make sure buttons have sufficient size for easy interaction (minimum 44px touch target).
Keyboard Interactions
|
Tab |
Moves focus to button |
|
Shift + Tab |
Moves focus away from the button (backwards) |
|
Enter / Space |
Activates the button and triggers its action |
Semantic markup & WAI-ARIA
- Use ARIA attributes to provide additional context for assistive technologies, e.g. aria-label or aria-describedby.
- Use sr-only to provide additional context for screen readers when button labels need clarification, e.g. "Delete item (this action cannot be undone)."
- Use <button> for actionable interactions that trigger functionality within the current context, e.g. submitting forms, opening modals, or processing data without navigating away from the page.
- Use <a> button styling when you need to navigate users to different pages or external URLs. This maintains semantic HTML while providing the visual appearance of a button for navigation purposes.