Strategies

Related Guidelines1: WCAG 1.1.1, WCAG 1.3.1, WCAG 1.3.2, WCAG 1.4.3, WCAG 1.4.5

Example of a Table in an Image Format

Tables can be a great way to organize information for students. However, if you use a table in a document, it’s important to make sure the table is accessible for your learners. Below, we’ll detail some important things to keep in mind for creating or including accessible tables.

But first, here are two ways to add a table to your document: you can add an image of a table, or you can build a table with the built-in editing tools.

  • To add an Image: Upload the image of the table you want to use to a document.
  • To use the built-in Editing Tools: Open the software you’re using to create a table and access the built-in editing tools to create the table.
Image Table

When using an image of a table, it’s important to keep in mind that learners cannot highlight individual words nor use a screen reader2 to read the contents.

As a solution, we recommend adding alternative text3 to make the table accessible to learners who use screen reader. How descriptive the alternative text needs to be depends on the purpose of the image. For more on this, review Alternative Text.

Just as when you use colors with text, with tables it’s important to use a color contrast tool. For more on this, review Color Contrast.

Built-in Editing Tools
Column 1Column 2Column 3
data celldata celldata cell
Table in an HTML format

Built-in editing tools can be a big help when it comes to making a table accessible for all learners. If you use the built-in editing tools provided by the software, such as Google Docs or Microsoft Word, the result is usually an HTML table, which a screen reader will know how to read. Note that you can also click on and highlight individual cells and words.

Here are a few tips to consider when creating a table with built-in editing tools:

Layout

If possible, only use tables for data or other information. As tempting as it may be, try to avoid using them for page design and layout purposes (e.g., to place elements in a certain way on a page).

Try to keep the table’s layout simple (e.g., a single header column, and/or row).

Finally, when possible, verify that the table makes sense when reading the cells from left to right, top row to the bottom row. If it does not, consider changing the layout, as learners who use screen readers may struggle to understand the information in the table.

If your table requires a more complicated layout with multiple layers of column and row headers, consider using a list instead.

Cells
Merge Cells, Split Cells, and Split Table Buttons in Microsoft Word

Manipulating or changing the cells in a table can complicate a screen reader’s ability to be effective.

Here are a few things to help make sure your table – and its cells – are accessible:

  • Try not to merge, span, or split cells.
  • Try to avoid using empty cells.
  • When possible, label the headers and associate those headers with the right rows and columns in the HTML (i.e. Scope4). For more information about Scope, see W3C’s Scope.

Finally, don’t worry! Some tools have a way to label and associate headers in the table properties without you having to go into the HTML. Since each tool does this differently, check out the Specific Tools section for more information.

Color

Whenever possible, we encourage you to use a color contrast checker tool. For more on this, review Color Contrast.

Specific Tools

Google Docs

To create a table in a Google Doc:

  1. Go to Insert > Table.
  2. Select the size of the table (e.g., 4×4, 3×2, 2×3, etc.).
Insert > Table in Google Docs

If your table spans multiple pages, you can make it so that the header row is always at the top by doing the following:

  1. Right-click the header row and select Pin header row.
Pin Header Row Option in the Right-Click Menu in Google Docs

For more detailed instructions on how to format tables in Google docs, see Add and Edit a Table in Google Docs.

Microsoft Word

To make a table in a Microsoft Word document:

  1. Go to Insert > Table.
  2. Select the size of the table (e.g., 4×4, 3×2, 2×3, etc.).
Insert > Table in Microsoft Word

