Layout tables must not use data table elements
Accessibility testing for dev teams - No experience required
Compliance Data & Impact
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
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: