Tables and Accessibility

This web page is intentionally created with accessibility errors to demonstrate the functionality of automatic accessibility checkers for web pages. View this webpage in an accessibility checker (WAVE) to help identify accessibility issues in other forms of digital content.

Error Types: Errors must be fixed. Alerts should be fixed. These fixes, both errors and alerts, improve the accessibility and usability of the content.

Best Practice: Use a data table for comparing information. Don’t use layout tables to position content visually. Know the limits of the tools used to build tables so you can present your information correctly.

Layout Table

Data Table

Table Header

Data tables have table headers that accurately describe the corresponding cells. Table headers are not headings. Most accessibility checkers will identify tables, table headers, and headings.

Error Type: Error

Best Practice: Use the appropriate header on tables. Table headers can be in columns or rows. Usually, it is the first row of the table. It can be in the first column of a table. Multiple rows and columns as headers make tables complex and require additional attributes to ensure assistive technology can read and navigate them appropriately for the data.

An example of a table with headers with various screen readers.

Empty Table Header

Table headers must not be empty. Assistive technology uses the headers as a reference. An empty header doesn’t provide the context needed when navigating through the table.

Error type: Error

Best Practice: Add text that represents the content preceding in the column or row.

Table creation tools might let you turn an empty table header cell into a data cell. Most table creation tools only designate the first row or column as the header. The best option, if there isn’t content for the header cell, is to create the table in HTML and change the empty table header to a table cell.

Table Caption

A table’s caption is like a heading for the table and gives people a sense of what it’s about. Assistive Technology provides a way to navigate by tables. This makes it easy for people to understand what the table is about.

Error Type: Alert

Best Practice: Provide a caption for each table on the page. If captions are not available, use headings right before the table, clearly identified, to help people navigate to the information. ARIA can be used to connect the table to the heading.

Scope

Scope is used to help assistive technology associate the header with the cells. As tables get more complex with more than one header row and or column, the scope supports its complexity.

Error Type: Error/Alert

Best Practice: Use the scope attribute when there is more than one set of headers.

See the Web Accessibility Initiative’s Tables with Two Headers for more details about using scope.

<table>
<caption>Participants place and names</caption>
<thead>
<tr>
	<th scope="col">Place</th><th scope="col">First Name</th><th scope="col">Last Name</th>
</tr>
</thead>
<tbody>
<tr>
	<th scope="row">1</th><td>Kelly</td><td>Scott</td>
</tr>
<tr>
	<th scope="row">2</th><td>Tate </td><td>Dakota</td>
</tr>
<tr>
	<th scope="row">3</th><td>Riley</td><td>Everett</td>
</tr>
</tbody>
</table>

An example of a table with scope with various screen readers.

Complex Tables

Complex tables have multiple header rows, columns, and merged cells.

Error Type: Error/Alert

Best Practice: If possible, simplify the table. Can the table be split into multiple, simpler tables? These kinds of tables will most likely need to be created with HTML. Built-in applications or add-ons do not always support adding multiple header rows, columns, or merged cells.

See the Web Accessibility Initiative’s Tables with Irregular Headers and Tables with Multi-Level Headers

Empty Cells

Add screen reader-only text to empty cells, especially for a complex table where the cell is associated with multiple header rows, columns, and merged cells.

Best Practice: When using assistive technology to navigate a table with headers usign scope, an empty cell doesn’t provide enough information. Adding screen reader-only text adds more context to the data that isn’t missed by sighted users.