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.

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.

*Ball State Campus Buildings*
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 , then select the Accessibility Checker 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.

*Requirements Due 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> 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.

Quick Recap

Use tables for data display only, and always add a caption and header row/column using the Accessibility Checker in Canvas.

Further Reading