Skip to main
Accessibility by Design

Accessibility by Design Tables

Universal Design Goal

Become comfortable with incorporating both Emerging and Developing Steps into your workflow in order to meet universal design goals for Tables.

Emerging Step - Designate a Header Row

Adobe Acrobat Professional DC

In order to add a table header row to a table in Acrobat DC, select the table and click on Table Editor in the Reading Order window.

Reading Order popup window with Table Editor selected

The table cells will be outlined in red and each cell will have a tag, either TH (table header) or TD (table data). The top row should be marked with TH and remaining cells should usually be TD.

This example shows what a table should look like in the table editor:

A good example of a table in Acrobat Table Editor, with TH across the top row and TD in all the remaining cells.

To make the top row to a header row, each cell must be changed individually. Right click on a cell and select Table Cell Properties.

Context menu for a cell with Table Cell Properties selected

Change the Type from Data Cell to Header Cell and set the Scope to Column. Repeat with the each of the top row cells.

Table Cell Properties window with Header Cell radio button selected and scope set to Column
If the first column is a header column, set the Type to Header Cell, but the Scope to Row.

Microsoft PowerPoint

To set the header row on a table in PowerPoint, select the Design tab in the ribbon under Table Tools.

Check the checkbox titled Header Row at the top left of the Design ribbon. If the table also has a header column, check the box titled First Column.

Table Design ribbon with header row and first column checkboxes

Microsoft Word

Table Properties

To define the header row on a table in Word in a way that benefits visual users as well as screen reader users, right-click on the top row of the table and select Table Properties.

Top row of table context menu with Table Properties selected

In Table Properties on the Row tab, check the box to Repeat as header row at the top of each page.

Table Properties Row tab with Repeat as header row at the top of each page checkbox checked.

Table Design Tools

Also make sure that the header row and/or column is set in the Table Design Tools. Setting the table headers here does not allow the header row to repeat on multiple pages but it remains important, especially when saving to another format such as PDF.

Select the Design tab in the ribbon under Table Tools.

Check the checkbox titled Header Row at the top left of the Design ribbon. If the table also has a header column, check the box titled First Column.

Table Design Tools with Header Row box checked

Websites

  1. Use tables for tabular data only, not as a framework for page layout.
  2. Keep tables as simple as possible, and try to avoid nesting tables inside one another.
  3. Add captions to tables using the <caption> tag. A caption will typically provide an adequate summary of the table’s contents. Complex tables may need a more detailed explanation using the <table> tag’s “summary” attribute.
  4. In the header row of the table, replace <td> (table data) tags with <th>(table header) tags to indicate the special function of those cells as column labels.

Developing Steps

Consolidate Header Rows

One problem you may run into is that there are multiple rows with header information in a table. In this example, there are three header rows with several merged cells. We need to simplify the information so that there’s only one header row.

Table with three header rows and one merged cell

The first step is to consolidate necessary header information into one row. There’s an extra row of merged cells just for “percent production.” This refers to the four cells beneath it, coal, petroleum, natural gas and other. If we add “percent production” into each cell of the next row, we can eliminate the extra row and also the merged cells.

Arrows indicating merging the information of two table header rows into one.

Now the table has only two header rows, but it hasn’t lost any of the information from the original table:

Table with two header rows instead of three. Merged cells are gone.

Move Title Information Out

Often, titles are included inside a table. However, these shouldn’t be part of the table itself.

In our example table, the first row is a single merged cell with the text “Table 3. Energy production by major source from 1960 to 1980.” This is clearly the title of the table. By moving it to a heading outside of the table, we can eliminate an extra row as well as merged cells.

Arrows indicate moving the top merged row out of the table to a heading above.

Now that the title has been removed, our table only has one header row. This table is much simpler and easier to read for everyone, including screen reader users:

Good example of a table with only one header row and a title above it.

Proficient Steps

Remove Non-Data

  • Tables are for presenting data. Any explanation of the table or extra details should be explained in the surrounding text, not within the table itself.
  • Move any text that is not data or header information outside of the table into a caption or table description.

Unmerge Cells

Merged cells usually exist for visual appearance, but they create confusion for screen reader users.

  • Repeat information in cells if necessary.
  • Leaving cells blank is not ideal for accessibility, but is better than merged cells.

Advanced Steps

Split into Multiple Tables

Splitting a table can eliminate merged cells, extra titles and other content that is not truly part of the table data.

To know where a table may be split, look for:

  • Blank rows
  • Extra title rows in the middle of the table
  • Rows with merged cells in the middle of the table

Move Remaining Extra Content

  • Move any remaining content of merged cells outside the table

Relevant Core Concepts

Long Description
Table Header Row