General
- Do not rely on colour alone to convey button purpose — use clear, descriptive labels
- Button labels should be concise and clearly describe the action
- When using icons with labels, ensure the label provides full context without relying on the icon
Web
Semantic markup
- Use the <button> element for buttons that trigger actions on the page
- Never use <div> or <span> elements styled to look like buttons
Button labels and icons
- All buttons must have an accessible name that describes the action
- When using icon start or icon end with a label, add aria-hidden="true" to the icon so screen readers focus on the label text
Button states
- Use disabled attribute for disabled buttons, though these should be avoided when possible
- Disabled buttons are not focusable and cannot be activated by keyboard users
- Focus indicators must be clearly visible with minimum 3:1 contrast against adjacent colours
- Use aria-pressed="true" or aria-pressed="false" for toggle buttons that maintain state
Keyboard navigation
- Buttons must be focusable using the Tab key
- Enter or Space must activate the button
- Focus order should follow a logical sequence through the page
- When a button opens a dialog or modal, focus should move to the opened element
Touch targets
- Buttons must have a minimum touch target size of 44px × 44px to meet WCAG 2.2 requirements
- This applies to both web and native platforms
- Ensure adequate spacing between buttons to prevent accidental activation
React Native
- Use accessibilityRole="button" to identify the element as a button
- Provide accessibilityLabel with an explicit, descriptive action for all buttons
- Use accessibilityState={{ disabled: true }} for disabled buttons
- Ensure touch targets meet the minimum 44px × 44px requirement
- Icons should be hidden from assistive technologies using appropriate properties