Visual Accessibility: Tables

In this section, we provide guidelines and recommendations for formatting tables.

What are tables?

In this context, tables refer to “data tables,” which include row and/or column header information to categorize content. (Tables that do not have headers are called “layout tables.”)

File types include: DOCX, HTML, PDF

In general, for accessibility purposes, tables used for layouts should be avoided. Make sure that your tables are intended to convey information based on column and row, keep in mind that screen readers tend to read horizontally rather than vertically, and avoid having blank cells. Also, avoid merging or splitting cells. Screen readers move left-to-right, top-to-bottom, one cell at a time, and because a screen reader does not repeat a cell, merging or splitting cells can affect the reading order of a table.

Make every effort to keep data tables as simple in structure as possible. The more complex the design of a data table, the less accessible it will be for some students using screen-reading technology to access their textbook materials.

Table Concepts provide some help in marking headers in tables and include more complicated table structures and ways to mark up tables with merged cells, but it is generally best practice to avoid these structures whenever possible.

What do you need to do?

In the same way that your content hierarchy needs headings and structure (see the chapter on Styles), tables need a properly defined structure to be accessible. This means that you must add row and column headers to define the different sections of data. Screen readers read tables horizontally—cell by cell, row by row—and row and column headers help give context to the data in each cell for students who are blind, have low vision, or have a cognitive disability.

An accessible table includes:

1. A table title or caption
2. Maximum of one row of column headers and/or maximum of one column of row headers, with the appropriate scope assigned
3. Avoidance of merged or split cells
4. Adequate cell padding for visual learners

Create Accessible Tables on Webpages and Canvas

The following example and instructions apply to creating accessible tables using HTML and applies to creating tables on Canvas and web pages.

How to mark cells and rows as headers on Canvas (and other web pages)

As with section headings, it is not enough to bold or enlarge text in table cells that you want to be marked as headers.

If you are familiar with HTML, you can go into the text editor and change tags to tags. Row-header tags are given the scope="row" attribute and column-header tags get a scope="col" attribute.^[1] See Example 2 for how to create an accessible HTML table.

For those not comfortable with HTML, here is how you create table row and column headers in Canvas.

1. Create your table and fill the cells with data.
2. Select all of the cells that will be your column headers. (This should be all cells in the first row of your table.)
   1. select the table icon from the top menu of the Visual editor: Table icon > Cell > Cell properties.
   2. set the “Cell type” to “Header cell.”
   3. set the “Scope” to “Column.”
3. Select all of the cells that will be your row headers. (This should be all cells in the first column of your table, except for the cell in the first row, which has already been marked as a column header.)
   1. select the table icon from the top menu of the visual editor: Table icon > Cell > Table cell properties.
   2. set the “Cell type” to “Header cell.”
   3. set the “Scope” to “Row.”

How to create a table caption

Select your table, click the Table icon > Table Properties and check “Show Caption.” Select the space directly above the center of the table you created and type your caption.

Creating Accessible Tables in Word and Google Docs

In both Word and Google Docs, header rows and columns can be marked after table creation. You can also add a title or caption.

Word

Create or select within the table you wish to edit.

1. Under the “Table Design” tab across the top, you will see a series of check-boxes. Check ether the header or first column box or both as appropriate to your table content.
   

   

2. Right-click on the table, and go to “table properties.” Across the top will be the option for “alt text,” and you will be able to add a title (which will serve as a caption) and a description. The description is optional.
   

   

Google Docs (with Grackle)

Unfortunately, Google Docs does not offer the ability to tag rows as headers on its own, though you can right-click in the header row and select “Pin Header Row” for a general workaround.

However, there are several “extensions” that can be installed for Google Docs (and the rest of the Google Suite) that can add this capability. One of the most widely used options is called Grackle, or Grackle Docs. (Grackle sometimes has difficulty running in the browser, depending on the operating system. It seems to work fine on Mac OS and Windows computers, but sometimes has difficulty in browsers running various iOS options such as on Chromebooks or Tablets).

Here is how to install it (it is free):

1. Go to the Extensions menu, choose “Add-ons” and then “Get Add-ons”
2. Search for Grackle Docs and choose “Install.” Walk through the permissions menu.
3. Go back to the Extensions menu and choose “Grackle Docs -> Launch.”

Grackle Docs will run a script checking for accessibility and pop up with a column on the right side of the browser listing areas that pass the checks and areas to work on.

One of the things it will check is the tables. Selecting the “Locate |+TAG” button within the description of the tables will bring up a new window.

Within the window, you will have the option to “tag” the first row and first column as headers. Then choose “Update” in the bottom right of the Window.

At this time, there does not appear to be a good way to add a caption or title to a table in Google Docs, so be sure to set up or introduce an included table well.

Accessible Sheets in Excel and Google Sheets

What about using a spreadsheet? What are the best practices for files which are completely tables?

The same basic principles as tables apply, but there are a few other details to consider:

• Avoid merged or split cells,
• Avoid blank cells within the working section of the spreadsheet, especially for Cell A1
• Include alt text with any embedded visuals
• Ensure hyperlinks have meaningful text concerning where the link directs to
• Use sufficient contrast
• Give worksheets unique names and delete blank worksheets
• In Excel, name cells and ranges if they go together as a group
• If you choose to create a table out of the Data, make sure relevant header rows and columns are tagged

To add a named range, choose the Formula tab and the Name Manager.

Then, choose to add a new Named Range, and include the name or caption and the description (which can also act as a kind of alt text.)

On desktop versions (rather than the web-based version of Excel), you will also be able to determine whether the scope of the range applies to only one worksheet or crosses worksheets.

Google Sheets (Using Grackle)

Grackle Sheets can be installed on Google Sheets in the same way as Grackle Docs. (Grackle sometimes has difficulty running in the browser, depending on the operating system. It seems to work fine on Mac OS and Windows computers, but sometimes has difficulty in browsers running various iOS options such as on Chromebooks or Tablets.)

Here is how to install it (it is free):

1. Go to the Extensions menu, choose “Add-ons” and then “Get Add-ons”
2. Search for Grackle Sheets or just “Grackle” and choose “Install” the extension. Walk through the permissions menus that appear.
3. Go back to the Extensions menu and choose “Grackle Sheets -> Launch.”

This will run an accessibility checker, and allow you to mark as header rows, columns or both for each table (which, in practice, should be for each sheet).

Using TablePress (in Pressbooks)

As you add your table in table press, make sure to follow best practices for tables in general – mostly the same as above. For instance, include alt text for images, use descriptive links, and avoid blank cells.

To make sure that the header rows/first row/column headers are marked correctly, select the checkbox saying “The first row in the table is the table header” on the edit page for the table, as appropriate.

Include a clear table name and description at the top of the edit page and have them visible above or below as desired, by choosing the relevant check-boxes.

There is no option within the Edit Table page to make the first column into headers, however. To mark a table’s first column as row headers, instead, you need to add the information to the shortcode when the table is inserted into the text. Within square brackets, you normally would include “table is=N” where the N is the table ID number (and without the quotation marks. However, to mark the first column as a header column, you would say, in square brackets, where N is the table ID number:  “table id=N first_column_th=true /”  (again, without quotation marks).