Tables

Problem

Tables are sometimes structured in a way that causes cells of data to be read out of order by a screen reader. Never use data table markup to create layout tables.

How to Fix

Simple Data Tables

Simple data tables contain cells of data with one associated header row and column.

  • Always use proper table markup to present tabular information. At minimum, this should include the table, table row (tr), table header (th), and table data (td) elements.
  • Consider using the caption element to provide the title of data table.
  • If defining a width, use relative values.

Complex Data Tables

Complex data tables are not restricted to having one header column and row for each cell of data. These tables are considered less accessible than simple tables. 

Layout Tables

Although WCAG 2.0 does not prohibit the use of layout tables, the guidelines recommends the use of CCS-based layouts over table-based layouts.

  • Never use data table markup in a layout table (e.g. scope, caption, summary attribute, and table header (th) elements)

Things to Avoid

  • Avoid spanning rows and columns. Many screen readers cannot properly read this data.
  • Avoid defining cell heights. This allows a cell to expand with its content.
  • Do not duplicate the same information in the <caption> element and summary attribute of a data table.
  • Do not use white space characters such as space, tab, line break, or carriage return to create a table in text content.
  • Do not use the pre element to markup tabular information.

External Resouces

  1. Understanding Success Criterion 1.3.1 Info and Relationship (Level A)
  2. WebAIM Guide on Creating Accessible Tables
  3. Penn State University Accessibility Guide to Data Tables in HTML