CP 4.3 – Specify table headers and titles
Why is this important?
Data tables provide options to specify row and column headers. Screen readers can use this information to give context to the table cell that they are announcing.
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 table 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 title above the table; 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 title 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