A table is a great way to organize and present data. Visually, the grid format allows users to see results at a glance and it makes it easier to digest the information. Assistive technologies rely on certain structural elements of a table to accurately depict the content in the table and provide context to users.

Include a header

The first row of a table should state what information will be found in the column below. This header row allows screen readers to navigate the table easily. Check out this example of a simple table with a clearly defined header.

ExamPoint ValueDue Date
Exam #1100September 30
Exam #2100October 30
Final Exam200November 30

By default, Tablepress, the plugin used in our WordPress theme sets the first row of any table to be the header.

Use a simple structure

It’s important to keep the structure of a table relatively simple, otherwise, it will make it extremely difficult, if not impossible, for assistive technologies to relay the information. Take this table for example — while it has a clear header row, the lack of consistent structure across cells makes it difficult to comprehend the information, even for those not using assistive technologies.

ExamPoint ValueDue DateNotes
Exam #1100
-50 multiple choice
-50 short answer
September 30
Exam #2100
-100 multiple choice
October 30
this exam will be taken virtually
Final Exam200
-150 multiple choice
-25 true or false
-20 fill in the blank
-5 short answer
November 30

Grades will be posted on December 1

Here are some tips for formatting your table:

  • Don’t put multiple data points/content in one cell
  • If possible, don’t leave cells blank. This could confuse someone using a screen reader as it could present itself as the end of the table.
  • Leave cell info left-aligned as you would the start of a new paragraph

Separate data

For those using assistive technology, it’s critical that each data point has its own cell. If not, the content could be read out of order and confuse the user. It also makes for a better-looking table when content is separated out individually! Here is an example of a form that includes multiple lines of information in one cell using line breaks:

Fall TermSeptember 30
October 30
Winter TermJanuary 30
February 28
Spring TermApril 30
May 30

The form should look something like this instead:

Fall TermWinter TermSpring Term
September 30January 30April 30
October 30February 28May 30
  • Each separate piece of data should have its own cell
  • Don’t nest tables within tables. Always start a new table whenever the topic changes
  • Never use line breaks (shift + return) in place of an additional table row

Add a description

It can be time-consuming for a screen reader to go through an entire table. By adding a short summary of the table’s contents to the description field, the screen reader user can decide if they want to read the table in its entirety based on the table description that is read first. You can choose if you want to display this description on your webpage along with the table or not.

Things to avoid

  • Don’t embed an image/screenshot of a table in place of an actual table
  • Never use tabs or spaces to create the look of a table
  • Don’t leave cells blank — if there’s no content that exists simply put “none”
  • Don’t merge cells

Check out more table accessibility tips and tricks.