Tables

Data cells must be explicitly associated with header cells for data tables, and descriptive table captions and summaries may be provided where appropriate.

Topic

Technique

WCAG AA Requirement

Table Headers

Header tag: Table headers MUST be designated with <th>.

Required WCAG 1.3.1

Meaningful header: Data table header text MUST accurately describe the category of the corresponding data cells.

Required WCAG 1.3.1

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 WCAG 1.3.1

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 WCAG 1.3.1

Complex header associations: Header/data associations that cannot be designated with <th> and scope MUST be designated with the headers and id attributes.

Required WCAG 1.3.1

Nested or split tables: Data table headers and data associations MUST NOT be referenced across nested, merged, or separate tables.

Required WCAG 1.3.1

Tabular Data

Tables: Tabular data SHOULD be represented in a <table>. Note: Even if the data are not represented in a table, WCAG 1.3.1 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

Last updated

Was this helpful?