Tables Concept

On this page:

Tables provide a layout structure to organize and present logical relationships. For example, if you had a list of days, a list of appointments on specific days, and a list of specific times for those appointments on specific days, it would make sense to organize the information in a table structure to clearly and accurately present that information.

Data tables require specific structural markup to designate the correct column and row header information. By identifying the appropriate column and row headers programmatically, individuals using assistive technology can then navigate and parse the table information in a logical manner.

Accessible tables include:

  • At least one row header or column header
  • A defined scope of each "header cell" (for row header or column header)
  • Add a brief caption or alt text (depends on the authoring platform)

Guidelines

  • Avoid leaving any cells empty as students who rely on screen readers will become confused as the cell will read aloud "Blank."
  • Try adding content to make it clear to students and use cell color to help differentiate content for readability. 

Tables are for data with identifiable headers. Table headers allow screen readers to easily navigate a table.

Table with header row

Table Anatomy
This is a table header This cell is another table header, specifically a "table header" with a scope as "column"
This is a "cell" Never leave a cell blank or merge cells!
This is a different "cell" in this column. You don't have to do anything special with these data cells.

Table with header column

Canvas Accessibility Participant Information
Name (Scope: Row) Jason Mamoa Patrick Stewart
Position (Scope: Row) Faculty Chief Executive Officer
Age (Scope: Row) 40 80

Table with header row & header column

Plant Growth (cm) with Various Fertilizer Amounts
Fertilizer
(Header Row/Scope: Column)
Trial 1
(Header Row/Scope: Column)
Trial 2 
(Header Row/Scope: Column)
No Fertilizer
(Header Column/Scope: Row)
5 9
Fertilizer A
(Header Column/Scope: Row)
15 25
Fertilizer B
(Header Column/Scope: Row)
28   30.7

Scope

If you are manually creating tables, don't forget to let students know if the header cell is a header row cell or header column cell. After defining the cell type as a header cell, define the scope as either "Row" or "Column".

Note:

  • If using any Microsoft programs, the scope will be defined automatically anytime you create a new table (for the latest versions of Microsoft).
  • In Canvas, If you are using an accessibility checker, such as the Canvas Accessibility Checker or Pope Tech, the scope will be defined for you! 

Caption

A table caption is a brief table description or summary. Students who rely on assistive technologies such as screen readers want to know why your tables are important and what they are about. 

Note:

  • If using any Microsoft programs, instead of a caption, you will need to add alt text to a table.
  • In Canvas, if you are using an accessibility checker, such as the Canvas Accessibility Checker or Pope Tech, the scope will be defined for you.
92108