All about tables: creating accessible tables in MS Word, PowerPoint, PDF, and in Canvas

Tables can be a good way to communicate data trends in an accessible way. Try to avoid creating super complex tables as these are less understandable for people using screen readers. It can be beneficial to break complex tables into two or more simple table. To create accessible tables in your favorite application, look for the way to specify header cells, one of the essential features of an accessible table. An accessible table also should include a caption describing it or a heading about the table directly above it.
Here are some descriptions of creating accessible tables in different apps:
TOC


MS Word

  • To create an accessible data table in MS Word go to ‘Insert’ > ‘Table’ and draw out the table’s rows and columns.
  • header cell 1
  • header cell 2
  • header cell 3
  • header cell 4
  • col 1, row 2 data
  • col 2, row 2 data
  • col 3, row 2 data
  • col 4, row 2 data
  • col 1 row 1
  • col 2, row 3
  • col 4, row 3
  • col 4, row 3 data
  • Select the table and then click on the ‘Table Design’ widget. Enter the name of your header cells in the first row and make sure ‘Header Row’ is checked in the table Design settings.

Check out this How to Make Tables Accessible in MS Word video for more information and tips to make the tables accessible.


MS PowerPoint

  • To create an accessible data table in MS PowerPoint go to ‘Insert’ > ‘Table’ and draw out the table’s rows and columns.
  • header cell 1
  • header cell 2
  • header cell 3
  • header cell 4
  • col 1, row 2 data
  • col 2, row 2 data
  • col 3, row 2 data
  • col 4, row 2 data
  • col 1 row 1
  • col 2, row 3
  • col 4, row 3
  • col 4, row 3 data
  • Select the table and then click on the ‘Table Design’ widget. Enter the name of your header cells in the first row and make sure ‘Header Row’ is checked in the table Design settings.

Check out this Table Accessibility in PowerPoint video for more information and tips to make the tables accessible in a presentation.

 


Acrobat PDF

  • With PDFs, it’s best to correct table issues in the original source document that the PDF came from (like MS Word). If you don’t have access to the original source document, you can go ahead and fix the table in the PDF.
  • A common issue with tables in PDFs is not having true table header cells. To fix you can go to the Tags panel and manually change the <TD> into <TH> for each header cell.
  • Another issue with tables in PDFs is that the format cannot handle cells that span more than one column. So, You’ll need to redo your tables to have no merged or column spanning cells or else you’ll get an error in the accessibility checker. However, other formats like HTML can handle slightly more complex accessible tables. You can use HTML tables in Canvas course pags.
  • You may find that your table has regularity issues. Table regularity means that some rows have extra cells as compared to the normal amount of cells per row. You can fix table regularity issues by finding the rows with too many cells and deleting those with too many. Before deleting, be sure to move any content in those cells to the correct cells that they should be in.

Check out this How to Make Complex Tables Accessible in Adobe Acrobat Pro DC video for more information and tips to make the tables accessible in a PDF.

 


Canvas

  • To insert a table in a Canvas course pages, Edit a course page to get access to the table maker.
  • Click on the arrow next to the table icon and then choose ‘Table’.
  • Use the table tool to draw out your rows and columns.
  • A limitation of the Canvas table maker is that you can’t specify true table header cell in the editor, so you’ll need to go the code view and change the normal <td> cells into <th> cells.
  • Or you can use the accessibility checker in Canvas to sport and correct the table without a header row. Under ‘Set Table Header’ choose ‘Header row’ and then click ‘Apply’. Behind the scenes it changes the <td> cells into <th> cells. You could go to code view and copy and paste your newly created table code into a local .html text file if you want. Below is a screen of specifying a header row in the accessibility checker.
    Screenshot of specifying a header row for a table in Canvas.
  • The checker will also let you know if a table needs a caption and prompt you to add it. If the table has an H2 heading directly before it, then you don’t need a duplicate caption. Below is a screen showing the option to ad a caption to a table in the accessibility checker.

Screenshot showing the option to ad a caption to a table in the accessibility checker.

General accessibility tips for Canvas course creators

I have been using the Canvas LMS since 2016 when Ohio State switched the ‘Carmen’ learning platform from being powered by D2L to use the Instructure Canvas platform. I want to get people interested in doing accessible practices in their online Canvas courses and raise awareness of the upcoming deadline: April 24, 2026, when all materials produced by public universities should be accessible, according to the new ADA Title II regulations. I think it will take all faculty and staff at universities working together to meet that deadline. – Jon, 9/24/24


Canvas course material accessibility presentation for the Ohio Canvas User Group Conference


General accessibility tips for Canvas course creators fact sheet topics

[ General accessibility tips for Canvas fact sheet ePub coming soon ]

Here are some general web accessibility principals that Canvas course creators can keep in mind to make their course pages more accessible. These principles also apply to working with webpages in general, since course pages are in HTML format. Learning management systems and content management systems use similar WYSIWYG editors for updating the HTML content of a webpage.

TOC


Accessibility testing:

Check your course page with the built-in accessibility checker in the RCE (rich text editor):

