Tables

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

As a solution, we recommend adding alternative text³ 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.

Column 1	Column 2	Column 3
data cell	data cell	data cell

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:

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.).

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

3. Right-click the header row and select Pin header row.

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

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.).

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:

3. Go to the Table Design tab
4. Check the box next to ‘Header Row’

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

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.

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.

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.

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.

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.