A11ying with Sanna - I would if I could a guide to web accessibility

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 headerTable headerTable header
Table contentTable contentTable content
Table contentTable contentTable content

Better example

Table headerTable headerTable header
Table contentTable contentTable content
Table contentTable contentTable content
Descriptive caption for this table

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:

Table caption
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.