Tables are a useful tool for organizing data—but when they are used for other reasons like page formatting, we run into accessibility issues. An easy way to ensure your tables are always accessible is to create them using VisionCMS—do not paste them in.

1. Use tables for data, rather than layout

When we use tables for page layout purposes, it breaks the structure of the page. This makes it difficult for screen readers to parse the different sections and content on a page.

Construction Projects Page Example:

Left Table (Before)

This table was used for both data and layout. The problems we see here are:

1. Too many blank cells - It would take a lot of time and effort for a screen reader user to access the data in this table, because the screen reader still has to read out each blank cell.
2. Each main project is made up of smaller project sites - For example, Anatolia I has: Anthology, Village 1, Village 2...) There is no way for a screen reader to skip cells since the page is not organized in a way that would allow that.

Right Table (After)

In the updated table, headings were used to break up the page into sections so that screen reader users could skip from project to project without having to listen to all of the sites. That way screen reader users have the option of hearing the project details if they so choose.

2. Always use headers and associate them with cells

Using headers and associating them with cells allows screen readers to reference the header that applies to each cell regardless of how far down in a table it lies.

A quick way to check that headers are defined and associated with cells is to test its reponsiveness. No matter how you shrink a table, the associated headers should stay with the cells they reference: 

To assign headers and associate them with cells:

1. Right click on the table > Table Properties
2. Go to the Accessibility Tab > Enter # of headings > Check Associate cells with headers > Click OK

3. Always include a table summary

Table summaries provide context when screen reader users encounter a table and how to navigate it.

To add a table summary:

1. Right click on the table > Table Properties
2. Go to the Accessibility Tab > Enter summary > Click OK