Layout tables must not use data table elements

Rule ID: layout-table
Ruleset: axe-core 4.3
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A)

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

Compliance Data & Impact

User Impact

Serious
▼
Minor
Critical

Disabilities Affected

  • Blind
  • Deafblind
  • Mobility

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)

WCAG Success Criteria [WCAG 2.1 (A)]

  • 1.3.1: MUST: Info and Relationships

WCAG Success Criteria [WCAG 2.0 (A)]

  • 1.3.1: MUST: Info and Relationships

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 including 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 to 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).

Why it Matters

If a table is being used only for layout, it doesn't make sense to add elements that belong only to 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 broad adoption of CSS for beautiful 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.

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.

Resources

Deque University Course Pages (subscription required)

Contribute to axe-core on GitHub

Other Resources

You may also want to check out these other resources.

Was this information helpful?

You have already given your feedback, thank you..

Your response was as follows:

Was this information helpful?
Date/Time feedback was submitted: