Lesson 8 of 8
Readable tables
- 11 min
- 5 checks
- 3 hints
- Go to task
Goal
Table headers a screen reader understands
Explanation
A table is for data shown in rows and columns, not for laying out the parts of a page. A screen reader reads it cell by cell: if it doesn't know the headers, it reads "Physics" on its own, and if it does, it tells you the day and the period along with it.
A screen reader works out a table's headers from three things: caption gives the table a name, just as you give each section a heading; thead and tbody separate the headers from the data; and th with scope ties each header to its column (col) or its row (row).
A common mistake is putting a header in a td cell and making it bold. It looks like a header to anyone who can see it, but to a screen reader it's just another data cell.
Your task
Add a caption, move the header row into a thead with <th scope="col"> cells, make the day at the start of each row a <th scope="row">, and keep the subject cells as td.
Checks
5 checks- The table has a title in a caption
- The header row is in thead with th cells
- Column headers have scope="col"
- The day heads its row in a th with scope="row"
- The subjects are still td cells