Accessibility

Tables

Last modified 1/27/2022

Tables

Tables may be necessary to display data, but often can be confusing for people who rely on assistive technology to navigate through the data. Semantic table mark-up is important to allow assistive technologies to translate the header and data cells in the proper order.

Simple Tables

A simple table is a more accessible table than one that is complex. A simple table is a table that has one header row and one header column where the header column includes the type of information in the column. A simple table does not have merged cells. Screen reader users are able to navigate simple tables linearly by moving from table cell to table cell.

Example of a Poorly Designed Table

This table is what appears if you just add a table with the Insert/Edit Table Button, but do not add semantic markup. As it the following table is not very helpful to users of assistive technologies, such as screen readers.

NamePetColor
JenDogBlue
HeatherDogBlue
SamCatYellow
RyanTurtleYellow
Terry FishGreen
PamFishBrown


Screen Reader announces: "Table with three columns and seven rows. Name Column 1, Row 1. Pet Column 2. Color Column 3. Jen Column 1, Row 2. Dog column 2."

Example of an Accessible Table

  • Visually the Header Row and Column are more predominant than the data cells
  • Contains a caption which gives context of table
  • The top row and first column are marked as headers
  • Each header cell has a scope attribute added (the scope attribute has no visual effect, but can be used by screen reader users to help navigate a table)

The following table is more helpful to all users.

Favorites table

Name

Pet

Color

JenDogBlue
HeatherDogBlue
SamCatYellow
RyanTurtleYellow
TerryFishBrown
PamFishGreen

Screen Reader announces: "Table with three columns and seven rows. Favorites Table. Name Column 1, Row 1. Pet Column 2. Color column 3. Name: Jen Column 1, Row 2. Pet: Dog Column 2. Color: Blue Column 3."

For more complex tables (those with more than one column or row heading) or alternatives contact WEB.

Resources for Creating Simple Data Tables