Why it matters
A data table is only usable with a screen reader if each cell is announced with its headers, so "£1,450" becomes "Malham, Oak, £1,450". That depends entirely on the markup: th for header cells, scope when it isn't obvious which way a header points, a caption for the table's name and, for irregular tables, headers attributes that list each cell's header ids. Tables built with td for everything, or with merged header cells, often announce nothing useful.
This checker builds the table's grid the way browsers do, including rowspan and colspan, and runs the HTML standard's algorithm for assigning header cells to every data cell. The result is the list of headers each cell gets and the sentence a screen reader would say. It points out what's missing and writes a corrected version with th, scope and a caption, so you can paste it back and check the announcements again.
How to use it
- Paste your table's HTML.
- Read what each cell is announced with: empty means no header.
- Fix the problems, starting with missing th and headings in td.
- Paste the suggested markup back in and check the announcements.
FAQ
When do I need scope?
In a simple table with one header row, browsers work it out. Add scope="col" or scope="row" when there are headers in both the first row and the first column, or whenever a header could point either way.
When do I need headers and id?
For irregular tables, where a cell's headers aren't simply above it and to its left, such as tables with several levels of merged headers. Each data cell lists the ids of its headers.
Is a caption required?
It isn't required by WCAG for every table, but it gives the table a name that screen reader users hear and can find in a list of tables. A heading right before the table, linked with aria-labelledby, also works.
Is my HTML uploaded?
No. Everything is worked out in your browser.
