Posted on by Aimee Denoyelles

Make Tables Accessible with Header Columns and Rows

Quality Review Showcase

The Quality and High Quality online course reviews explore components proven to be best practices in online course design. This post showcases Quality item, “Tables include row and/or column headers.”

By: Roslyn Miller, Instructional Designer, CDL

Why is it important to designate header rows and columns in tables? Well, students with low vision or blindness use assistive technologies such as screen readers to access course content, and these technologies use HTML formatting information, including headers, to communicate table structure to users. Students who use screen readers greatly benefit from tables that are formatted with row and/or column headers because they make content easier to comprehend (See Figure 1).

Figure 1. Column and row headers. Table Source: Richard Plate’s EVR3008 Foundations of Environmental Studies

There may be times when you want to use a table, but headers do not make sense. For example, you may have a list of concepts students need to learn, and you want to arrange all the concepts in a three-column table to save space on the page. Even though this may save space, students using assistive technology may have difficulty processing this information being read aloud as a table. So if labeling headers rows or columns doesn’t make sense for a table, then consider providing the information in a non-table framework.

What are Some Ways your Online Course can be Designed to meet this Standard?

There are two parts to assigning header rows and columns in tables: (1) the header cells need to be identified and marked; (2) the appropriate data cells need to be associated with their corresponding header. The associated row or column of data cells are called the scope of a header.

Web Accessibility in Mind (WebAIM) has more detailed information about formatting tables with header rows and columns on its Creating Accessible Tables: Data Tables page.

What Does This Look like in a Real Online Course?

Example 1: Use U FIX IT in UDOIT

Excerpt from Emily Johnson’s ENC4265 Writing for the Computer Industry

Webcourses@UCF provides the Universal Design Online Content Inspection Tool (UDOIT) that faculty can use to scan their courses to identify and fix accessibility issues. Emily Johnson formatted existing tables in her course using the U FIX IT buttons right from her UDOIT scan report (See Figure 2).

Figure 2. UDOIT report U FIX IT buttons

The UDOIT report identifies each cell in a table that’s in a first column or row and not marked as a header. The UDOIT report allows you to properly label each header cell with one click! See Figures 3 and 4.

Figure 3. One-click labeling of the scope of a header cell.
Figure 4. Table properly formatted with row headers using U FIX IT in UDOIT

Example 2. Format Row Headers in a Canvas Table

Excerpt from Bendegul Okumus, HFT2750, The Event Industry

Bendegul Okumus formatted row headers for her Course Schedule using the Table tool in the Rich Content Editor in Canvas. Note the two part process: (1) label the cell as a header cell and (2) select the scope of the header, in this case row. Below are step-by-step instructions with screen clippings.

  1. Open the Editor; click in the cell to be marked as a header.
  2. Click Table, then select Cell >> Cell properties (See Figure 5).
Figure 5. Open Cell properties menu.
  1. To mark the cell: in Cell type, select Header cell.
  2. Select the scope of the header cell, in this case Row (See Figure 6).
Figure 6. Mark cell as header and specify Row as scope of header.
  1. Repeat steps 1-4 for each row header cell.
  2. Click Save to close the Editor before leaving the page. (See Figure 7).
Figure 7. Table with properly formatted row headers (not necessarily observable outside of the Editor)

Example 3. Format Column Headers in a Canvas Table

Excerpt from Center for Distributed Learning, Essentials of Online Teaching

Essentials of Online Teaching course developers formatted column headers for its Course Schedule using the Table tool in the Rich Content Editor in Canvas. Note the two part process: (1) label the cell as a header cell and (2) select the scope of the header, in this case column. Below are step-by-step instructions with screen clippings.

  1. Open the Editor; click in the cell to be marked as a header.
  2. Click Table, then select Cell >> Cell properties (See Figure 8).
Figure 8. Open Cell properties menu
Figure 8. Open Cell properties menu
  1. To mark the cell: in Cell type, select Header cell
  2. Select the scope of the header cell, in this case Column (See Figure 9).
Figure 9. Mark cell as header and specify Column as scope of header.
Figure 9. Mark cell as header and specify Column as scope of header.
  1. Repeat steps 1-4 for each row header cell.
  2. Click Save to close the Editor before leaving the page. See Figure 10.
Figure 10. Table with properly formatted column headers (not necessarily observable outside of the Editor).
Figure 10. Table with properly formatted column headers (not necessarily observable outside of the Editor).

References

Adobe. PDF Accessibility Repair: Examine and Repair Tables. Retrieved from https://www.adobe.com/accessibility/products/acrobat/pdf-repair-repair-tables.html

Canvas. (2020). Instructor guide. How do I use the accessibility checker in the rich content editor as an instructor? Retrieved from https://community.canvaslms.com/t5/Instructor-Guide/How-do-I-use-the-Accessibility-Checker-in-the-Rich-Content/ta-p/820

Center for Distributed Learning. (2016). Creating accessible tables in MS Word. Retrieved from https://cdl.ucf.edu/teach/accessibility/ms-word/tables/

Center for Distributed Learning. (2016). Creating accessible tables in Webcourses@UCF. Retrieved from https://cdl.ucf.edu/teach/accessibility/webcourses/tables/

Center for Distributed Learning. (2016). Universal Design Online Content Inspection Tool (UDOIT). Retrieved from https://cdl.ucf.edu/teach/accessibility/udoit/

Web Accessibility in Mind (WebAIM). (Sep 18, 2017). Creating accessible tables. Retrieved from https://webaim.org/techniques/tables/data

Navigation Menu