Accessibility: Tables

Data Tables:

• have designated header row/column

• have a specified read order

•  have a caption

• avoid complexity​

To learn more about table accessibility, see WebAIM's Creating Accessible Tables webpage.

To understand how to properly create a table to make it accessible, you need to understand a bit about how tables can be used in websites.  There are two types of tables:

• data tables

• layout tables

A data table organizes data, it is the standard table with headers and information in each table cell; it usually has borders around each cell.  

A layout table is used to make content more visually pleasing and usually does not have borders.  If properly executed, either table type is OK for use in Springshare platforms.

Here is an example of each type of table.

Data Table

Animal	Mammal?
Dog	yes
Ant	no
Whale	yes

The data table provides the information in a format that is easy to read.

 

Layout Table

I like ice cream.

The layout table allows the author to put the image of ice cream next to the text without messing around with the HTML, which is nice.  

To make a data table accessible, the screen reader must know:

• what cells contain the header information

• what order to read the cells

• if the table has a title

The Springshare platforms codes all these things properly, provided the Table Properties are filled out appropriately.

 

Here is our data table from before.

Animal	Mammal
Dog	yes
Ant	no
Whale	yes

 

The Table Properties for this data table is seen here.

:

 

Headers

The Headers property tells the screen reader which cell has the header information, in this case the first row.  

The screen reader also determines the read order from the header information. It knows that because the rows are the headers, it should read the information across the rows, rather than up and down the columns.

Note: It is important that every field in the header row/column have text. Some authors prefer to leave the top-left cell empty.  A sighted reader may be able to understand the table without information in that first cell, but the screen reader user will wonder what is missing.

	Mammal?
Dog	yes
Ant	no
Whale	yes

If the table has introductory text or a title, that information is included in the caption property. This ensures the screen reader reads the introduction/title immediately before the table.

This means the table title is not included in the text above the table, but is provided by the actual caption.  You can modify the caption text as any other type of text.

Are animals mammals?

Animal	Mammal
Dog	yes
Ant	no
Whale	yes

 

Lots of rows and columns

Tables with a number of rows and columns are an accessibility challenge not because of the way a screen reader interacts with the table, but because they can be confusing for the user to understand.  Imagine listening to someone read a data table to you.  You can't just glance at the header to remember the table categories, you must ask the reader to go back and re-read the headers to you.  The more information in the table, the more information the screen reader user must remember to understand the table contents.  

While it is normal for a screen reader user to replay content, just as it is common for a sighted reader to re-read content, it is best practice to avoid long, dense tables.  If you suspect your table may be challenging for a sighted reader, it is even more confusing for the reader using a screen reader.

Complex tables can also be confusing for people with some cognitive issues.  There are no hard and fast rules as to how many rows and columns are too many; the author must use their best judgment.

Note: Research is often presented in complex data tables, and this is an accepted part of academia and cannot be avoided in research papers.  Complex tables in research papers do not necessarily violate ADA.  Also, complex tables are acceptable when modeling proper APA style or other academic research requirements.

 

Tables within tables

Do not embed tables within tables or multiple lines in one cell, or merge cells.  While these tables may look pretty, they require extensive understanding of HTML in order to make them accessible, and even then they are often confusing.

Unlike a data table, a layout table has no header information.  The screen reader reads the information in the order in which it is presented in the HTML code.  This is to say, left to right.  

While using a layout table is not best practice in web design, it is an acceptable way to create a nice visual text/image layout.  As long as the author bears in mind the way that a screen reader interacts with the table and avoids overuse of the tables, it is OK to use. 

 

Here is our example from before. (The image alt-text is "ice cream bars".)

I like ice cream.

For this layout table, the screen reader will say:

"I like ice cream.  

Image: ice cream bars." 

 

When there are multiple rows, the screen reader reads the first row left to right, then the second row left to right.

I like ice cream.
I like cake too.

For this example, the screen reader says:

"I like ice cream.  

Image: ice cream bars.

I like cake too.

Image: chocolate cake."

 

Here are the table properties for the sample table.  Notice there is not any content in the Headers or the Caption property fields.

 

In Springshare products, when the Headers is set to none, a screen reader ignores the table itself and reads the content within it in the order it is presented.

As there are a lot of Word documents on the various websites, included here is information on making Word data tables accessible.  The same requirements exist for Word data tables as for website tables.

 

Headers

Word allows only the first row to be designated as a header. 

To set the header row

1. Click the table, then select the Design tab in the Ribbon.
2. Check the Header Row box.

 

Merged Cells

One of the benefits of Word is the ease of making merged cells.  However, as with website tables, merged cells should be avoided. It is difficult to make the merged cells accessible.

You can see how a screen reader reads your table by tabbing through the table.  Put your cursor in the first cell, then press Tab on your keyboard.  The screen reader reads the cells in the same order as you tab through them.