Tables

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.


Impact

Impact

When sighted users focus on a table cell, they are able to visually determine which row and column the cell is in by scanning up and down or left and right. This adds context to what the value in a particular cell means.

On the other hand, a screen reader can only read aloud each cell one by one from left to right and top to bottom.

If the table is not formatted correctly, there is no easy way to determine what label a particular value in a cell might have.

Example

If you are not a screen reader user, pretend that you are and you want to find the location of a biology 205 class. You find a webpage with an incorrectly formatted table and you hear the following text read out loud. Do you know where the class will be held?

Dos and Don'ts

Dos and Don'ts

Expand all

Use Tables to Display Data

Tables traditionally show the relationship between two or more items in rows and columns. But in the early days of the internet, Web designers and developers commonly used tables to control the layout of webpage content as well because they couldn't easily do so with HTML.

Content creators sometimes use tables in word processing documents to similarly control where content is placed rather than to indicate data relationships.

But screen reader software may not read cells in such tables in the proper order, and page layout can now be better controlled with CSS on webpages and with other tools in document creation software.

Do

Use tables to present information in a grid, or matrix, with columns or rows that show the meaning of the information.

Don't

Don't use tables to make your webpage look a particular way. Layout tables on webpages do not pose inherent accessibility issues, but it is more difficult to make sure screen reader software reads the cells in the proper order.

Never use tables as a means of laying out a page in a Google or Microsoft Word document. While these tables can be hidden from visual users by simply eliminating the borders between cells, they cannot be hidden from screen readers.

Designate Row and/or Column Headers

Users who are blind or visually impaired can process the information displayed in a table when their screen reader software reads which row and column header each cell refers to before the content in the cell.

Do

Designate at least one row and/or column header using the table formatting tools in your web content management system or document creation software. 

Use the <th> element to mark up table headers in HTML.

Don't

Don't create tables without table headers.

Don't just change the visual formatting of the text, such as the font size or color, to visually indicate table header rows and/or columns. Screen readers will not be able to associate the headers with the correct cells.

Table headers should never be empty. This is particularly of concern for the top-left cell of some tables.

Avoid or Simplify Complex Tables

Simple tables are easier for users of assistive technologies to understand and navigate, because screen readers essentially ignore that the content is inside a table. HTML code maintenance may be easier for simple tables as well.

Do

Include a maximum of one header row and one header column.

Spell out abbreviations or acronyms, or use the <abbr> or <acronym> tags in HTML to ensure accessibility.

If your table has multiple header rows, merged cells, or another table embedded in it, split it into two or more simple tables. 

If you do create a complex data table on a webpage, use the <scope> tag to programmatically associate the data cells with the appropriate headers.

Don't

Don't merge cells.

Don't include a table within another table.

Provide Contextual Information

Data tables often have contextual information around them that helps users understand the content of the table.

Do

Associate descriptive text about a table with its respective table by including a <caption> element in HTML or alt text in Microsoft Word. Captions are not necessary for each table, but can helpful for screen reader users. The caption can be visually formatted and positioned above or below the table as needed, but on webpages, the <caption> element must be the first one after the opening <table> tag.

You may use <thead>, <tfoot>, and <tbody> tags in HTML tables so that the head and/or foot rows repeat at the top or bottom of the table when it is printed, but these do not provide any additional accessibility benefits. 

Don't

Don't repeat the same text in the caption that appears in a heading preceding the table.

You may provide a summary of the structure of the data table (not of the content) using the <summary> attribute, but screen reader support for it varies, and it is not part of the HTML5 specification, so WebAim does not recommend it.

If both a caption and summary are provided for one table, the summary should not duplicate information present in the caption.

Include Content in All Cells

When they encounter empty cells within tables, both visual and screen reader users may wonder if data was omitted by mistake. In addition, screen reader software may skip reading empty data cells, causing mismatches between header rows and their corresponding data cells.

Do

Include text such as "not applicable," "none," etc. to indicate that there is no data in empty cells.

Don't

Don't leave any table cells empty.

How-to

How-to

You can create accessible tables on UMN websites that use the Folwell Design System.

WebAIM's Creating Accessible Tables: Layout Tables