Overview
Icon buttons should be accessible via keyboard navigation using the Tab and Enter keys. Always provide descriptive labels for screen readers since icons alone don't communicate purpose to assistive technologies.
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 <button> for all icon button interactions to maintain semantic HTML and ensure proper functionality.
- Always use aria-label to provide descriptive text that clearly communicates the button's purpose to screen readers, e.g. aria-label="Edit profile".
- Use sr-only class to provide additional context for screen readers when the icon's meaning might not be immediately clear.