Tables

Skip to page content

Tables

The Canvas Rich Text Editor includes a visual interface for creating or editing tables. This means all tables can be added and maintained using both the Rich Text Editor and the HTML editor. If you are new to creating data tables, please review the Table Accessibility course.

How does a screen reader user know a table is a data table?
Screen reader users analyze the HTML markup and page structure to deduce a data table is present. When the proper HTML code is applied, screen reader users can navigate through each cell, hearing the column and row headings spoken aloud.

WCAG 2.0 Guideline 1.3.1 A Links to an external site.

Sources

Overview

Download the Download unremediated Accessibility Quick Start Guide - Tables

 prior to starting this module.

Use tables to demonstrate data relationships. Do NOT use tables for visual layout. The goal is to relay information as directly as possible to represent relationships between data in a grid-like format.

Best Practices

  • Use tables to demonstrate data relationships, and NOT for visual layout.  Otherwise screen reader users will expect to navigate data relationships and may be confused by the content and layout.
  • Avoid large or complex data tables by dividing them into smaller, individual tables.
  • Don't use fixed-width or fixed length pixel sizes for table elements.  When magnified, data relationship can become unrecognizable or break.  Instead specify table and cell widths using percentages.
  • Don't use a table if there is only one column.  Instead, consider using a list.
  • Do not merge cells, columns, or rows. Keep tables as simple as possible.
  • If the table is irregular, or uses symbols to designate empty cell content, provide descriptive information about your data table's organization and content in the SUMMARY attribute: summary="If this was an irregular or complex table, the summary attribute would be used here."
  • Use the caption element to provide a title for a data table <caption>Table Title</caption>.
  • Provide column and row headings using the table header: (<th></th> element.
  • Specify column and/or row heading scope (scope="column" or scope="row").

Create Table Heading

  1. Highlight the first row of the table and select the "Table Design" option from the RibbonHighlight the first row in the table. Select Table Design in the Ribbon
  2. Select "Header Row" and "First Column"Select the checkboxes Header Row and First Column
  3. While the first row of the table is highlighted, right click on the table and select "Table Properties"Highlight the first row of the table and right click in the table. Select Table Properties
  4. Under the "Row" tab, make sure the following options are selected: "Allow row to break across pages" and "Repeat as header row at the top of each page"Select the Row tab. Make sure both options are selected

Add Alternative Text

  1. Under the "Alt Text" tab, enter the alternative text in the "Description" field.  In this case, the alternative text can be "Lectures and Associated Media"
  2. Select "OK"Select the Alt Text tab. Enter the alternative text in the Description field. Select OK

Reading Check

Use the discussion button below to start or view discussions related to this workshop.

Reading Check