Create Accessible Data 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 what 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.
Back to Accessibility Checklist
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.
Applicable WCAG Success Criteria
SC 1.3.1 Info and Relationships