Creating Accessible Tables in Canvas

Tables are a helpful way to present complex data in an organized and structured way. Ensuring tables are accessible to all users, including those relying on assistive technologies, is essential for effectively conveying your information. The following tips will also help your tables look cleaner and more consistent!

Before using a table, make sure that it's the right way to display your information. Tables are best suited for presenting tabular data, where there are clear row or column headings and a logical relationship between the data. They should not be used solely for visual layout purposes.

Inserting a Table

Tables can be added to Canvas using the Canvas editor. Under the “Insert” dropdown menu in the toolbar, select “Table” and choose the number of rows and columns that you need for your data.

Table Headers

For screen reader users, headers serve as signposts, helping them navigate a table by explaining how the data is organized and how the information is related. Every table should include at least one header to clearly label the information in each column or row. Column headers are the top row of a table that contains the headings for each column. Row headers are the first column of a table that contains the headings for each row. Tables can have column headers, row headers, or both. Determine which of these best fits your table. 

To add headers, click anywhere in the table and open Design Tools by clicking the little rocketship icon in the top right of your page. In the top menu bar, choose the first option, “Edit Current Element.” Make sure that the “Table” option that appears directly beneath the menu is selected. Open the “Advanced” menu at the bottom. 

The first options that appear are checkboxes for column headers and row headers. If you want the top row of your content to serve as your headers, acting as the headings for each column, select the “Column Headers” checkbox.

If your table is better suited to have row headers, with the first column serving as your headers, select the row headers option on the same page:

If your table needs both column and row headers, simply check both.

Table Captions

Tables should also include a caption. Table captions are essential for accessibility, as they help screen reader users locate the table and understand its purpose before navigating through the content.

Adding a caption can be done in Design Tools, in the same area that you added your headers. Below the checkbox options for table headers is a checkbox option to add a table caption. Select this option, and a caption above your table with the text “Table Caption” will appear.

Replace this text with an appropriate description of your table. It should be brief and give a general idea of what information the table contains.

Other Optional Settings

There are a few other things we can do to make tables look even better and more readable.

“Zebra striping” a table means to color every other row in the table. This makes it much easier to read for all users. This is simple to do in Design Tools: in the “Advanced” table menu, under “Other Options”, select the “Striped Rows” option.

Design Tools also allows the table style to be adjusted in order to neatly space and more clearly present your information. Open the “Style” table menu. Under “Base Style”, select “Canvas”. For “Border Style”, select “All”.

And that's all - congrats on making an accessible table!