Accessibility Tip of the Week: Include tables when using graphs

This week Robert Hardy, our district website accessibility specialist, shares about the importance of including data tables alongside graphs when sharing data online.

When preparing data for publication online, special care should be taken to ensure it accessible to everyone in our community.

Using Graphs

Graphs are a powerful tool for sighted users, enabling readers to gain a quick understanding of not only broad datasets, but data trends. For users of assistive technology, however, graphs alone can be a challenge as they are generally created as static images containing text (this blog post covers the perils of images containing text).

Include true tables

To use graphs accessibly, it is critical to include the corresponding dataset in a table alongside the graph.

When including the data table, be sure not to include a screenshot of the table, as this once again returns to the issue of being an image of text. Rather, copy and paste your data from an existing document, or create a table in Word or Google Docs by going to Insert > Table.

Example graph, table included below
CityTuesdayWednesdayThursdayFriday
Seattle58615961
Olympia61636264

Mark table row and column headers

When reading a table, users will glance up or to the left to see column or row headers. These titles allow a reader to comprehend relationships within the data. Unfortunately, unless these titles are programmatically defined, perceiving such relationships while using assistive technology can be incredibly laborious.

3 empty table examples. The first table contains no headers. The second table includes a header row. The third table includes a header row and column.

Microsoft Office

To mark a column or row title in Microsoft Word or PowerPoint:

  1. Select the table.
  2. Go to the Table Design ribbon.
  3. Ensure Header Row and First Column are selected appropriately. Header Row signifies a row of column titles, while First Column denotes row titles.

If your table spreads over multiple pages, you will also want to ensure Repeat Header Rows is selected under the Table Layout ribbon.

Google Docs

Users of Google Docs can use Grackle Docs to create accessible tables:

  1. Open the Grackle add-on by going to Add-ons > Grackle Docs > Launch. The Grackle Docs add-on will launch on the right side of the screen.
  2. Grackle will recognize that a table has been included without a header row or column. The error will appear as “Tables must be tagged or marked as layout tables.”
  3. Click “+Tag” beside the error to enter the Tag Table menu.
  4. In the Tag Table menu, select the appropriate options from the “Mark first row as header” and/or “Mark first column as header” options.

If you are preparing data for publication, or have any other accessibility tips or questions, please reach out to Robert Hardy, the district’s Website Accessibility Specialist.