Some websites use tables for layout, and most of them use spanned rows and columns to achieve formatting effects. Layout tables do not have logical headers that can be mapped to information within the table cells. Layout tables are used to get more precise and flexible control over the positioning of elements within the page.
With CSS, however, there is much more flexibility in controlling page layout, so it is best to not use tables to do this.
Why one should avoid using tables for layout purposes
- Screen readers simply read layout tables’ based on the source code order. For some layout tables, reading based on the code order would result in confusing ordered sentences; making the information inaccessible to screen reader users.
- Layout tables lack flexibility to accommodate end-user content adjustments, primarily text sizing by users with low vision.
- If text within a pixel-sized table cell is enlarged by the end user, this can cause readability issues, especially if the text can no longer fit within the pixel dimensions defined.
Best Practices:
- Ensure that the structure of the layout table allows end user customization and text scaling.
- Never use data table markups, such as <th> and <td>, for layout tables. Using data table markups for layout tables will cause screen readers to identify layout tables as data tables which will cause confusion for users.
- Content creators should always use WU page types/content modules to assist with creating more complex layouts or contact Marketing/Communications.
Applicable WCAG Success Criteria
Test for Accessibility
Use SiteImprove and WAVE to check table’s accessibility on a page. To check if tables on a page are accessible, make sure:
- Layout Tables should be avoided.
- Never use data table markups, such as <th> and <td>, for layout tables.