Screen Reader Guide

SCREEN READER FOUNDATIONS

0 of 20
Course progress: 0 / 20 lessons

PRACTICE 2 OF 8 · Complex widgets and data

Table headers

Move through a data table and check whether header context remains available.

  • Level: Beginner
  • Time: 5-10 minutes
Objective

Determine whether table cells are programmatically associated with their row and column headers.

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

Navigate through the table by cells if your screen reader supports table commands. Listen for row and column context.

Project milestones
TaskOwnerDue
Design reviewSamAug 4
Release notesMinaAug 9

Expected behavior: cells retain their row and column meaning when navigated out of visual context.

INTENTIONAL DEFECT

Find the barrier

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

Navigate the visual table. Determine whether it is exposed as a table with headers.

Hint

If table navigation commands do not find a table, the visual grid is not enough.

End of intentional defect.

DIAGNOSE

Choose the primary cause

What is wrong with the defective table?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The defective example uses generic containers to mimic a table. The visual alignment is present, but the relationships between headers and cells are not.

Repair

Use native table markup for real data tables. Mark column and row headers with th and scope where appropriate.

<table>
  <thead>
    <tr><th scope="col">Task</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Design review</th></tr>
  </tbody>
</table>

Retest

  • Confirm the table has a useful caption or surrounding context.
  • Move cell by cell and confirm column headers are announced.
  • Confirm row headers are available where rows need labels.

Report it

Example: The milestones grid is built with generic containers, so screen reader users cannot use table navigation or hear header context for each cell.

Standards and support

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

Editorially reviewed 20 July 2026.