Semantic Markup
- Provide a clear label for each tab.
WAI-ARIA
- Aria-labels should be used when there is no visible text on the page that can be used to describe the purpose of the element. This can be especially useful for elements that are interactive, such as buttons, links, and form elements, as well as for images that convey meaning but have no alternative text.
- .sr-only class is used to hide an element visually, but keep it accessible to screen readers. It is commonly used to hide elements such as form labels or instructions that are required for a11y, but are not necessary for sighted users.
Keyboard Interactions
|
tab |
Focus moves first to tab group, then to single-tab |
|
left/right |
Navigates between single-tabs |
|
enter |
Selects tab and shows content |
Further Links