Screen Reader Guide

SCREEN READER FOUNDATIONS

0 of 20
Course progress: 0 / 20 lessons

PRACTICE 7 OF 9 · Controls and navigation

Tabs with keyboard behavior

Use arrow keys through tabs and distinguish focus, selection, and tab panel relationships.

  • Level: Intermediate
  • Time: 10-15 minutes
Objective

Check whether a tab interface implements expected keyboard behavior and selected state.

PREPARE

Set up your test

  1. Turn on a screen reader you know how to operate.
  2. Navigate by controls or use Tab where the task asks you to.
  3. Listen for purpose and state, not one exact sequence of spoken words.

WORKING EXAMPLE

Establish the expected behavior

Use Tab to enter the tablist, then use arrow keys between tabs. Listen for selected state and panel context.

Daily report content.

Expected behavior: arrow keys move between tabs and selection/panel relationships are exposed.

INTENTIONAL DEFECT

Find the barrier

The example below deliberately contains one accessibility defect. Skip the defective example.

Try Tab and arrow keys. Determine whether this behaves like a real tab interface.

Daily report content.
Hint

Buttons styled like tabs do not automatically create tab semantics or keyboard behavior.

End of intentional defect.

DIAGNOSE

Choose the primary cause

What is missing from the defective tabs?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The defective interface looks like tabs but is just a row of buttons. It does not expose the tablist, selected tab, or panel relationship.

Repair

Use the tabs pattern only when content panels switch in place. Implement tab, tablist, tabpanel, selected state, roving focus, and arrow-key behavior.

<div role="tablist" aria-label="Report periods">
  <button role="tab" aria-selected="true" aria-controls="day-panel">Day</button>
</div>
<div role="tabpanel" id="day-panel">...</div>

Retest

  • Use Tab to enter and leave the tablist.
  • Use arrow keys to move between tabs.
  • Confirm selected state and tab panel relationships are exposed.

Report it

Example: The report period selector is styled as tabs but lacks tab semantics and arrow-key behavior.

Standards and support

This exercise describes behavior rather than promising identical speech across screen reader and browser combinations.

Editorially reviewed 20 July 2026.