Data Table Overview

Overview

Tabular representations of data need to use proper HTML markup that communicates to screen reader users the purpose of the table and the structure of the data it contains. Good tables can be navigated and understood easily by screen reader users without confusion.

Benefits to People with Disabilities

1. The summary attribute of table elements provides an overview of the body of data in the table to screen reader users.
2. Screen reader users can effectively understand the structure of data and navigate the table when th elements are used for header cells.
3. Screen reader users can easily find and identify data tables on web resources when data tables are preceded by heading elements that inform the title and purpose of the table.

Benefits to All Users

1. Users receive better search results when search engines can utilize the summary information contained in the summary attribute of table elements.

Benefits to Developers

1. Differentiating styles of header cells and data cells within a table using CSS is easier when th elements are used for header cells.
2. Search engines recognize more clearly data organized in tables on web resources.

Related Resources

1. 19: HTML tables (Opera Web Standards Curriculum)
2. W3C WCAG 1.0 data table techniques

HTML Markup Details

table element

The table element is the container for tabular data markup.

caption element

The caption element is defined in HTML to provide a visible title for a table, but it has not been widely used by developers and therefore assistive technologies do not support it.

summary attribute

The summary attribute, defined in the table element, should describe the content of the table or the conclusion the author intends to convey through the data in the table. Assistive technologies use the summary attribute as the effective title for a data table. The use of the summary attribute should be restricted to data tables and should not be used on layout tables. If more than one data table appears on a page, the summary attribute content should be unique to help screen readers users understand how the content of the two tables is different.

h2 and other heading elements

Heading elements can be used to identify the purpose of a data table and provide a mechanism to navigate to the table.

th and td elements

The th element represents header cells and the td element represents data cells.

id attribute

The id attribute, defined for th elements, should uniquely identify each header cell. This id is used in conjunction with the headers attribute of td elements to indicate headers for a particular data cell.

headers attribute

The headers attribute, defined for td elements, should point to the id of th elements that are the header cells for the data cell.

scope attribute

The scope attribute, defined for td and th elements, is not used by assistive technologies to improve accessibility.

Related Accessibility Requirements

Illinois Information Technology Accessibility Standards

11.1 Identify a header cell for each column and row in simple data tables.

11.2 Identify relationships in complex data tables using id and headers attributes.

11.3 Provide summary attributes for data tables.

Section 508

1194.22 (g) Row and column headers shall be identified for data tables.

1194.22 (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

W3C Web Content Accessibility Guidelines 2.0

1.3.1 Info and Relationships.

W3C Web Content Accessibility Guidelines 1.0

5.1 For data tables, identify row and column headers. [Priority 1]

5.2 For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells. [Priority 1]

5.5 Provide summaries for tables [Priority 3]

5.6 Provide abbreviations for header labels [Priority 3]