...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
In this page:
| Table of Contents | ||
|---|---|---|
|
| Warning |
|---|
A table is used to present data in tabular form. Do not use tables for layout. |
In this page
...
General
This document provides information on appropriate ways to design tables. Code examples are provided where appropriate.
| Anchor | ||||
|---|---|---|---|---|
|
...
Proportional sizes or no sizing at all
<caption> element is the first thing after the opening <table> tag.
aria-describedby to provide a summary description of complex tables.
Row and Column Headers have scope attributes
rowspans and colspans headers have scope attributes
Table Notes, if any, are embedded in the table structure
...
Describing the table
| Anchor | ||||
|---|---|---|---|---|
|
Captions
A caption is a table title or heading that briefly tells the user what is in the table. A caption can be used to provide a descriptive text for the table. While not all tables need to have a visible caption, a caption is generally very helpful for users to understand the context of the table.
...
The <caption> element can be formatted so only screen readers users will see it. In this case, it can be useful to provide information about the state of the table (e.g., if it is sorted somewhere).
Using aria-describedby
Any element in the webpage, including visible text, can be assigned a unique id attribute. This id attribute is associated with the table by using the aria-describedby attribute of the table.
...
All <th> elements should have a scope attribute. The scope attribute tells a screen reader if a table header cell is a column header or a row header. Using the table layout, a screen reader might correctly guess whether a header is a column header or a row header, but this is not reliable. Use the scope attribute to makes this information explicit.
Column Headers
scope="col" tells the browser and screen reader that everything within a column relates to this <th>.
Row Headers
scope="row" tells the browser and screen reader that this <th> is a header for all cells in the row.
...
For more examples of complex tables, like the example Poster Availability table above, see the W3C Web Accessibility Tutorial on Tables.
The headers and id attributes
While using the scope attribute should meet the requirements of most tables, there are cases where table navigation is so complex (e.g., when data cells are associated with more than one row and/or one column header) that the only way to associate data cells and headers is to use the id and headers attributes to create the association. For more information on this approach see:
We strongly recommend using the scope attribute as much as possible. Complex tables can be difficult to use generally, not just for screen reader users. If possible, redesign the table before using id and headers attributes as the result may not be fully accessible or usable.
Empty Headers
Table headers should never be empty. The top-left cell of the tables should never be empty.