Tables: Headers & Captions

Table Header Basics

Tables convey information spatially by organizing data in a grid but students with sight impairments can't benefit from this visual illustration of the relationship between cells. To make tables usable by everyone, they need HTML markup that indicates header cells (describing the category of data in that row/column) and data cells.

Because tables add an additional layer of complexity to a page, it is preferred that tables be reserved for use when organizing data and not simply for formatting (e.g., avoid putting an image and a caption in a 2-celled table to create a page banner).

In the majority of data tables, column headers are needed. Some tables need both column and row header cells indicated, as shown below.

The example table below shows column header and row header cells.

Canvas' Accessibility Checker

The Accessibility Checker tool in Canvas does a great job of walking you through how to make a table accessible. Once you've got your table on the page, follow these steps.

1. Click the Edit button and reveal the Rich Content Editor.
   
   
2. Click the Accessibility Checker icon (the "little person" icon) in the lower RCE toolbar.
   
   
   
3. You'll be prompted to add a descriptive caption to your table; then click "Apply."
   
   
4. You'll then be prompted to set table headers. Choose Header row (if data is arranged in columns) or Header column (if data is arranged in rows) from the dropdown menu and click "Apply."
   
   
   
5. Save the page.

Table Demo

Put It Into Practice