1.3.1 Tables
In the bad example, the table doesn't have a caption, but the header has been set as bold text. Compare these examples with a screen reader.
Problematic example
Descriptive caption for this table
| Table header | Table header | Table header |
| Table content | Table content | Table content |
| Table content | Table content | Table content |
Better example
| Table header | Table header | Table header |
|---|---|---|
| Table content | Table content | Table content |
| Table content | Table content | Table content |
In the example above, the table is inside a figure element and the caption is added with figcaption. The structure of the HTML in the table can vary depending on the tool used.
The table caption is often positioned below the table by default, but that can also be moved above the table:
| Table header | Table header | Table header |
|---|---|---|
| Table content | Table content | Table content |
| Table content | Table content | Table content |
Final comments
Proper markup with tables is very important for screen reader users.