Tabs

Why it is accessible

Tabs are one of the most frequently broken components on the web: often they are just links styled to look like tabs, and neither the keyboard nor a screen reader knows what belongs to what. Here, the list of tabs has the role tablist, each tab has the role tab, and each panel has the role tabpanel, linked to the tab that controls it. A screen reader therefore knows where to go next: NVDA in English announces something like “Keyboard, tab, selected, 1 of 3”. The exact wording depends on the screen reader, browser and language.

The whole group of tabs takes up a single stop in the Tab order. You switch between tabs with the arrow keys, so a keyboard user doesn't have to tab through every tab just to reach the content. The switch in the demo toggles between the two modes from the APG: with automatic activation, an arrow key shows the panel immediately; with manual activation, it only moves focus, and the panel appears once you press Enter. Manual activation is the right choice when switching is expensive or moves focus a long way.

When to use tabs

• Five or six tabs at most. More than that wrap onto several lines on a narrow screen, labels get truncated, and people lose track of which tab is active. If you need more, the content belongs on separate pages or in an accordion.
• Short labels of one or two words that are never cut off with an ellipsis.
• Panels are equivalent views of the same kind of content, such as Keyboard, Screen reader and Zoom. Steps in a process belong in a wizard with Next and Back buttons; content that people need to compare belongs in columns or a table.
• Key information such as prices or terms does not belong in an inactive panel. Most people never see what is in an inactive panel.
• Tabs are not nested inside tabs, and their order does not change while in use. The first tab is selected on load, or the one the page address points to.
• When printed, the tab list is hidden and every panel is printed one below the other with its heading, so nothing is missing on paper.

Test it yourself

Keyboard

• Tab to the group of tabs, then ← and → to switch between them.
• Home and End jump to the first and last tab.
• The next Tab goes straight into the panel's content, not to the next tab.
• Switch the demo to manual mode and notice that the arrow keys no longer change the panel.

Screen reader

• On a tab you hear its name, role, “selected” state and position.
• Moving into the panel, you hear its name, which matches the tab's name.

Zoom and reflow

• At 400% zoom the tabs wrap onto several lines; nothing is clipped or pushed off screen.

Print

• Open the print preview (Ctrl + P): the tab list disappears and all three panels are printed one below the other.

Without JavaScript

The list of tabs is a plain list of links to the individual sections, and every section is shown one after another. It is a readable page, not an empty space.

Code to copy

<ad-tabs data-activation="automatic" data-label="How to test it">
  <ul data-tab-links>
    <li><a href="#t-keyboard">Keyboard</a></li>
    <li><a href="#t-sr">Screen reader</a></li>
  </ul>
  <section id="t-keyboard"><h3>Keyboard</h3><p>…</p></section>
  <section id="t-sr"><h3>Screen reader</h3><p>…</p></section>
</ad-tabs>
<link rel="stylesheet" href="/assets/js/components/ad-tabs/ad-tabs.css">
<script type="module" src="/assets/js/components/ad-tabs/ad-tabs.js"></script>