Data vs. Layout Tables

Estimated reading time: ( words)

Summary: Accessible tables are simple, rather than complex, have an identified header row, and include a table summary, either as a caption or as alt text. These techniques help screen reader users read the information contained in the table.

This article helps you understand the difference between the two types of tables, as well as the general principles of accessible tables. In general, you should use tables to display data rather than as a way to make your document or webpage look the way you want it to.

Layout Tables

Layout tables are used to position elements in a document. Layout tables do not represent or imply any relationships among content.

Reading Order

Screen readers will read the content of a table in a linear fashion — left to right, top to bottom. Verify reading order by tabbing through the tables and confirming the progression is logical. An example, courtesy of webaim.org, here’s an example of a table used for layout:

Here is the same table with numbers that show you the order in which a screen reader reads the table. How much sense does it make to you?

Be thoughtful about using tables for layout in your documents – they could make your document more confusing for some people.

While these tables can be hidden from visual users by simply eliminating the borders between cells, they cannot be hidden from screen readers in MS Word. This prevents users with low vision and learning disabilities from attempting to understand the information presented.

Data tables

Data tables are grids that show the relationship between two or more items, in rows and columns. Use simple tables wherever possible. Complex tables that include nested tables or that require two rows in order to explain the information contained in the columns, are more difficult to tag for accessibility. Consider this example:

Noble gases and their atomic numbers

Noble Gas

Atomic Number

Helium

2

Neon

10

Argon

18

Krypton

36

Xenon

54

Radon

86

Complex tables that include nested tables or that require two rows in order to explain the information contained in the columns, are more difficult to tag for accessibility.

Screen readers read the content of a table left to right, top to bottom, and they should have no problem reading the content of this table as long as the header row has been identified (see below).

Complex tables, on the other hand, are created any time you have tables nested within tables; when cells are unpredictably merged, or when data requires more than one row to make sense of the content.

It is recommended NOT to use tables nested within tables or tables with randomly merged cells. However, you can still use a complex table in your document if the reading order of the table is logical. You can verify the reading order by tabbing through the table cells.

Data versus layout tables

This table contains the exact same core content as the previous example of a well made table, but it has been stripped of the formatting that made it accessible. This table does not include a caption that informs readers about the what this content is. This table is also missing the row and column headings that helped readers identify what each cell in the table means. The last column is a single merged cell that identifies the criteria that needs to be met to receive a certain letter grade. While this column certainly contains helpful information, it would be very confusing to a screen reader user because all of the information is contained in one large cell.

Tables should not contain merged cells as they are difficult to navigate with screen readers.

Picture of a well formatted table that is readable by screen readers. This example table includes a caption that identifies it as a “Grading rubric for the final paper”. This table makes use of headings, (found under the “paragraph styles” dropdown menu in the text editor) and contains no merged cells, all attributes that make it easy for a screen reader user to read the table. This table also keeps the default black and white color scheme in order to maintain readability for colorblind and vision impaired students.

Did you find what you were looking for?

Select options

Yes

No

What were you looking for?

Leave this field blank

In this section

This website is brought to you by U of M Disability Resource Center. Please email us at accessu@umn.edu if you encounter issues or have questions.