Overview
Tabs should be accessible via keyboard navigation and provide clear information about selected content and available options to screen readers.
Maintain adequate colour contrast (4.5:1 minimum) and make sure interactive elements have sufficient size for easy interaction.
Keyboard Interactions
|
Tab |
Moves focus to tab list, then through tab panels |
|
Shift + Tab |
Moves focus backwards through interface |
|
Enter / Space |
Activates focused tab |
|
Arrow Keys |
Navigate between tabs within tab list |
|
Home / End |
Navigate to first/last tab in list |
Semantic Markup
- Use role="tablist" for the tab container and role="tab" for individual tabs.
- Use role="tabpanel" for content areas associated with each tab.
- Use aria-selected="true" to indicate the currently active tab.
- Use aria-controls to associate tabs with their corresponding content panels.
- Use aria-labelledby to associate tab panels with their corresponding tab labels.
- Ensure tab panels are properly announced when users navigate to them.