Layout table uses data-table structural markup
table-layout-header-markup
- Rule ID:
- table-layout-header-markup
- User Impact:
- Serious
- WCAG :
- 1.3.1.b
Rule
Layout tables must not contain data-table markup.
Background
The <table> element is intended to be used to present tabular data, but because it automatically arranges its contents into a grid, developers are sometimes tempted to use it to create a "quick-and-dirty" layout grid for content that is not actually tabular data.
If you do choose to use a table for layout purposes, you must take care to override the inherent semantics of the table or else assistive technologies will treat the layout grid as a data table, which creates an extremely confusing user experience.
Using a <table> element to create a layout grid is an antiquated practice that can easily lead to reading-order issues. It should be avoided unless you have a good reason to do it. Instead, use CSS to create layout grids with more flexibility with fewer potential downsides.
How to Fix
Do all of the following:
- Convert all
<th>elements to<td>s - Remove
"scope"and"headers"attributes from all table children - Remove the
<caption>element - Remove the
"summary"attribute from the<table>element (deprecated anyway)
| Section 1 Title | Section 1 content ... |
| Section 2 Title | Section 2 content ... |
<table role="presentation">
<tbody>
<tr>
<td>Section 1 Title</td>
<td>Section 1 content ...</td>
</tr>
<tr>
<td>Section 2 Title</td>
<td>Section 2 content ...</td>
</tr>
</tbody>
</table>