WCAG 1.3.1: Info and Relationships (tables)
Back to all WCAG criteriaOVERVIEW
What's it about?
Complex tables must also use the scope attribute in addition to <th> for headers and <td> for data cells to make the relationships clear.
How to
Depending on your situation, you can implement one of the following options to meet the criterion. For a deeper dive, please refer to the linked WCAG techniques.
Tabular information must be marked up as tables.
For marking up tables, use the tags
<table>for the table,<th>for the headers, and<td>for the content.It is not mandatory for a table to have a description. However, if there is a description for the table, it must be programmatically associated with the table. This can be done using a
<caption>.
Notes
Exception: When a th-Element is not strictly necessary
A table in which the headings or labels appear on the left and only a single column with the corresponding content appears to the right does not necessarily require a
<th>. Because of the left-to-right reading order, the relationship can be understood well even without an explicit table header.In such cases, one could also argue whether this is still a real data table or rather a layout table, because no visual relationships are presented that need to be programmatically identifiable.
Accessible development?
Our workshop for developers!
Learn everything you need to know in our workshop to build accessible websites!
Learn accessibility with us?
Looking to implement WCAG best practices in your design, development, or content workflow? Book a workshop for your team or contact us directly to learn more.