Techniques
Specify column headers
This allows assistive technology to provide context to each data cell. It also distinguishes header cells visually.
Use predefined styles in your template
Use the styles which have been specifically designed with accessibility in mind, rather than choosing your own font and colour combinations.
Repeat column header rows for long tables that span multiple pages
This prevents users from having to scroll up and down the document to check the text of the column header.
Include a title for your table
This provides an overview of the nature of the data in your table. Use the “Caption” functionality to do this.
Example of good practice
There is a caption above the table providing a title; column and row headers have been specified and are distinctive in appearance.
Table 1 – Birthdays for class eleven
| Name | Age (years) | Birthday |
|---|---|---|
| Emily | 8 | 3rd September |
| Francois | 12 | 28th April |
Example of bad practice
There is no caption above the table; column and row headers have not been specified and are not distinctive in appearance.
| Name | Age (years) | Birthday |
| Emily | 8 | 3rd September |
| Francois | 12 | 28th April |
References
WCAG 2.1
- 1.3.1 Info and Relationships (A)
EN 301 549 v 2.1.2
- 9.1.3.1 Info and Relationships
Further reading