General
- Ensure sufficient colour contrast between icon and background
- When using the icon buttons, ensure that the aria labels are clear
- Touch targets must meet minimum size requirements for accessibility
- When using the small size (24px × 24px), ensure adequate spacing around the button
Web
Semantic markup
- Use the <button> element for icon buttons
- Never use <div> or <span> elements styled to look like buttons
Accessible labelling
- Critical: All icon buttons must have aria-label with a clear, descriptive action (e.g., aria-label="Close dialog", aria-label="Open menu", aria-label="Search")
- The aria-label must describe the action the button performs, not just the icon name
- Add aria-hidden="true" to the icon element itself so screen readers do not announce it separately from the button label
- Default icon buttons (44px × 44px) meet WCAG 2.2 Level AA requirements
- Small icon buttons (24px × 24px) meet the absolute minimum but should be used sparingly
- Ensure adequate spacing between adjacent icon buttons to prevent accidental activation
Keyboard navigation
- Icon buttons must be focusable using the Tab key
- Enter or Space must activate the button
Button states
- Focus indicators must be visible when navigating by keyboard
- Use aria-pressed="true" or aria-pressed="false" for toggle icon buttons that maintain state
- Disabled icon buttons should use the disabled attribute (though avoid disabled buttons when possible)
React Native
- Use accessibilityRole="button" to identify the element as a button
- Provide accessibilityLabel with an explicit, descriptive action for all icon buttons (e.g., accessibilityLabel="Close", accessibilityLabel="Open menu")
- Ensure icons are hidden from assistive technologies using appropriate properties
- Use accessibilityState={{ disabled: true }} for disabled icon buttons
- Default icon buttons (44px × 44px) meet recommended touch target sizes
- Small icon buttons (24px × 24px) should be used sparingly and only where surrounding spacing provides adequate touch area