Accessibility Minute - June 2022
Note to screen reader users: In this month's newsletter, there is a complex table used for demonstration purposes that may not be fully accessible for all browser and screen reader combinations.
What Makes a Table Accessible?
The short answer is that an accessible table is one that can be accessed, navigated, and understood by everyone, including individuals using assistive technology.
More specifically, accessible tables should:
- contain appropriately tagged column and row headers
- be described in the page text or in a caption
- not be used solely for layout purposes
- avoid containing empty cells when possible.
This newsletter will focus on table headers in particular. If you'd like more information about the other recommendations, please consult the "Learn More" section at the end of the newsletter.
What is a Table Header?
A table header (not to be confused with headings in a document or web page) is a cell that describes the data contained in its column or row. If a header describes the data cells in its row, it is called a row header. If a header describes the cells in its column, it is called a column header.
In the following example table, the row headers are "Maymester", "Session A", and "Session B". The column headers are "Summer Session", "Weeks", and "First Day of Session".
| Summer Session | Weeks | First Day of Session |
|---|---|---|
| Maymester | 3 | Monday, May 9th |
| Session A | 5 | Tuesday, May 31st |
| Session B | 5 | Tuesday, July 5th |
So how should you tag a complex table with multiple rows of headers like this one?
| 2021 | 2022 | |||
|---|---|---|---|---|
| Spring Semester | Fall Semester | Spring Semester | Fall Semester | |
| Undergraduate | 12,439 | 14,209 | 13,029 | 14,385 |
| Graduate | 3,483 | 3,932 | 4,283 | 4,584 |
Unfortunately, most editing programs don't support proper tagging for header groups like "2021" and "2022" in the table above that span multiple cells. Additionally, complex tables often have blank cells in the upper left corner (as this one does), which is something we should try to avoid. For both of these reasons, it's usually best to split a complex table like this into two simple tables: one for 2021, and one for 2022.
Why Do Accessible Tables Matter?
If you visually interact with a table, your eyes will often scan back and forth between the column and row headers and the cell data. This helps you stay oriented as you look through the data so that you know what data series you are examining. However, what if you are unable to visually check what column or row you are in? When a user navigates a table with a screen reader, table headers are announced when you enter a new row or column to help the user stay oriented. Here's a video demonstrating how one screen reader interacts with a properly tagged accessible table.
However, if table headers have not been properly tagged, a screen reader user will encounter more difficulty with knowing which column and row they are in at any given point. Tagging headers can make a huge difference in the ability of a screen reader user to interact with your tabular data.
How Do I Make Accessible Tables?
It depends! Each and every content editor has a different process for adding headers to a table, and unfortunately, some platforms do not allow you to do so. That’s why the most important decision to make is deciding in which platform you will be creating your tabular content. Here is a short summary of features or the lack thereof in various popular editing platforms:
- Microsoft Word, Microsoft PowerPoint, and Microsoft Excel allow you to tag column and row headers for simple tables. Complex tables cannot be properly tagged and should be avoided.
- Canvas allows you to tag column and row headers for simple and complex tables. We recommend using the Cidi Labs interface to tag headers for simple tables. You will need to use the Canvas interface to tag table headers for complex tables, which can take some time to learn to use properly.
- WebExpress allows you to tag column and row headers for simple tables. Avoid creating complex tables in WebExpress.
- Google Docs, Slides, and Sheets do not allow you to tag column or row headers. When possible, avoid creating tables in these platforms. If you must, make sure to keep tables very simple and describe them adequately in the text.
June Challenge
Try creating an accessible table in whichever editing platform you use the most!
If you'd like to increase your awareness about table accessibility further, check out one of the links in the Learn More section below.
Learn More
DAO News
We have upcoming DAO office hours happening on:
- Monday, July 11 from 1-2pm MDT
- Tuesday, Jul 26 from 1-2pm MDT
Your Thoughts
We want to hear from you about any questions or issues you run into while trying out this accessibility practice this month! Please send us your thoughts on this month’s topic.
If you have questions or comments, or would like support with accessibility, please contact us at DigitalAccessibility@Colorado.edu.