a11y/table-caption

Why

Screen reader users can list the tables on a page and jump between them. Without a name they hear "table, 5 columns, 12 rows" for each one and must read cells to find the right table.

Fix

Add <caption> as the first child of <table> (it can be visually hidden if a heading already shows the title), or point aria-labelledby at the heading that introduces the table.

Examples

<h2 id="orders-title">Recent orders</h2>
<table aria-labelledby="orders-title">…</table>

Sources

• W3C WAI tutorials, Tables, caption and summary
• WCAG 2.2 Technique H39, using caption elements

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/table-caption