Data tables present information in a structured format, with interactive elements such as sorting and pagination controls designed to be keyboard accessible. Users can navigate through the main controls without unnecessary tab stops, making interaction more efficient.

Cell content can be truncated usingtruncation-pattern (truncationPattern ) and will either be displayed as a tooltip or a “See more/see less” toggle. Tooltips will appear on hover. When a “See more/see less” pattern is used, the toggle is fully keyboard accessible and included in the tab order, allowing users to expand or collapse content easily.

Sorting controls within the data table column headers are implemented as a button and can be focused and activated via keyboard using the ‘Enter’ or ‘Space’ keys.

Any slotted action elements in cells are also added into the data table’s tabbing order and are fully keyboard navigable.

The data table’s title bar contains interactive elements such as a density select and slotted action elements that are all reachable using keyboard navigation. Focus styling is applied consistently to ensure users can visually track where they are within the title bar.

When the data table’s pagination bar is used, pagination buttons follow a logical tab order, with disabled pagination buttons being skipped, preventing interaction with inactive controls.

The data table uses semantic HTML elements such as<table> ,<thead> ,<tbody> ,<th> , and<td> , which aids screen readers to correctly interpret and announce the table structure and relationships between headers and cells.

Sorting controls use a polite ARIA live region, giving real-time updates about which column is sorted and in what order.

An assertive ARIA live region is also used to notify screen reader users about dynamic changes in the loading/updating state.

We’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.