Tables

Data tables are used to organize data with a logical relationship in grids. Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. 

When the proper HTML markup is in place, users of screen readers can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them.

Table Captions

Data tables very often have brief descriptive text before or after the table that indicates the content of that table.

This text should be associated with its respective table using the <caption> element. The <caption> element must be the first thing after the opening <table> tag. 

While it is not necessary for each table to have a caption, a caption is generally very helpful.

Table Headers

 Student’s Birthday Data

In the markup, the <td> element is used for table data cells and the <th> element is used for table header cells. 

In the table above with the caption “Student’s Birthday Data”, The column headers for this table are Name, Age, and Birthday. The row headers are John and Jane.

Keep in mind that the table headers should never be empty.

Scope Attributes

The scope attribute tells the browser and screen reader that everything within a column that is associated to the header with scope="col" in that column, and that a cell with scope="row" is a header for all cells in that row.

All <th> elements should generally always have a scope attribute to help screen readers to identify column header and row header.

Table Summary

The summary attribute of the <table> tag may be used to provide a summary of a data table structure. 

Table summary is not recommended because, in general, if a table is so complex that it needs an explanation of how it is structured, it probably is not very accessible and should probably be simplified.

Best Practices

• Avoid using tables without implementing HTML markups for accessibility
• Avoid complex tables
• Use correct tags for table header and table data to add semantic understanding to the table structure
• All table headers should have a scope attribute
• Have the appropriate table caption in the data table to give context to the table
• Styling even and odd rows in a different way can be helpful to people who have reading difficulties 

Examples:

Accessible Table

Student’s Birthday Data

Why is the table accessible?

• The table is provided with the correct and descriptive table caption.
• Row and column headers are identified with the correct HTML markups. 
• Even and odd rows styled in a different way, making it easier to navigate through.

Inaccessible Table

Why is the table inaccessible?

• Table does not provide any table captions, which may be confusing for users. Missing table captions makes tables purpose difficult to understand.
• Headers are not identified with correct HTML markups
• Table is not provided with clear and understandable styling.

Test for Accessibility

Use SiteImprove and WAVE to check table’s accessibility on a page. To check if tables on a page are accessible, make sure:

• All tables should have appropriate formatting and labels, such as <th> and <td>.
• Layout Tables should be avoided.

Applicable WCAG Success Criteria

•  WCAG 2.1: Info and Relationships

References

• Tables Concepts - Tables - WAI Accessibility Tutorials
• Princeton University: Digital Accessibility: Tables
• WebAIM: Creating Accessible Tables - Data Tables