Tables
Data cells must be explicitly associated with header cells for data tables, and descriptive table captions and summaries may be provided where appropriate.
Last updated
Was this helpful?
Data cells must be explicitly associated with header cells for data tables, and descriptive table captions and summaries may be provided where appropriate.
Last updated
Was this helpful?
Topic
Technique
WCAG AA Requirement
Table Headers
Header tag: Table headers MUST be designated with <th>
.
Required
Meaningful header: Data table header text MUST accurately describe the category of the corresponding data cells.
Required
Header and data cell associations: Table data cells MUST be associated with their corresponding header cells.
Note: Use of scope (<th scope="col">
and <th scope="row">
) is highly recommended, though not always necessary (i.e. if all cells in the first row are marked as <th>
without scope, most modern screen readers will infer that the scope is the column below each header cell).
Required
Group header associations: Table data group headers (if any) MUST be associated with their corresponding data cell groups (e.g. via scope="rowgroup"
or scope="colgroup"
).
Required
Complex header associations: Header/data associations that cannot be designated with <th>
and scope MUST be designated with the headers
and id
attributes.
Required
Nested or split tables: Data table headers and data associations MUST NOT be referenced across nested, merged, or separate tables.
Required
Tabular Data
Tables: Tabular data SHOULD be represented in a <table>
.
Note: Even if the data are not represented in a table, requires the data to be associated with their labels.
best practice
Caption
Caption: Data tables SHOULD have a programmatically-associated <caption>
or name (e.g. via aria-label
or aria-labelledby
).
Note: In most circumstances, <caption>
is preferred, because it is the native method of giving a name to a table, and the <caption>
is visible and available to all users by default.
best practice
Meaningful caption: The name or <caption>
of a data table SHOULD describe the identity or purpose of the table accurately, meaningfully, and succinctly.
best practice
Unique caption: The name or <caption>
of each data table SHOULD be unique within the context of other tables on the same page.
best practice
Layout Tables
Avoid layout tables: Tables SHOULD NOT be used for the purpose of purely visual (non-data) layout.
best practice
Avoid headers in layout tables: Layout tables MUST NOT contain headers.
best practice