Accessible component patterns

Tabs

Tabs with arrow-key switching, a single stop in the Tab order, and a choice between automatic and manual activation.

Component
<ad-tabs>
APG pattern
Tabs
WCAG criteria
  • 1.3.1 Info and Relationships
  • 2.1.1 Keyboard
  • 2.4.3 Focus Order
  • 2.4.7 Focus Visible
  • 3.2.2 On Input
  • 4.1.2 Name, Role, Value

Demo

Tab activation mode

Keyboard

Tab to a tab and switch with the left and right arrow keys. Home and End jump to the first and last tab. Tab from a tab goes straight into the content.

Screen reader

A screen reader announces “tab, 1 of 3, selected” and, on entering the panel, its name. Nothing extra is announced because you triggered the change yourself.

Zoom

At 400 % zoom the tabs wrap onto several lines and the panel is never clipped. Nothing has a fixed height.

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 announces “tab, 1 of 3, selected” and knows where to go next.

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.

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, position and “selected” state.
  • 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.

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>