Table markup
What to do
Tabular information should be presented in columns and rows so the relationships are recognizable. Column and row headers should be marked with the appropriate table elements, as opposed to just formatting them as bold or italic.
Why it matters
The use of table elements and column and row headings allows assistive technologies to present the two-dimensional relationships between data, even if it cannot be seen.
Examples
Better table markup
| Column Header 1 | Column Header 2 | Column Header 3 |
|---|---|---|
| Value A1 | Value A2 | Value A3 |
| Value B1 | Value B2 | Value B3 |
This table is used for tabular information showing the relationships between the data, not just to layout elements. The column headers are formatted as headings.
Poor table markup
| Column Header 1 | Column Header 2 | Column Header 2 |
| Value A1 | Value A2 | Value A3 |
| Value B1 | Value B2 | Value B3 |
The column headers in this table do not use heading markup but are just formatted with a bold font.
Table captions
What to do
Tables should have descriptive captions.
Why it matters
A descriptive caption is a table identifier, like a title or heading, and allows assistive technologies to navigate directly to the table.
Examples
Better table captions
Accessible table
| Column Header 1 | Column Header 2 | Column Header 3 |
|---|---|---|
| Value A1 | Value A2 | Value A3 |
| Value B1 | Value B2 | Value B3 |
Table caption: "Accessible table"
Poor table captions
| Column Header 1 | Column Header 2 | Column Header 2 |
|---|---|---|
| Value A1 | Value A2 | Value A3 |
| Value B1 | Value B2 | Value B3 |
No table caption is used.