Overview
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.