Tab group

How to test a tab group

Gherkin Condensed

Given that I am on a page with a tab group

1 Keyboard for mobile & desktop

WHEN I use the tab key to move focus to a tab I SEE focus is strongly visually indicated on the selected tab
Then when I use the left/right arrow keys I SEE focus moves to other tabs
Then when I use the spacebar or enter key to activate the tab I SEE the tab is selected
Then when I use the tab key I SEE focus moves to the selected tab panel

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to a tab
- I HEAR Its label and purpose is clear
- I HEAR It identifies itself as a tab
- I HEAR It expresses its state (selected/pressed/checked)
Then when I use the left/right arrow keys I HEAR focus moves to other tabs
Then when I use the spacebar or enter key to activate the tab I HEAR the tab is selected
Then when I use the tab key I HEAR focus moves to the selected tab panel

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to focus on a tab
- I HEAR Its label and purpose is clear
- I HEAR It identifies itself as a tab
- I HEAR It expresses its state (selected/pressed/checked)
Then when I doubletap with the tab in focus I HEAR the state is changed

1 Keyboard & screen reader actions

When I use	I see/hear
Tab key	Focus visibly moves to the active tab and then the open tab panel
Left/right-arrow-keys	Moves focus to the next or previous tab
Spacebar or enter	Activates the tab

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the tabs and then the open tab panel
Doubletap	Activates the tab

3 Screenreader output for all devices

Reads	I hear
Name	Its label and purpose is clear
Role	It identifies itself as a tab
State	It expresses its state (selected/pressed/checked)

Avoid tab groups

Tab groups are a sub-par solution used in a couple of scenarios:

A page has become bloated with content and the designer seeks to condense even more information into a tighter space.
It’s also possible a product owner still believes it’s the year 1999 and people don’t know how to scroll.

Either way, it’s about trying to cram low quality content into a page until it becomes a high quality experience, which is not a good plan.

Why tab groups are problematic

Many people who use a screenreader don’t know how to operate a tab group with the arrow keys and can miss parts of the content.
It requires the screenreader user to repeatedly parse the content to consume it.
Interaction rates will be exceedingly low for anything but the first tab panel (like a carousel).

What to do instead

Rather than cramming more content into the page, consider breaking the page into more concise sections or separate pages.

Still need a solution?

Use radio buttons as controls. This will be easier to understand for screenreader users (as is done with this website’s tabs).

Wait, then why are you using tabs on this site?

See above: The page has become bloated with content and the designer seeks to condense even more information into a tighter space.

Code examples

More details and working examples

Use semantic HTML where possible

<div class="tabs">
  <div role="tablist">
    <button role="tab"
            aria-selected="true" 
            aria-controls="alpha-tab" 
            id="alpha">
            Alpha
    </button>
    <button role="tab" 
            aria-selected="false" 
            aria-controls="bravo-tab" 
            id="bravo" 
            tabindex="-1">
            Bravo
    </button>
    <button role="tab" 
            aria-selected="false" 
            aria-controls="charlie-tab" 
            id="charlie" 
            tabindex="-1">
            Charlie
    </button>
  </div>
  <div role="tabpanel" 
       id="alpha-tab" 
       aria-labelledby="alpha"
       tabindex="0">
    <p>Alpha is the first letter of the NATO alphabet</p>
  </div>
  <div role="tabpanel" 
       id="bravo-tab" 
       aria-labelledby="bravo"
       tabindex="0">
    <p>Alpha is the first letter of the NATO alphabet</p>
  </div>
  <div role="tabpanel" 
       id="charlie-tab" 
       aria-labelledby="charlie"
       tabindex="0">
    <p>Charlie is the best letter of the NATO alphabet</p>
  </div>
</div>