Native HTML tables provide a large amount of structural information to screen reader users. Merchants who rely on screen readers can navigate tables and identify relationships between data cells (
<td>) and headers (
<th>) using keys specific to their screen reader.
Sortable tables use the
aria-sort attribute to convey which columns are sortable (and in what direction). They also use
aria-label on sorting buttons to convey what activating the button will do.
Use tables for tabular data.
Use tables for layout. For a table-like layout that doesn’t use table HTML elements, use the resource list component.
Sorting controls for the data table component are implemented with native HTML buttons.
- Give buttons keyboard focus with the tab key (or shift + tab when tabbing backwards)
- Activate buttons with the enter/return and space keys