Accessible Tables

There are two kinds of tables used on websites today: layout tables and data tables. 

Data tables provide a useful way to display the data so that the structure of the table can be communicated to everyone. Proper table layout allows people to understand meaningful data relationships and needs to have designated data headings. 

A layout table is a table used to provide some sort of visual structure to a page – sometimes people want to design columns on a page, set up a schedule, etc. When you use a table for anything but providing data, you are using a table for layout.  Layout tables are inadvisable. 

Note:  Read an article from the OIT Accessibility team about when to use a table.

1

Insert a Table

  1. Navigate to the the content you'd like to edit.
  2. In the WYSIWYG editor toolbar, click the Table icon. 

Table icon

2

Configure the Table for Accessibility

You will need to designate the table headers in order to make a data table accessible. Adding a caption or table title is also helpful. A complex table will need a summary.

If you did not initially set up the headers when you created the table, right click on the Table to open up the Table Properties again.

Set headers, caption and summary

Designated table headers

3

Recommendations:

  • Do not use tables to layout content.
  • Designate row and column headings in the tables properties.
  • Provide a table title or caption.
  • Provide summaries for complex tables.
  • For data tables that have two or more logical levels of row or column headers, separate the data into two simpler tables instead of one complex table.
  • Caption & Summary: A caption identifies the overall topic of a table and is useful in most situations. A summary provides orientation or navigation hints in complex tables.

Related Articles