Provide Headings and Summaries for Tables
Tables are formatted visually in a grid of data and that formatting provides context to the data. Through visual formatting a sighted user can quickly determine the purpose of the table and which rows/columns are the headers for the data. Assigning headers to the table also provides a layer of understanding of the data cells in the table. All of the attributes of the visual formatting of a table must have programmatic code equivalents for the non-sighted user. Luckily, Princeton's instance of the Drupal CMS will create WCAG AA compliant results if used correctly.
Best Practices
- Define column and row headers to add semantic understanding to the table structure
- Add a summary of the table's content and purpose for the non-sighted user that will be read aloud by their screen reader
- Avoid using tables as layout devices as the experience for the non-sighted user will be confusing
Don't do This
Inaccessible Data Table
This table was created from a sample on W3C's accessible table tutorial.
| Date | Event | Venue |
| 12 February | Waltz with Strauss | Main Hall |
| 24 March | The Obelisks | West Wing |
| 12 February | The What | Main Hall |
Why is This Wrong?
The table has no column or row headers defined in Drupal, even though we have created headers visually. In addition, there is no table summary. A sighted user can understand that data cells in this table relate to the topic in row and column headings. In addition, the a sighted user can understand the nature of the content as a listing of concert information with a quick visual scan, but the non-sighted user would have to start listening to the cells to determine if the information is useful because there is no table summary.
Do This
Accessible Data Table
This table was created from a sample on W3C's accessible table tutorial.
| Date | Event | Venue |
|---|---|---|
| 12 February | Waltz with Strauss | Main Hall |
| 24 March | The Obelisks | West Wing |
| 14 April | The What | Main Hall |
Why is This Right?
The table is fully compliant with WCAG AA standards and meets the success criteria 1.3.1 as it provides an programmatic equivalent level of access to the non-sighted user via a screen reader. There are row and column headers identified and a summary to describe the purpose of the data table.
Testing for Accessibility
Best Practice
The most important aspect of table accessibility is to define the column headers. We should also add row headers when they are present. In addition, we should add a summary of the table's content and purpose for the non-sighted user that will be read aloud to their screen reader. And lastly, we should avoid using tables as layout devices as the experience for the non-sighted user will be confusing.
Test
Use this tables bookmarklet or automated testing tool like WAVE to discover lists on a page.
- Do all visually formatted tables have <th> for appropriate columns and rows?
- Do all tables have an accurately defined summary?
- Have we avoided using tables as layout devices?
Exceptions
None.