WebsightTheme
Tables
Header cells that match data cells and captions that are real captions. 2 automated checks Websight runs, plus 2 axe rules it does not run, each with a live example and a fix you can copy.
Every data cell in a table needs a header
td-has-headerIn a data table, every cell that holds a value needs a header cell that says what the value is. Screen readers read the header out alongside the cell, so a listener can tell that Tuesday is the recycling day for Mill Lane and not something else. The check runs on tables bigger than 3 by 3 and flags any filled-in td with no th in its row or column and no headers attribute.The headers attribute must point at header cells in the same tabletd-headers-attrThe headers attribute on a cell lists the ids of the header cells that describe it. It is the manual way to connect cells when scope cannot do the job, for example in a table with two levels of column headings. Each id in the list must belong to a th in the same table. An id that is missing, mistyped or sitting on a td gives the screen reader nothing, or the wrong thing, to read.Every table header must describe some datath-has-data-cellsA th tells screen readers that a cell is the heading for the row or column it sits in. If that row or column has no data cells, or every cell in the table is a th, the heading describes nothing. Screen readers announce headers that lead nowhere, and sighted visitors see a column that is always blank. Either put data under the header or take the header out.Table captions must use the caption elementtable-fake-captionA table's title belongs in a caption element, directly after the opening table tag. Screen readers announce the caption when the listener arrives at the table and show it in their list of tables. A title typed into a merged cell on the first row looks the same but is read as a data cell, and it pushes the real header row down so the first row of the table is not the headers any more.Who these pages are for: the developer or site owner who has a scan result in front of them and wants to understand it, test it and fix it without a training course.
Keep going
Check your page for tables issues
Websight runs these checks on any page in Chrome and shows a draft fix for each element it finds.
Add Websight to ChromeFree scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.