HTML Academy · Lesson

Table Accessibility scope summary caption

Add captions and scope attributes for screen reader support.

Table Accessibility scope summary caption is a free HTML Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Table Accessibility Matters

Screen reader users navigate data tables cell by cell — they need header context for every data cell they read.

Without proper markup, screen readers just read raw values without column/row context
Accessible tables make data understandable for everyone

The caption Element

<caption> provides a visible title for the table:

<table>
  <caption>Q4 2024 Product Sales by Region</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>
<!-- caption is the first child of table -->
<!-- Screen readers announce it when entering the table -->
<!-- Helps all users understand the table's purpose at a glance -->

Styling caption

Style and position the caption with CSS:

caption {
  caption-side: bottom;  /* or top (default) */
  font-style: italic;
  font-size: 0.875rem;
  color: #666;
  text-align: left;
  padding: 0.5rem 0;
}

The scope Attribute on th

The scope attribute tells screen readers which cells a header applies to:

<thead>
  <tr>
    <th scope="col">Name</th>      <!-- header for a column -->
    <th scope="col">Score</th>
    <th scope="col">Grade</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Alice</th>    <!-- header for a row -->
    <td>95</td>
    <td>A</td>
  </tr>
</tbody>

scope Values

scope attribute values:

col — header applies to cells in the same column
row — header applies to cells in the same row
colgroup — header applies to cells in a column group
rowgroup — header applies to cells in a row group (tbody/thead)

scope for Complex Headers

Spanning headers use colgroup or rowgroup scope:

<thead>
  <tr>
    <th rowspan="2" scope="col">Name</th>
    <th colspan="2" scope="colgroup">2024</th>   <!-- colgroup -->
  </tr>
  <tr>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
  </tr>
</thead>

The headers Attribute on td

For very complex tables, use headers to explicitly link cells to their headers:

<thead>
  <tr>
    <th id="hname">Name</th>
    <th id="hq1">Q1</th>
    <th id="hq2">Q2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="ralice" headers="hname">Alice</th>
    <td headers="hq1 ralice">95</td>
    <td headers="hq2 ralice">88</td>
  </tr>
</tbody>

When to Use scope vs headers

Guidelines:

Simple tables with single-row headers → use scope="col" and scope="row"
Complex spanning headers → use headers attribute with ID references
WCAG 1.3.1 requires that table headers be programmatically associated with their data cells

aria-label on table

When caption is not desirable visually, use aria-label:

<!-- caption with visually-hidden class -->
<table aria-label="Q4 2024 Product Sales by Region">
  ...
</table>
<!-- Or use aria-labelledby to reference a heading -->
<h2 id="table-title">Sales Data</h2>
<table aria-labelledby="table-title">...</table>

Testing Table Accessibility

How to verify your table is accessible:

Use the Tables panel in Screen Reader (VoiceOver, NVDA)
Install the axe DevTools browser extension
Run pa11y CLI against your page URL
The W3C Markup Validator catches missing caption

summary Attribute (Deprecated)

The summary attribute was used for screen readers on complex tables — now deprecated in HTML5:

<!-- Old HTML 4.01 — do not use: -->
<table summary="This table shows quarterly sales...">

<!-- Modern HTML5 replacement: -->
<table>
  <caption>This table shows quarterly sales...</caption>
</table>
<!-- Or: aria-describedby to a paragraph -->

Accessible Table Checklist

Accessibility checklist for data tables:

Use <caption> to label the table
Use <th> for all header cells
Add scope to all <th> elements
Use <thead>, <tbody>, <tfoot> for structure
For complex tables, use id + headers

Quick Check

Which scope value should you use for a th that is the header for an entire column?

Recap: Table Accessibility

Accessible table essentials:

<caption> — visible table title announced by screen readers
scope="col" — column header
scope="row" — row header
scope="colgroup/rowgroup" — spanning headers
id + headers — for complex multi-level headers
Test with axe, pa11y, or VoiceOver

Frequently asked questions

Is the “Table Accessibility scope summary caption” lesson free?

Yes — the full text of “Table Accessibility scope summary caption” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “Table Accessibility scope summary caption”?

Add captions and scope attributes for screen reader support. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Table Accessibility scope summary caption” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

table tr td and th
thead tbody tfoot Structure
colspan and rowspan for Spanning
Table Accessibility scope summary caption

← Back to HTML Academy