Flyout Menu

LXD Style Guide

iPD’s Guide for Course Design & Development

Tables

Standard

The standard with which Michigan Virtual courses need to comply. 

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Alignment

WCAG

WCAG 2.2 A 1.3.1 Info and Relationships

Requirements 

What exactly do course developers need to include in order to comply with this standard? 

This standard relates to the way that elements on a page are perceived. Whereas a sighted user can tell the relationship between various cells in a table (i.e., columns and rows) due to their visual arrangement, a user engaging with the content using a screen reader would not necessarily have the same experience. Therefore, we need to ensure that tables are marked appropriately so that a screen reader can correctly read them. Our tables should meet the following standards: 

  • Tables should be created using the table editing features of whichever platform they’re created in (e.g., Google Docs, Microsoft Word, etc.). For example, in Google Docs, you’d select “Insert” and “Table.” 
  • If possible, provide a caption for the table briefly explaining the content of the table. The HTML tag <caption> </caption> can be used to associate the caption to its table.
  • Heading rows or columns need to manually be identified using the editing features of the platform. For example, in a table where one of the columns consists of dates, the cell in the top row of the column should be labeled Dates, and it should be tagged as a heading. This will associate the heading Dates with each cell found within that column. In the example below, the heading row has been visually identified for sighted users with a colored background, but it has also been tagged as a heading row to ensure that a screen reader would announce it as a heading to non-sighted users.
Dates
1/1/2023
9/1/2023
  • Merged cells should be avoided to the extent possible.
  • Where possible, avoid using tables used solely for layout purposes (i.e., if something looks nicer in a table but the table does not really show the relationship between the items within the cells). 

 

Implementation 

How can course developers implement this standard? What is the process for doing so?

  • When creating documents in Google Docs, run the Grackle Docs extension and use its built-in Table Wizard to ensure all tables are properly tagged. For more information about the Table Wizard, consult the following video: Tables Tutorial 2019.
  • When creating documents in Microsoft Word, use Microsoft’s table editor to properly tag a table. For more information, see the following video: Create accessible tables.
  • When creating tables in CourseArc, use CourseArc’s table editor to tag the table. More information can be found here: How do I add a table with headers in a content block?
  • When creating tables in Brightspace, use the table editor within Brightspace’s HTML editor to create and tag tables.
  • Tables can also be manually tagged with HTML. For more information, see the following resource: Tables (Deque University).

 

Resources

What resources would help a developer implement this standard appropriately?