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)
Other Related Success Criterion:
|
Rule Category |
Tables |
Scope |
Element |
Target Resources |
table elements
|
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 |
|