Help screen reader users by giving data tables a summary
When sighted users encounter a data table, they can scan it to get an understanding of the data it contains. They can quickly skip from the first row to the last and from one column to another and so on.
For people using a screen reader or other non-visual browser, this is a much more time-consuming task since they read the table cell by cell, row by row, and have to more or less keep all of it in memory.
To help users of non-visual browsers understand and navigate data tables, you can use the summary
attribute to describe their structure. The summary
attribute is not displayed in graphical browsers, so the information you put there should be written for non-visual users.
Describing a table with a summary
attribute is particularly useful for more complex tables. For simple tables it may not be necessary as enough info may be provided in the caption
element.
Further reading:
- Accessible Data Tables, summary for Table Purpose
- WCAG 2.0, H73: Using the summary attribute of the table element to give an overview of data tables
- Purpose of the summary Attribute
This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.
- Previous post: Building accessible forms with WCAG 2.0
- Next post: Enabling keyboard navigation in Mac OS X Web browsers