More than one table element used to create a single table

Link to More than one table element used to create a single table copied to clipboard



Data table headers and data associations MUST NOT be referenced across nested, merged, or separate tables.


People who are blind cannot see the organizational structure of a table with data arranged in rows and columns with corresponding header cells. In order for screen reader users to understand the logical relationships of data arranged in a table, tables need HTML markup that indicates header cells and data cells and defines their relationship. When tables are marked correctly, screen reader users are able to navigate data tables from cell to cell, in a multi-directional way (up, down, right, left), much like navigating a spreadsheet. As they move from cell to cell, screen readers will read the associated header labels.

Tables that are made of nested data tables or multiple data tables that appear as one table break the accessibility of the data presentation as a whole, making it impossible to associate the data and header cells appropriately. It is much better to create one or more simple tables than to create a confusing complex table that technically passes the accessibility guidelines.

How to Fix

Fix this issue by recoding the table as one table marked with proper header cell and data cell relationships. Consider whether you can simplify the table structure.