Web Accessibility Criteria: Tables

• Introduction
• Best Practices
• Examples
• Testing Methods
• WCAG 2.1 and References 

 Introduction

When adding tables into a webpage, it is important to understand the type of table that should be used. There are two types of tables: data tables and layout tables.

Data Tables

Data tables are used to present data in a grid or tabular format. Data tables must be marked up using HTML table elements. All data tables must have proper rows and columns. Header cells should also be used to relate to the data cells. All data tables must have the following markup:

• < Table>: Table
• <Tr>: Table row
• <Th>: Table header cell
• <Td>: Table data cell

A data table with just one header row and/or header column is called a simple data table.

A data table with two or more header rows or header columns is called a complex data table. For complex data table to be accessible, additional markup is required:

• In complex data tables when header cells span multiple rows, id attributes are the recommended method to associate the header to the proper data cell. 
• All header attributes must contain an id attribute that associates the header cell with the data cell.
• All ids must be unique.
• The scope attribute is an alternative for complex data table markup. However, this is an older method and not commonly used today. This attribute identifies if a header cell belongs to a column, row, or multiple rows or columns.
• Row: scope of a row
• Col: scope of a column
• Rowgroup: scope of a group of rows
• Colgroup: scope of a group of columns 

Layout tables

Layout tables are used for organization and presentation purposes. They do not have headers or data cells. It is not recommended to use a layout table because they can result in unorganized reading order for individuals using assistive technologies. It is recommended to use a CSS based layout (i.e. Divs), which provide more control over the visual display without compromising the structure. If layout tables are used, the following actions must be considered:

1. Layout tables must linearize properly. This means the reading order and logic of the content remain understandable when taken out of the table structure.
2. Layout tables should not be used if the information in the table presents data
3. Review the layout table and determine if a CSS based layout can be used instead of layout tables if the table is used to organize content.  It is not advisable to use a layout table because they can result in an unorganized reading order of content for individuals using assistive technologies. We recommend using a CSS based layout (i.e. Divs), which provide more control over the visual display without compromising the structure.

Back To Top 

 Best Practices

The following best practices are important for accessible tables:  

• All data tables should have appropriate HTML mark up
• Avoid using layout tables for visual purposes.
• If layout tables are used they must linearize
• It is recommended to provide a descriptive caption for a data table that briefly explains the purpose of the table

Back To Top 

 Examples

Example 1: Simple Data Table

The example below is a data table about animals. The table purposely displays the HTML table markups. In the example, the table headers "Sea Animals" "Land Animals" and "Flying Animals" are given the table header cell <th> tag. The table data cells that are associated with the headers such as "Whales" "Turtles" and "Sharks" are given the table data cell <td> tag.

Example 2: Complex Data Table

This example conveys a complex data table with multiple header rows spanning data table columns. Visually seeing this table it may be easy to associate cells. A visual user may quickly associate the number of boys in Mr Simpson's class, they will also know he has 10th-grade students because of the visual cell association. This may not come easily to assistive technology users. Cells must be appropriately associated for screen reader users to identify the content. The are different header cells in this table. Some headers are "Class" "Teacher" # of Boys" "10th Grade" "11th Grade." Complex data tables span various rows and cells. 

Example 3: Layout Table

This example of a layout table shows that the order of the content is presented is not the order it is read. Visual users will see that the table reads "Push the button to activate." Correctly structuring the table will give assistive technology users the same benefit. If the table was not linearized properly the table would be announced as "Push activate the to button." This can confuse the user and they will not be able to understand what information the table is conveying. 

Push			Activate
The		To
	Button

Back To Top 

 Testing Methods 

Manual Testing

Data Table

1. Review the source code and manually verify for proper markup for data cells.
2. Look for the following attributes:

• < Table>: Table
• <Tr>: Table row
• <Th>: Table header cell
• <Td>: Table data cell
• <Header> and id (complex data table only) and/or
• <col> and <row> attribute (complex data table only)

Layout table

Visually inspect the layout table and identify if the table is better suited as a data table or if it can be developed using CSS based layout (Divs).

Assistive Technology Testing

The accessibility of a layout and data table can be verified using assistive technology. Navigate the screen reader towards the beginning of the table. Verify if the assistive technology announce that, a table is present.

• For a data table, use the table commands to navigate through the cells for a data table.
• For a layout table, review the reading order and logic of the information when it is read by assistive technologies   

Back To Top 

 WCAG 2.1 and References