Tables
Table terminology and concepts
Before we make any recommendations about accessible tables, here are some important terms to know.
- Table header: a cell that describes the data contained in its column or row.
- If a cell describes the row it is in, it is called a row header.
- If a cell describes the column it is in, it is called a column header.
- Table caption: a title for a table that is visible to all users, such as 鈥淕rowth in Economics Enrollment, 2010-2020鈥.
- There are two mutually-exclusive reasons why you would create a table: to arrange tabular data, or to arrange the layout of your document. These are called a data table and layout table respectively.
- Data table: a table that contains tabular data, or data that has two different dimensions.
- Layout table: a table that is used to arrange content solely for visual effect, and does not contain tabular data. For example, using a table to display a series of images in a grid is an example of using a table solely for layout purposes. (This is an inaccessible use of a table, and is not recommended.)
- "Tagging" a table header: refers to a process of indicating within your content editing program (like Word, Excel, WebExpress, etc.) that a cell contains a row or column header.
- There are two types of tables:
- Simple table: a table with no merged cells, and no more than one set of column headers and/or row headers.
- Complex table: a table with multiple sets of column and/or row headers. Complex tables usually have merged cells to group together various row or column headers into larger categories.
Let's apply these terms to an example table.
听 | Spring 2021 | Fall 2021 | Spring 2022 | Fall 2022 |
---|---|---|---|---|
College 1 | 14,155 | 14,238 | 14,458 | 15,384 |
College 2 | 4,234 | 4,268 | 4,632 | 5,489 |
In the above table:
- "Spring 2021", "Fall 2021", "Spring 2022", and "Fall 2022" are column headers.
- "College 1" and "College 2" are row headers.
- "Student Enrollment by Semester and College" is the table caption.
- This is a simple table.
Here is an example of a complex table with the same data:
听 | 2021 | 2022 | ||
---|---|---|---|---|
听 | Spring | Fall | Spring | Fall |
College 1 | 14,155 | 14,238 | 14,458 | 15,384 |
College 2 | 4,234 | 4,268 | 4,632 | 5,489 |
Complex tables require more work to make accessible, and we highly recommend avoiding use of them whenever possible.
What are accessible tables?
An accessible table is one that can be accessed, navigated, and understood by individuals using assistive technology. Accessible tables should:
- contain appropriately tagged column and row headers.
- should be described in the page text or in a caption.
- should not be used solely for layout purposes.
- avoid containing empty cells (with the exception of cell A1 if you have a table with column and row headers).
Why are accessible tables important?
It can be difficult for a blind or low vision user to navigate a table using a screen reader if the table does not have headers. Navigating a table without headers as an assistive technology user is like playing a game of Battleship; the user moves from cell to cell without knowing where they are within the table, and without knowing the structure of the content.
Table headers help screen reader users keep track of which row and column they are located in as they read through the table鈥檚 data. If a header is labeled properly, then as a screen reader switches from one column to the next, the new header for that column will be announced to help users orient themselves.听
Content creators should also provide sufficient context for a table so that readers know what the table contains. This either requires the use of a table caption ("Table 1: EU Country GDP from 2010-2020") or a description embedded in the surrounding text ("The following table contains the GDP of EU countries from 2010 to 2020"). This helps all readers, and particularly assistive technology users who might not be able to infer the meaning of a table by glancing at its contents.
It is important to only use tables when they are needed for data, and not use them solely for visual formatting. Navigating tables using assistive technology requires extra steps that remove the user from the main flow of the text, and unnecessary use of tables breaks up the text and can cause confusion.
How do I make an accessible table?
First, ask yourself if this content should be displayed in a table. If the only reason you're using a table is for visual layout purposes, that content should not be presented in a table.
Content creators should always provide sufficient context for a table so that users know what the table contains. Tables should either be introduced within the text or have a title or caption that explains their content, like 鈥淭able 1: Number of web pages over time鈥. Some platforms have a specific way to add a caption (such as Canvas). In other cases, you may need to just add a descriptive caption immediately before the table in the text.听
You will need to find a way to tag header rows and columns within the content creation platform. A header row is a row of cells where each cell is the header for the column below it. A header column is a column of cells where each cell is the header for the row to its right. This is sometimes called 鈥scope鈥; you may need to set the scope of a header to 鈥渞ow鈥 or 鈥渃olumn鈥. Typically this can be done by highlighting the row or column and editing either the cell, row, column, or table properties.听
- Accessible Tables in Canvas with Cidi Labs (under the "Tables" heading)