First row of data table is really a caption

Link to First row of data table is really a caption copied to clipboard



The first row of a <table> MUST NOT be used to convey a table caption.


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.

When a table merges all the cells in the first row to display what is essentially a caption screen readers cannot properly convey the table structure.

How to Fix

Fix this issue by doing ALL of the following:

  1. Remove the spanned row from the table markup.
  2. Use <caption> element before the table to display the caption.