Layout table has an improper role
- Rule ID:
- User Impact:
- WCAG :
Layout tables must have a
"none" role on 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.
<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
Add a role of
"none" to the
|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>