Tabs
Tabs consist of two parts- a tab and a tab panel. A tab is a label that represents the content of a tab panel. A tab panel is a region that contains the content associated with a tab. Use tabs to allow users to navigate easily between related views (content in tab panels) within the same context.Â
Use Cases
User should be able to:
- Select a tab in the tab list
- View the current select tabs tab panel
- Navigate across the tab list on smaller views using the over flow buttons
- Navigate and interact with the component with assistive technology
Interaction and Style
Info and Relationships
Ensure information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. This means use proper HTML elements to structure your content, so it makes sense when read by assistive technology.
WCAG 2.1 Understanding 1.3.1Keyboard
Ensure all functionality of the content is operable through a keyboard interface. This allows users who can't use a mouse or touchscreen to navigate and use your content.
WCAG 2.1 Understanding 2.1.1Focus Order
If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
WCAG 2.1 Understanding 2.4.3Name, Role, Value
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
WCAG 2.1 Understanding 4.1.2
Keyboard Navigation
| Key | Action |
|---|---|
| Tab | Focuses the tab list. |
| Arrow Keys (Left/Right) | Navigates tabs. |
| Enter/Spacebar | Activates the focused tab. |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.