Accessibility by Design Table Header Row

A table header row is the top row of a table that acts as a title for the type of information they will find in each column.

It’s common to manually bold the top row to signal this information visually, but it’s important to mark table headers at the code level so the change is also structural.

Marking a table header row or column tells screen reader users how to read the table. They can navigate table cells and hear which column they are currently in. This turns random data into meaningful data.

In the following video, there’s an example of what a screen reader user would hear when navigating a table that has a header column and row assigned.

Marking a table header row also benefits visual users. With tables that continue across more than one page, it helps the reader keep track of where they are without flipping back to the first page.

• Use tables for data, not for layout.
• Have only one header row per table.
• Have only one header column per table.
• Avoid blank cells, especially in the header row or column.
• Avoid merged cells.
• Avoid title rows in the middle of a table. This is an indication that you should split the table.

For more on strategies for making tables more accessible, visit the Tables page.