Tabs

Requirements

Users should be able to:

• Navigate to the tabs using assistive technology.
• Identify tabs as a group of related content sections.
• Display one section of content at a time.

Interactions

Keyboard interactions

• Tab. Moves focus from the previous interactive element on the page to the first tab in the tab group.
• Pressing tab from the tab group moves focus to the next interactive element on the page.

Moving between tabs

Moving focus and activating content

Moving back to first tab

Design considerations

• Only one tab panel should be displayed at a time.
• Tabs should contain related content types, using one content area.
• For unrelated content types, explore using different types of navigation.
• Use clear, visual hover and selected states for tabs.
• Consider when to use horizontal tabs versus vertical tabs on different screen sizes.
• Make sure tab labels are concise and do not get truncated.
• Tabs should not contain interactive elements.
• Interactive elements nested within a tab will not be accessible to keyboard-only or screen reader users.

Development considerations

• Tabs should be wrapped in a container, such as a div with a role=”tablist” so screen reader users understand it is a group of elements.
• Tabs should be marked up as button with a role=”tab”.
• Use an aria-selected attribute and toggle between true and false to indicate to screen reader users which tab is selected.
• Each tab should have aria-controls pointing to the unique id of the tab panel.
• The content within the tab panel should be wrapped in a container, such as a div with a role=”tabpanel”.
• The panel should contain a heading which duplicates the name of the tab.
• Make sure that tab content is not discoverable when tabs are inactive.