Incorrect Tables


This page depicts violations of Success Criterion 1.3.1 Info and Relationships.

Back to Accessibility Checklist

Jump to correct usage of tables

Data Table

This table was created from a sample on W3C's accessible table tutorial. The table below has no column or row headers defined in Drupal, even though we have created headers visually. In addition, there is no table summary. 

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 a Violation?

A sighted user 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. 

How Do I Fix It? 

We fix the table by adding column and row headers so the non-sighted user's screen reader will announce the applicable headers before reading the data cell so the information is not out of context. In addition, we can add a brief description as a summary so the non-sighted user's screen reader can announce the nature of the table thus giving an equivalent experience.