Once the table has been inserted into the document, you can label the row header and associate it with the right cells (Strategy #8 in Strategies) by doing the following:

  1. Go to the Table Design tab
  2. Check the box next to ‘Header Row
Header Row Checkbox in the Table Design Tab in Microsoft Word

For more detailed instructions on how to create accessible tables in a Word document, see Create Accessible Tables in a Word Document.

Tips

Simple Tables

Simplicity is key: If possible, try to avoid using Google Docs or Microsoft Word documents to create complex tables. Keep the table design very simple, e.g., just a few rows with a single header row at the top. For why, see Context.

Accessibility Checker

Some programs can help you to search for and track accessibility errors. The following Microsoft products have an Accessibility Checker that generates a list of accessibility errors:

  • Word
  • Excel
  • Outlook
  • OneNote
  • PowerPoint

This technology is not perfect and cannot flag all errors. Because of this, if possible, we recommend doing a manual review as well.

For more detailed information about the accessibility checker in Microsoft Word, see Microsoft’s Improve Accessibility with the Accessibility Checker.

Getting the Hex Code of a Color in a Table

A hex code is a hexadecimal format for identifying colors, and it’s your friend when you’re trying to ensure a document’s readability for accessibility purposes. The hexadecimal format is a system used in HTML, CSS and SVG. Each hex code is unique to a specific color, with each 2 digits referring to the level of red, green, or blue in the color. Hex codes can help you ensure that your document, and specifically your table, has high contrast.

Image Table

If your table is an image that you did not create, the easiest way to get the hex code of a color is to download and use a browser plugin. Accessible Color Picker is one option, but there are other free tools available. With this tool, you can click on a color in an image and it will generate a hex code. If using Microsoft Word, this will only work if you open the document in a browser.

Built-in Editing Tools

When using the built-in editing tools to create a table, both Google Docs and Microsoft Word will provide the hex codes of any color you use.

Google Docs

For example, in a Google Doc:

  1. Right-click on any cell in the table, and then select Table Properties in the drop-down menu.
    • Alternatively, click into the table cell as if you were going to type, and then go to Format > Table > Table Properties.
  2. Open the Color accordion menu, where you should find the current colors for the Table Border and Cell Background Color. From the list, click the color you want to use to to get the hex code.
  3. For a custom color, click the Add a Custom Color button (+) at the bottom of the list under the “Custom” heading.
  4. A pop-up window will appear. The hex code of the current color should be listed at the top under Hex. As you change the color, the hex code adjusts accordingly.

This is one way to find the hex code in a Google Doc; however, anytime you see the color picker you can find the hex code. This applies to font colors as well.

Microsoft Word

In a Microsoft Word document:

  1. Click into the table cell as if you were going to type, and then go to Table Design in the Microsoft navigation.
  2. Under Table Design, go to Shading and then select More Colors from the drop-down menu.
  3. A pop-up will appear with a color picker. Go to the second tab, and the hex code of the current color will be listed next to Hex Color #.

This is one way to find the hex code in a Microsoft Word document; however, anytime you see the color picker you can find the hex code. This applies to font colors as well.

Context

Why use the built-in editing tools to create a table?

Some learners rely on screen readers to navigate files and the web. The only way for a screen reader to describe an image to the user is if the image has a text description in the HTML called alt text. For more information on alt text, refer to the Images section. Alt text may be sufficient for short and simple tables, but it can be challenging (and time-consuming) to describe more complex tables accurately.

Alternatively, if you create the table with the built-in tool in the software (e.g., Google Docs or Microsoft Word), it will likely be created cell-by-cell with semantic HTML and digital text. As a result, all learners would be able to highlight and copy individual cells and words, and a screen reader would be able to convey each cell individually and provide information about the layout of the table to the users.

There are exceptions; such as:

  • When you are not the creator of the table, an image might be your only option.
  • You are using a word processing software other than Google or Microsoft that has different functionality.
  • If the purpose of the table is decorative, and does not convey information.

If you are unsure what to do, contact us to schedule a consultation at cornellcti@cornell.edu.

Why use a simple table design?

Unfortunately, Google Docs and Microsoft Word do not currently have the functionality to make complex tables fully accessible, especially for learners who rely on screen readers. For a table to be accessible to a screen reader, the user needs to be able to label the headers and associate those headers with the correct rows and columns in the HTML. While you may be able to do this with basic table designs in these tools, it does not work with more complex table layouts.

Tip: In addition, the more complicated the table design and the more text on the screen, the less readable and memorable the table will be for all learners.

  1. These links are to the Web Content Accessibility Guidelines (WCAG) associated with the strategies on this page. Review Our Approach for more information about WCAG.
  2. A screen reader is a type of specialized text-to-speech assistive technology.
  3. Alternative text, also called Alt Text, is a text description associated with the image in the semantic HTML. Alt text is vital for screen readers, but may also appear to all users when an image is broken or doesn’t load properly.
  4. Scope is an HTML attribute in a table that labels a cell either as a column/row header or as a regular data cell. This is required for screen readers to interpret tables correctly.