Tables

Overview

Tables can be a powerful tool for organizing and presenting data. To make a table accessible, ensure that you:

  • Properly tag column and row headers.
  • Include a title and summary.
  • Make the table no more complex than necessary.
  • Avoid using a table for layout. Use it only for data.

Best Practices

Sighted users can often determine the purpose of a table quickly based on its column and/or row headers, but what about a screen reader user who cannot see the table? 

  • Tag column and row headers. A screen reader will read out the data cell-by-cell. Without tagged column and row headers, those cells will be read out without any context. 
  • Including column and row header tags will help orient screen reader users with where they are in the table by calling out the row or column that belongs to that cell.

Inaccessible Table Example

Screen reader demonstration of an inaccessible table.

Accessible Table Example

Screen reader demonstration of an accessible table.

Include a Title and a Summary

Titles and summaries are important for accessibility. Titles indicate the topic covered; summaries provide a brief overview and should include guidance on how to interpret the data. 

  • Screen reader users use them to decide if they want to engage with the material.

Do not use tables for layout

Some information (such as sentences) isn't meant to be in a table. You should not use tables to organize such information because it it isn't structured to work properly for people who use screen readers. Screen readers will announce to the user that there is a table, but since the table will not have proper column and row headers, the data will not make sense.

Instead of organizing information with a table, try using a two or three column layout instead. There are many layouts in Drupal, and other content management systems, that look like tables but aren’t coded as such, which make them compatible with screen readers.

Keep it Simple!

Many complex tables can be broken up into smaller, simpler tables. A simpler table allows for greater accessibility, and lower cognitive load for all users. 

Testing for Accessibility

Use this tables bookmarklet or automated testing tool like WAVE to discover tables on a page.

  • Do all visually formatted tables have <th> for appropriate columns and rows?
  • Do all tables have an accurately defined summary?
  • Was a table used as a layout device?

Exceptions

None.

Applicable WCAG Success Criteria

Resources