Step 7: Format Tables with Headers and Summary
Video Length
9:32
WHEN TO USE A TABLE
For accessibility purposes, you should only use a table to display tabular data. In other words, never use a table in order to make content look a particular way.
In the early days of the web, tables were frequently used for layout of content on a page. The problem with this use of tables, though, is that it interacts poorly with screen readers. When screen readers encounter a table, they read the top row left-to-right, then move to the next row, and so on. In a properly structured data table that follows all the advice on this page, that information is clear and easy-to-understand. Layout tables, however, are unclear and frustrating for users of screen readers. For instance, this video shows a screen reader user navigating an email that uses tables for layout Links to an external site..
Here is an example table used to layout the location of buildings on the Ball State campus. This table would cause significant accessibility problems.
| Ball Communication Building | David Letterman Communication and Media Building | Robert Bell Building |
| McKinley Ave. | McKinley Ave. | McKinley Ave. |
| Shafer Tower | ||
| McKinley Ave. | McKinley Ave. | McKinley Ave. |
This table also presents other accessibility issues beyond being a layout table. We'll talk about those in the next sections.
Imagine instead that this table was providing information about each building. In that case, it would be a correct use of a table.
| Building Name | Building Code | Academic Departments | Year Completed |
|---|---|---|---|
| Robert Bell | RB | English, Computer Science, Mathematical Sciences | 1984 |
| David Letterman Communication and Media | LB | Telecommunications, Communication Studies | 2007 |
| Ball Communication | BC | Telecommunications | 1988 |
For an example of proper table use in this course, see How to Write Accessible Alt Text.
ADD A TABLE CAPTION IN CANVAS
Adding a table summary through a caption helps all users know what to expect from the table. The goal is to provide context for what the user is interacting with. This serves a similar function to a title for your table. However, if you have a table title, make sure your caption isn't repetitive of your title. If your title explains enough about the table's contents, then you can not include a caption.
The quickest and easiest way to add a caption in Canvas is to insert a table using the table tool
Links to an external site. , then select the Accessibility Checker
Links to an external site.
from the bottom bar below the Rich Content Editor. The Accessibility Checker will tell you that your table should include a caption and give you the opportunity to add a caption.
Once you add a caption, it will appear at the top of your table. You can style it however you want, such as adding bold or italics. Note that if you try to hide the caption by selecting "Table Properties" and unchecking the "Show caption" box, this will remove the caption altogether, rather than hiding it from view.
ADD A HEADER ROW OR COLUMN IN CANVAS
Properly structured headers are critical to accessible tables. As we discussed earlier, screen readers read each row left-to-right. Depending on the user's settings, the screen reader may or may not read the appropriate header before each cell. For instance, in the "Ball State Campus Buildings" example table, a screen reader may read "Building Code LB" instead of simply "LB." This helps ensure that each cell's content is clearly understandable by users of a screen reader.
You can set a header row (first row of the table), a header column (first column of the table), or both. Header rows are the most common and work well for most tables, such as the "Ball State Campus Buildings" example. Header columns are quite infrequently used. Using both, however, can be helpful when the first column of the table is one type of information while the rest of the columns are a different type of information. Consider, for instance, a table showing which assignments need to be completed in each month.
| September | October | November | December | |
|---|---|---|---|---|
| Reading | ||||
| Quiz | ||||
| Essay | ||||
| Discussion Board |
In this example, the first column sets the type of requirement, while the remaining columns are months. Setting both a header row and column ensures the information is easily understood by users of a screen reader.
Just as with captions, header rows and columns are best set using the Accessibility Checker tool. When you open the Accessibility Checker after creating your table, you'll see the table caption first, then the next item will be the table header. From this dropdown, you can select a header row, column, or both.
ACCESSIBLE CELL CONTENTS
Accessible tables should have content present in every body cell. Leaving content out of a cell, even if that content is "None" or "N/A," harms the accessibility of the table.
For example, the "Requirements Due Each Month" table on this page has red X's representing No (with the alt text of "No"). If these same cells were instead empty, they would be skipped by a screen reader, causing confusion for those students.
Image or other non-textual content can also be tricky to include in a table. These checkmark and X icons representing Yes and No may be great for sighted users, but they aren't for users with visual disabilities. You can include images and use alt text (like in the "Requirements Due Each Month"), though this can be mildly frustrating for longer tables. A better option is to include both the text the image represents and the image (with the "Decorative Image" box checked so the screen reader doesn't read the image at all).
Also be careful about abbreviations and acronyms. Tables are already one of the harder elements for users of screen readers to navigate, and adding abbreviations and acronyms can make them even harder to navigate. This is particularly important when writing days or dates: spell out Monday instead of Mon., use November 23 instead of 11/23, and so on. If it's important that you use abbreviations or acronyms, there is an HTML element called <abbr> Links to an external site. which can be used to make abbreviations or acronyms accessible.
On the next page, we'll look at how to handle large or complex tables, such as course schedules.