Tables
Tables should only be used for displaying data in a tabular format. Tables should not be used for layout or arranging elements on a page.
Tables can be difficult for assistive devices such as screen readers to parse, so they should only be used sparingly and only for true tabular data. If you need to layout information in a grid format, try using the multi-row/column content options instead.
The Summary attribute should be used when creating tables to provide a description to the user of what information the table contains and its structure.
Assistive devices such as screen readers cannot decipher how the table should be read (by column or by row or in a matrix formation). Each cell is read individually, so it is important to indicate which column or row contains headings and which contain data, so that reading direction can be determined.
For example:
An example summary for the table below would be Contact information. Table of 2 columns, to be read by row. Column 1 lists names, Column 2 lists phone extensions. The summary field will not appear on the page, but can be read by assistive devices like screen readers.
Sample table:
| Contact information | |
|---|---|
| John Doe | ext. 1234 |
| Jane Doe | ext. 5678 |
Semantic HTML table headings should be used for headings in tables instead of regular text headings.
Regular text headings include H1- to H6-level headings. Headings in tables can be better defined for assistive devices such as screen readers using semantic HTML table cell headings.
