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.
- 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.
scopeattribute is set on every
<th>tag to denote column or row.
|Name||Age||Date of Birth|
|Emily||8 years||3 September|
|Jack||12 years||28 April|
summaryattribute can be used to explain the contents of the table to screen reader users.