If the page includes data tables, do they include tagged headers?
Screen readers read through tables in the order in which cells are defined in the HTML code, which can be very different from the order that someone reading visually would follow. It is essential that the reading order match the logical flow of the document so that a screen reader user would hear the document in the same order that a visual reader would read it.
If there are data tables in a site, it is very important to use table headers. The designer needs to determine the information that represents the header for the row and the header for the column. Sometimes, it is only for the row, sometimes it is only for the column, and sometimes it is for both. Users of assistive technology benefit greatly from table headers. If someone using a screen reader is trying to access a data table and it has headers, the screen reader will announce the column or row headers of the table each time the user moves from one cell to another. This is very helpful to the person who cannot visually see the column or row headers while navigating through the data cells. Without table headers, the screen reader would read across each line/row of the table, cell after cell, with no identifying information. The data would be read as a list with no identifying information.
How to Find Table Headers - Outline of the "how to" approach
- WAT– Structure tab
- “Show Table Headers”
- “Simple data table”
- If table headers are present, the cells they are in will be darkened.
- "Linearize" also shows the reading order, though you may have to disable CSS first
- Information tab – “Display Table Information”
- Miscellaneous tab - “Linearize Page” shows the table reading order
- in Chrome, click on the gear icon in Chrome and select the Outline tab. Under that, select Outline Table Cells.
How to Find Table Headers - Paragraph approach on the "how to"
If you're using the WAT on a page you suspect is using tables, then you can check and see by going to the Structure tab and selecting Simple Data Table. The table and each of its cells will be outlined and the tag that each cell uses, from <tr> for a row to <td> for an individual cell, will appear in their respective cells.
If you have a data table on the page (i.e. a table that's used to organize information for better understanding), then you can quickly check whether it has headings by going to Structure again and selecting Show Table Headers. If there are table headers, they will appear darkened. You can also look for them with the Simple Data Table option by looking for the <th> tag.
If the table you're looking at it used for layout, you might want to check the order of the items in the table to see if someone can go from the very beginning of the page to the end and understand the content. To do this, you go once again to Structure and select Linearize. The page will now be very long, and will probably look very strange. However, the items on the page, for the most part, should be separated from one another vertically. Just read down the page and you can see what order the items follow.
The method of finding tables with the WDT is very similar to the WAT. The WDT doesn't have a Show Table Headers option, however. If you have a data table, you'll have to identify any potential headers by their tag. To do this, you'll go the Miscellaneous tab and select Outline Table Cells. Just like the Simple Data Table in the WAT, the table will be outlined and the tags for each table cell will appear within the outlines.
To check the order of a layout table, you'll go to the Miscellaneous tab again and select Linearize. The items on the page will then be reordered to come after one another vertically. This will allow you to check the order of the items on the page.
Other tips for evaluating tables
- Look for table summary (summary=) in TABLE tag.
- Data tables need column and/or row headers via the “scope” attribute or “ID” “axis”, and “headers” attributes. Note: our testers agree that “ID” is preferable to “scope”
- JAWS – read the page and use your commands to zero in on a piece of information
- Screen readers - listen for a logical reading order
- WebAIM: Creating Accessible Data Tables
- Penn State: Tables for Data - Web Standards, Accessibility and Usability
- Webusability on tables
- Jim Thatcher on Tables (some good examples)
- IBM: Table Types and Headers