Tables

Tables should be used to present data and not for formatting a page’s layout. An accessible table will generally have a caption, headers and scope attributes to define column/row headers.

Captions

Table captions are not required, but it is a good idea to use them. Captions are like a title for the table that describe the purpose.

Header Cells

Header cells are required for each header. Use the <th> tag. Both columns and rows can have a header cell.

Scope

The scope attribute tells the browser and screen reader that everything within a column that is associated to the header with scope="col" in that column, and that a cell with scope="row" is a header for all cells in that row.

The following image illustrates the table caption element, as well as table headers and scope.

This accessible table illustrates Caption, Header and Scope

The following image illustrates the HTML code of a simple accessible table. The caption is the first element within the table, and is required.

HTML code for a basic accessible table with a caption scope and column headers

The following example is of a slightly more complex table. We have header cells for both column and rows. We also apply the scope to both the columns and the rows.

The following image shows the HTML code for a table with both column and row headers.

HTML code for an accessible table with both column and row headers

Creating an Accessible Table in the WYSIWYG Editor

To create a basic accessible table using the WYSIWYG Editor, we’ll include a table caption and header cells. Each header cell will also have a scope attribute that tells screen readers that the header applies to an entire column or header.

Step 1 – Create a Table

Click the “Insert table” icon as demonstrated in the following example.

Screenshot of the Insert Table feature in the WYSYWIG editor

Step 2 – Add a Caption

As shown in the example below, in addition to choosing your table properties, check the “Table Caption” option and click “Update.” This will generate your table. Enter your caption in the top row of the table.

A screenshot demonstrating how to add a caption to a table using the WYSIWYG editor

Step 3 – Add Headers and Scope

The following example screenshot demonstrates how to add headers and scope to your table. Headers can be applied to columns, rows, or both. In this example, we are applying headers with the scope set to “Column” for each column. Setting the scope to “Column” tells screen readers to associate the header of the column with every cell in the column.

  1. Click the “Table Cell Properties” icon.
  2. Select the “Header” cell type for each header cell.
  3. Select “Column” for the Scope.
  4. Enter header text into appropriate cells.

A screenshot demonstrating how to add scope to a table using the WYSIWYG editor

Step 4 – Add Headers and Scope to both Columns and Rows

The following example screenshot demonstrates how to add headers and scope to your table for both columns and rows. This is the similar to the previous example, but we apply the Cell Type “Header” and “Scope” to the row headers in addition to the column headers.

A screenshot demonstrating how to add a scope to both columns and rows in a table using the WYSIWYG editor

Resources