Tables beyond sorting: add <caption> + real headers
This micro-demo shows a common failure mode (headers that look clickable, but aren’t real controls) and a simple fix:
use a meaningful <caption>, mark headers with <th>, and set scope so assistive tech can announce “column X, row Y” correctly.
This “table” looks fine visually, but it uses plain <div>s and has no caption or headers.
Assistive tech can’t reliably understand the relationships between cells.
Try: Can you tell what each number means if you only hear cell text? There’s no caption like “Leaderboard” and no header association.
The table has a clear <caption> and real column headers. Each <th> has scope="col",
so assistive tech can announce context (“Score, 12”).
| Name | Score | Time (ms) |
|---|
Share
No tracking. The easiest share target is this hub page, not YouTube.