Table of Contents

Accessible Tables

Markette Pierce Updated by Markette Pierce

Overview

Note the following tips when building tables with accessibility in mind, both in tools and in Canvas. In general, use tables to organize data; do not use tables to ease in formatting web page or document layouts.

Using Tables for Data Organization

To organize data, data should be organized under labeled columns and rows.

Table for organizing data.

Add Table Captions

Captions are table titles. They tell all readers what is inside the table.

To add a caption:

  1. Click on the table 
  2. Click on the left-most icon ->  Table Properties
Click on the left-most icon, which shows a drawing of a table.
  1. Under Table Properties, check Show caption ...
Table properties, check off "Show caption".

Or, add <caption>Descriptive Title</caption> after <table> and before <th>, <tr>, <td>, etc.

  1. Add the descriptive title in the space that comes up after you check Show caption.
A space will come up after you check off "Show caption" and in that space type the title of the table.

Assign Scope

The scope attribute adds context for screen reader users:

  • <td> = table data
  • <th> = table header

Add scope attribute to column and row headers.

Scope tells screen reading software the type of cell header and how it relates to the other cells 

  • <th style=”...” scope= “col”>
  • <th scope= “row”>
Create a Header Column
  1. Highlight the appropriate cells.
  2. In the Table menu, select Cell Properties.
  3. Under Cell Type, select Header cells.
  4. Under Scope, select Column.
  5. Align as you want and click Save. 
    Cell properties
Create a Header Row
  1. Highlight the appropriate cells.
  2. In the Table menu, select Cell Properties.
  1. Under Cell Type, select Header cell.
  2. Under Scope, select Row.
  3. Align as you want and click Save.

Alternatives to Tables

  • Make information into a list.
  • Include terms followed by definitions.
  • Use semantic headers to organize and highlight sections. 
  • Use horizontal lines <hr /> to chunk sections and add visual appeal. 
  • Use alignment options to float images right or left.
    • <image style=”float: right;”>
Do Not Use Tables for Web Page Layout

Using tables to layout content on a web page, or to make it look "nice," causes problems for accessible technology users. Below, the top image is inappropriate use of a table; the bottom layout is accomplished using html.

Examples of stuff arranged in tables and the same stuff not in tables.

Screen readers will read table metadata, adding unnecessary time and creating unnecessary complexity and even dissonance for users.

Content was excerpted from this presentation by John Packard.

Table Building Tools

Check out these Instructional Design Tools, including the table editor, that Hilarie Sit built.

How did we do?

Accessible Hyperlinks

Creating Accessible Microsoft Files

Contact