Identify table markup as data or layout

Rule ID Table 5
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.
Mappings
  • HTML4 Legacy Techniques (Recommended)
  • HTML5 and ARIA Techniques (Required)
WCAG 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