Some learning management platforms, like Canvas, have built-in accessibility checkers. The one in Canvas can be found in the options of the course page rich text editor (RCE). To use it, edit a course page and click the accessibility checkers icon. An issues panel appears on the right side of your screen and will walk you through each issue and give you the opportunity to fix them. If an image is missing alt text, the checker will let you enter an alt description.
See this how to use the Accessibility Checker in the RCE article for more information. Below is a screen of the accessibility checker finding missing alt text.
Sscreenshot the accessibility checker in the RCE finding missing alt text.

Check your course page with the WAVE accessibility checker:

The WAVE tool is available as a browser extension for Chrome, Edge, and Firefox and will allow you to check your webpage for accessibility issues in one-click. The checker will show you exactly where the issues are in the code and provide advice on how to correct them.


Images

Add alternative text descriptions to your images:

Alternative text will describe the image to screen reader users and be seen by sighted users if the image can’t load. Focus on the meaning or purpose of the image rather than trying to describe every detail. In the Canvas LMS while editing a course page we can click on an image, click on the ‘Image Options’ button that pops up, and enter alt text in the Image Options pane that appears on the right-side of our screen.
Screenshot showing adding alt text in the Canvas RCE.
See this article about alt text and display options for images added with the RCE for more information.


Headings

Use headings properly:

Be sure to separate your content into sections, especially in longer articles, and use headings correctly. In the editor, it may appear that headings are like font sizes, but they are more for structural usage. You shouldn’t pick a lower heading size because you like the font size of it. Headings need to be properly nested in a heading structure where you shouldn’t skip heading levels. For example, you shouldn’t go from an H1 to an H3. That H3 should be an H2 to be properly nested in the heading structure. While editing a course page, you can change highlighted text to a heading by clicking on the ‘Paragraph’ menu in the rich text editor. Under that menu you’ll find several heading level options.
Screenshot showing that there are several heading level options under the Paragraph menu in the RCE in Canvas.

Here are some articles about using headings in the RCE:


Use of color

Make sure all text has sufficient color contrast:

Small or regular-sized text should have a contrast ratio of 4.5:1 and large text (bold and 18px or higher or normal and 24px or higher) should have a contrast ratio of a least 3:1. You can use the WebAIM Contrast Checker tool or the Colour Contrast Analyzer tool to find the color contrast ratio. Also, make sure no content or visuals rely on color alone to communicate meaning. Use other ways to differentiate visuals to aid color-blind users.
You can find out more about adjusting color contrast in this Color Contrast in Canvas article. This Adjusting color contrast with the accessibility checker article is another good resource.


Make sure your hyperlinks are descriptive and not just ‘click here’ links

Making link text more descriptive helps give context about where the link goes to. You could instead say, click here to learn more about (the subject…). Links should make sense out of context so if screen reader users land on them they will know where they go. Short phrases such as “click here,” “more,” “click for details,” are ambiguous when read out of context. Screen readers have key shortcuts that can jump between links in a page and using the tab key jumps between focusable objects like links & buttons. So, a screen reader user may not have read nearby text that would give a short ‘click here’ more context. You should include the context withing the link text itself.
See the Introduction to Links and Hypertext guidance from WebAIM for more information about writing descriptive hyperlinks.


Tables

Make sure you only use tables for tabular data:

Tables should only be used to show numerical data. They shouldn’t be used for layout like organizing out parts of the page into columns. In the late 1990s some designers used table-based layout which wasn’t an accessible practice and not responsive to smaller screens.
See this inserting tables using the Rich Content Editor article to learn more about working with data tables in Canvas.

Make sure your data tables have a header row specified:

Each label on a column should be a true header cell TH instead of a regular cell TD. In Canvas you can tell that something is a header cell by clicking in the cell while editing the post. Below the table if it says ‘TH’ in the tag tree it’s a header cell. For example, the tag tree at the bottom of the editor might say: ‘TABLE > THEAD > TR > TH’. This is in the lower left side of the editing window. If you know HTML you could also switch to the code view and check the first row’s cell tags. They should be TH tags rather than TD.

Below is an example of a table created in the Canvas RCE where a header row has been specified. Notice the different styling of the first row. Screenshot of a table in Canvas that has had a header row specified.
The RCE table editor doesn’t allow you to specify header cells. You have to use the accessibility checker in the RCE to do that. It will analyze the table you created and give you an opportunity to specify a header row. Here is a screen of specifying a header row with the accessibility checker.
Screenshot of specifying a header row for a table in Canvas.

The accessibility checker will ask you to add a caption to your table. If you already have a descriptive heading immediately above the table, an additional caption isn’t required.

Avoid using complex tables:

You should avoid using complex tables because they can be challenging to make accessible and confusing to navigate for screen reader users. It may be better to convert a large complex table into two or more simple tables.
See WebAIM’s article about Creating Accessible Tables for more information.

 


Additional resources about online course accessibility:

Beginner’s Accessibility with the Rich Content Editor
How to use the Accessibility Checker in the RCE
Color Contrast in Canvas – an article about adjusting color contrast in the RCE.
Adjusting color contrast with the accessibility checker  – a good resource on fixing color contrast issues in Canvas course pages.
Inserting tables using the Rich Content Editor  – an article about working with data tables in Canvas.