Rule: Identify table markup as data or layout

Rule ID Table 5
Conformance Required
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="none" 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.
Conformance Required
WCAG Success Criteria

Success Criterion 1.3.1 Info and Relationships

Other Related Success Criterion:

Rule Category Tables/Layout
Rule Scope Element
Techniques
  • Use th elements in the first row and/or first column to identify a table as a data table.
  • Use caption element; aria-label or aria-labelledby attribute to add an accessible name to a table element.
  • Use the aria-describedby attribute to add an accessible description to a table element.
  • Use role="none" 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.
Information Links