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
| Section |
|---|
| Column |
|---|
| | Tip |
|---|
| | 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. |
|
| Column |
|---|
| | Warning |
|---|
| | 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
| Section |
|---|
| Column |
|---|
| | Tip |
|---|
| title | 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" |
|
| Column |
|---|
| | Warning |
|---|
| | 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. |
|
|
Related Articles
| Content by Label |
|---|
| showLabels | false |
|---|
| max | 50 |
|---|
| showSpace | false |
|---|
| sort | title |
|---|
| cql | label = "accessibility" and space = currentSpace() |
|---|
|