Tab group - Web accessibility testing checklist

How to test a tab group

Gherkin Condensed

Given that I am on a screen with a tab group

1 Keyboard

WHEN I use the tab key to move focus to a tab I SEE focus is strongly visually indicated on the activated tab
If tab activation is manual when I use the left/right arrow keys I SEE focus moves to other tabs and I use the spacebar or enter key to activate the tab
If tab activation is automatic when I use the left/right arrow keys I SEE the tab is activated
Then when I use the tab key I SEE focus moves to the activated 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)
If tab activation is manual when I use the left/right arrow keys I HEAR focus moves to other tabs and I use the spacebar or enter key to activate the tab
If tab activation is automatic when I use the left/right arrow keys I HEAR the tab is activated
Then when I use the tab key I HEAR focus moves to the activated tab panel

3 Mobile screenreader

WHEN I use a screenreader 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 (automatic activation)	Moves focus to the next or previous tab and activates the tab
Left/right-arrow-keys (manual activation)	Moves focus to the next or previous tab
Spacebar or enter (manual activation)	Activates the focused 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

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)

A tab group must meet WCAG principles:

1 Perceivable

The purpose can be programmatically determined - 1.3.5 AA
Color is not used as the only means of conveying state (selected/unselected) - 1.4.1 A
Text can resize up to 200% with no loss of information - 1.4.4 AA
Text has a 4.5:1 minimum contrast ratio 1.4.3 AA

2 Operable

Is keyboard operable - 2.1.1 A
The click/tap target area includes the label and is no smaller than 24x24px - 2.5.8 AA
The click/tap target area includes the label and is no smaller than 44x44px - 2.5.5 AAA
The checked, disabled and focus states have a 3:1 minimum contrast ratio against default 2.4.13 AA
The focus indication has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
The focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA

4 Robust

Conveys the correct name, role, state/value - 4.1.2 A
Expresses its group name/legend 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

Automatic or manual tab activation

Tabs can be built to be activated automatically or manually. There are a couple subtle differences between each type:

“Automatic” tabs become activated immediately upon focus via a mouse click or the arrow keys.
“Manual” tabs can receive focus via the arrow keys, but require the user to press either Enter or Space, or click them with their mouse to activate them.

You can find additional guidance as well as examples of automatic and manually activated tab groups on the WAI-ARIA Authoring Practices Guide Tabs Pattern page.

Code examples

More details and working examples
You can also use radio buttons as controls. This will be easier to understand for screenreader users (as is done with this website’s tabs).
Note: an aria-selected state is explicity required as some screenreaders will assume the tab is selected unless delared false.

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>Bravo is the second 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>

Web Tab group