Tables are sometimes structured in a way that causes cells of data to be read out of order by a screen reader. Never use data table markup to create layout tables.
How to Fix
Simple Data Tables
Simple data tables contain cells of data with one associated header row and column.
- Always use proper table markup to present tabular information. At minimum, this should include the table, table row (tr), table header (th), and table data (td) elements.
- Consider using the caption element to provide the title of data table.
- If defining a width, use relative values.
Complex Data Tables
Complex data tables are not restricted to having one header column and row for each cell of data. These tables are considered less accessible than simple tables.
- Use the scope attribute in conjunction with the table header (th) and table data (td) elements to associate header cells with data cells in complex tables.
Although WCAG 2.0 does not prohibit the use of layout tables, the guidelines recommends the use of CCS-based layouts over table-based layouts.
- Never use data table markup in a layout table (e.g. scope, caption, summary attribute, and table header (th) elements)
Things to Avoid
- Avoid spanning rows and columns. Many screen readers cannot properly read this data.
- Avoid defining cell heights. This allows a cell to expand with its content.
- Do not duplicate the same information in the <caption> element and summary attribute of a data table.
- Do not use white space characters such as space, tab, line break, or carriage return to create a table in text content.
- Do not use the pre element to markup tabular information.