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.

What:
"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.

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

How:
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.

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

Why:
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.

How:
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