Layout tables must not use data table elements

Rule Description

If a table is being used for layout purposes only, it must not use data table elements such as a header, caption, and summary to prevent confusion by screen reader users who would otherwise expect data to be contained within the cells.

The Algorithm, in Simple Terms

Ensures that presentational <table> elements do not use <th>, <caption> elements or the summary attribute.

Why this is Important

If a table is being used only for layout, it doesn't make sense to add elements that belong only on data tables. Aside from being unnecessary, such elements can confuse users of screen readers, since the assistive technology announces these elements in a particular way. If these elements are present, users might expect a data table and be confused when this is not what the cells contain.

With the wide adoption of CSS for elegant page layouts, it is no longer necessary or desirable to use tables to structure a page. The use of real data tables, with properly marked-up table headers, allow screen reader users to navigate from cell to cell and hear the headers announced.

Compliance Data & Impact

User Impact: Serious
Disabilities Affected:
  • Blindness
  • Deafblindness
  • Mobility/Dexterity
Severity: Serious
Issue Type:
  • WCAG 2.0 (A): MUST
  • WCAG 2.1 (A): MUST
WCAG Success Criteria:
  • 1.3.1 Info and Relationships
Section 508 Guidelines:
  • Not applicable

How to Fix the Problem

This rule checks for the presence of a table header, caption, and summary for tables being used for layout purposes only.

To prevent the issue, remove markup that is only relevant for data tables from your layout-only tables. This includes elements such as a header, caption, and summary. If using a table just for visual layout and not for tabular data, use cascading style sheets (CSS) instead.

The rationale is that if a table is being used only for layout, it doesn't make sense to add elements that belong only on data tables. Aside from being unnecessary, such elements can confuse users of screen readers, since the assistive technology announces these elements in a particular way. If these elements are present, users might expect a data table and be confused when this is not what the cells contain.

The <table> element was not designed to be a layout tool since its purpose is to display tabular data. The table-layout property defines the algorithm to be used to layout the table cells, rows, and columns in Cascading Style Sheets (CSS).

Related Deque University Course Pages

Other Related Resources

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML5
Relevant Custom Widget Type(s):
  • Table - Sortable
  • Table - Responsive
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: layout-table