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.
Descriptive caption for this table
Table header | Table header | Table header |
Table content | Table content | Table content |
Table content | Table content | Table content |
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. In this case I used CKEditor 5 inside Strapi.
The table caption is often positioned below the table by default but that can also be moved above the table:
Proper markup with tables is very important for screen reader users.