Tables

Importance of Tables

Accessible tables are used for comparing information or data, rather than layout. Using a table for data, identifying its table headers, and providing a table summary, or description improves both the accessibility and usability for all people. This is especially important for those using assistive technology to access the table information.

Tables fall into two categories, data and layout.

Data Tables

Data tables provide a way to compare information in cells when used with properly formatted header rows or columns. Table headers allow people to navigate through the table and understand the relationship of data. Assistive technologies call out the headers when relaying the contents of the cell.

Sample Data Table

TimeEventPresenter
8:00 AMGlasses: The Ultimate Disguise Superman
9:00 AMPolygraph 101: Lassoing the TruthWonder Woman
10:00 AM10 Ways to Use Darkness to your AdvantageBatman
In a data table, assistive technology uses table headers (e.g., Time, Event, and Presenter) as reference points to help navigate the table.
Example: Assistive technology would read this data table for row 2 as “Row 3, Time, column 1, 9:00 AM. Event, column 2, Polygraph 101: Lassoing the Truth. Presenter, Column 3, Wonder Woman.”

Simple and Complex Data Tables

Simple Tables

Simple tables may have up to one header row and one header column. They do not have merged or split cells. When using assistive technology with simple tables it is easier to understand the relationship of the information and navigate through the table.

Most application formatting tools can only properly markup simple tables. When converting from one digital format to another, simple tables create fewer accessibility issues and less time remediating.

Complex Data Tables

Complex tables have multiple header rows and header columns, including merged and split cells. While assistive technology can navigate through complex tables when formatted correctly, complex tables can still hinder a person’s ability to understand the relationship of the information. In some cases, they must keep a mental framework of the complex table information in their head.

Complex tables need additional markup to make them accessible. This additional markup may not be available in standard application table formatting tools to support complex tables. When converting from one digital format to another, complex tables create more accessibility issues and additional time remediating.

Layout Tables

Using layout tables is discouraged. Layout tables are not meant for comparing information and do not have table headers. They are generally used to visually align content in specific places. It requires extra effort for people using assistive technology to understand and navigate through layout table content. Plus, on small screens, layout tables tend to hinder the alignment of content.

Sample Layout Table

BatmanBatmanSupermanSupermanWonder WomanWonder Woman
10:00 AM8:00 AM9:00 AM
10 Ways to Use Darkness to your AdvantageGlasses: The Ultimate DesignPolygraph 101: Lassoing the Truth
Layout table cells are read left to right, top to bottom.
Example: Assistive technology would read this layout table as “Row 1 Column 1 Graphic Batman, Column 2 Graphic Superman, Column 3 Graphic Wonder Woman. Row 2 Column 1 10:00 AM, Column 2 8:00 AM, Column 3 9:00 AM., Row 3 Column 1 10 Ways to Use Darkness to your Advantage, Column 2 Glasses: The Ultimate Disguise, Column 3 Polygraph 101: Lassoing the Truth.”

Common Errors

These common situations hinder the accessibility and usability of the content in tables.

  • Using a layout table to visually align or design your content.
  • Using a data table without table headers.
  • Having an empty cell in a header row or column.
  • Using heading levels, e.g., Heading 2 (h2), instead of table headers.

Best Practices 

Follow these best practices to improve the accessibility and usability of your tables.

  • Use tables for comparing data.
  • Create appropriate table headers (rows and/or columns) with application formatting tools or HTML tags.
  • Use simple tables (up to one header row and one header column) rather than complex tables (multiple header rows and header columns, including merged and split cells).
  • Use “0,” “no value,” “not applicable,” “left blank,” or other appropriate text rather than empty header cells to avoid confusion.
  • Use a unique table caption (HTML) or title/description (digital document) when describing the identity or purpose of the table.

Accessibility Checks 

Use this check list as a guide to ensure your tables are in an accessible format.

  • Tables are not layout tables.
  • Tables contain table headers.
  • Table header cells are not empty.
  • Caption or title/description identifies the name or purpose of the table.
  • Caption or title/description is unique for each table.