6.6 Mark up data tables correctly

Tables can be very complex, especially for screen reader users who can not visualize the entire table to understand it's structure. By properly implementing the headers of the table the user will hear these headers when navigating. This will give the user orientation and help them understand where in the table they are.

WCAG 1.3.1: Info and Relationships Opens in a new window

Details

  • When content is made of tabular data it is implemented using table tags.
  • When content is not tabular, table tags should not be used for styling. When required, role="presentation" is used to remove the table role.
  • <th> tags are always used for column and row headers.
  • The scope attribute is set on every <th> tag to denote column or row.

Examples

Name Age Date of Birth
Emily 8 years 3 September
Jack 12 years 28 April

Tips

  • The summary attribute can be used to explain the contents of the table to screen reader users.

Tools & Resources