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 only & screenreader

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

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.
Tab groups are a solution used when a page has become bloated with content and designer seek to condense even more information into a tighter space.
Interaction rates will be exceedingly low for anything but the first tab panel.
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 tabs. This will be easier to understand for screenreader users (as is done with this website’s tabs).

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>