1. Home
  2. About
  3. Departments And Offices
  4. Instructional Services Division
  5. Online Learning Pathways
  6. Faculty
  7. Accessibility Welcome
  8. Lets learn about accessibility
  9. Tables Concept

Tables Concept

Tables and Accessibility

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 includes:

  • Apply at least one row header or column header
  • Define the scope of each cell as "header cell" (for row header or column header)
  • Add a brief caption

 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.

 

Table Examples

Table header examples

Tables are for data with identifiable headers. Table headers allow screen readers to easily navigate a table. Canvas automatically bolds the headers, which helps us easily interpret table information. 

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".

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. 

92108