Identify table markup as data or layout

Definition Table markup must identify a table as either a data table or a layout table.
Purpose
  • The table element is designed for representing tabular data in a web page, but table markup has also been used by web developers as a means to layout content in rows and columns.
  • Users of assistive technology are confused when the purpose of table markup is not clearly identified (i.e. layout or for tabular data).
  • Use role="presentation" on the table element to clearly identify a table markup for layout.
  • Adding an accessible name and/or description to a table element identifies table markup as a data table (e.g. layout tables must not have an accessible name or description).
  • The use header cells (e.g. th or td[scope] elements) identifies a table element as a data table.
Required No for HTML4 Legacy Techniques ruleset mapping
WCAG 2.0 Success Criteria

1.3.1 Info and Relationships (Level A, Primary Success Criterion)

Rule Category Tables
Scope Element
Target Resources table elements
  • table
Techniques
  • Use th elements in the first row and/or first column to identify a table as a data table.
  • Use caption element; summary, title, aria-label, aria-labelledby or aria-describedby attribute to add an accessible name or description to a table element.
  • Use role="presentation" on the table element to identify a table and its child table elements (e.g. tr and td elements) are being used for layout.
  • Layout tables must only use the tr and td table elements for layout content and must NOT have an accessible name or description.
Manual Checks
  • If a table is used for layout verify the order of content still makes sense when the table markup is disabled.
  • If a table is used for data tables, verify the each data cell has header cells that clearly identify the meaning of the content of the data cell.
Informational Links