Accessibility
Table
The Table component has been designed with accessibility in mind, and it can be used with keyboard navigation.
Scope attribute in the TableCell component
If the as
prop is set to "th"
, it’s possible to set the scope
prop to identify whether a table header is a column header or a row header.
You can find more information about the usage in the official documentation of the scope property.
<TableRow><TableCell as="th" scope="row">Freja Møller</TableCell><TableCell>39</TableCell><TableCell>freja21@example.com</TableCell></TableRow>
Screen readers will recognize markup structured like this, and allow their users to read out the entire column or row at once, for example.