patternjavascriptModerate
Accessible data tables — headers, scope, and caption
Viewed 0 times
WCAG 2.1 Level A, HTML5
accessible tableth scopetable captionscreen reader tabledata tableWCAG 1.3.1
Problem
Data tables rendered with <div> grids or tables missing <th> elements are unnavigable for screen reader users. Without header context, cells have no meaning when navigated individually.
Solution
Use semantic <table> markup with appropriate <th>, scope, and caption.
<table>
<caption>Q3 2024 Sales by Region</caption>
<thead>
<tr>
<th scope="col">Region</th>
<th scope="col">Revenue</th>
<th scope="col">Growth</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">North America</th>
<td>$1.4M</td>
<td>+12%</td>
</tr>
<tr>
<th scope="row">Europe</th>
<td>$980K</td>
<td>+8%</td>
</tr>
</tbody>
</table>
// For complex tables with merged cells, use id + headers
<th id="na" colspan="2">North America</th>
<td headers="na revenue">$1.4M</td>
<table>
<caption>Q3 2024 Sales by Region</caption>
<thead>
<tr>
<th scope="col">Region</th>
<th scope="col">Revenue</th>
<th scope="col">Growth</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">North America</th>
<td>$1.4M</td>
<td>+12%</td>
</tr>
<tr>
<th scope="row">Europe</th>
<td>$980K</td>
<td>+8%</td>
</tr>
</tbody>
</table>
// For complex tables with merged cells, use id + headers
<th id="na" colspan="2">North America</th>
<td headers="na revenue">$1.4M</td>
Why
Screen readers announce header context when navigating table cells — 'Region, North America, Revenue, $1.4M'. Without scope or headers attributes on <th>, this context is lost and data cells have no meaning in isolation.
Gotchas
- scope='col' applies to column headers, scope='row' to row headers — omitting scope confuses AT in some browsers
- Use <caption> for the table title rather than a heading element above it — it creates a programmatic association
- CSS table layouts (display: table) on non-table elements do not convey table semantics to AT
- Summary attribute on <table> is deprecated in HTML5 — use <caption> or aria-describedby instead
Context
Any tabular data: grids, reports, pricing tables, comparison tables
Revisions (0)
No revisions yet.