Data Table Overview

Overview

Tabular representation of data need to use proper HTML markup that communicates the purpose of the table and the structure of the data contained to screen reader users. 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 get better search results because search engines 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 recognizes more clearly data organized in tables on web resources.

Related Resources

1. W3C WCAG 1.0 data table techniques

HTML Markup Details

table element

The table element is the container for tabular data markup.

summary attribute

The summary attribute, defined in table element, should describe the content of the table or the conclusion the author intends to convey through the data in the table.

h2 and other heading elements

Heading elements should give a data table a unique title to aid in navigation to the table and to differentiate table markup used for layout from data table markup.

th and td elements

The th element represents header cells and the td element 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.

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]