Component Library
Tables - Layout
Issue Description
When layout tables are used to present structured information without the context of proper table markup, it can make the interaction with assistive technology undesireable. Examples:
- There is an empty header in the table.
- There are empty data cells in the table.
- The table lacks a title (caption attribute).
- Table row links span across multiple columns.
Recommendation
Data tables are used to organize data with a logical relationship. Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. Assistive technologies use this information to navigate within a data table and provide context to users. Navigating tables without this information makes all but the simplest tables significantly more difficult.
- Data tables must be identified for screen readers by including the "title" of the table using a <caption>, caption needs to be visually hidden with CSS <class="sr-only">.
- Data tables must use concise table headers with <th>.
- Table should not include empty headers or empty data cells. If empty data cells are required, include an <aria-label="empty by design"> to indicate that meaning to assistive technology.
- Column headers must be marked as <th scope="col">, row as <th scope="row">.