No Boundaries Logo

Web Accessibility Policy of the State of Maine

Back to Policy Table of Contents

Implementation Guidelines

11. Data Tables

11.1 - For simple data tables, explicitly identify headings for all columns and rows.

"Data tables" are simply HTML tables used to display data. (On the other hand, "layout tables" are used to lay out columns and sections on a web page. Both data and layout tables use the <table> element, but their functions, and accessibility issues, are very different.) "Headers" identify the content of each row and/or column.

A screen reader can use table headers to provide row and column information while a user explores the data cells within a table.

Use <th> (table header) or <td> (table data) elements with scope="col" (for column headers) or scope="row" (for row headers) to identify cells that contain row and/or column headings.

Ref: WCAG 5.1; 508 g

11.2 - Avoid using complex data tables.

Table with multiple layers of headers and "spanned" columns or rows can become very complex.

Complex data tables can be difficult to navigate and understand using a screen reader. Only the most advanced screen readers can use advanced table markup to provide orientation information.

Whenever possible, simplify complex tables by re-arranging or dividing them into separate tables. When a complex table cannot be simplified, use advanced table markup, such as headers, axis, scope, <col>, and <colgroup>, to fully indicate the relationships between data cells and headers.
Note: See W3C's "Tables in HTML Documents" for complete details on how to markup complex tables.

Ref: WCAG 5.2; 508 h