Accessibility

Accessible table requirements

Keep these considerations in mind if you're modifying the Design System or creating a custom component.

For more complex table structures, review the WCAG accessibility recommendations for tables.

WCAG guielines

1.3.1 Info and relationships

Logical structure should be conveyed through table markup with proper table elements (e.g., <table>, <thead>, <tbody>, <th>, and <td>).

2.1.1 Keyboard

Ensure all table functionality is accessible via keyboard (W3C, 2018).

2.4.7 Focus visible

Scrollable tables need to be focusable. When you use the .qld__table--scroll variant with a table, you must add the tabindex="0" attribute to the scrollable element. This attribute assures that users navigating with a keyboard are able to select and scroll the table. Tabindex="0" enables focus on elements that don't get focus by default. This attribute doesn't change the tab order. It places the element in the logical navigation flow.

2.4.6 Headings and labels

• Descriptive column headers should be used
• Simple tables can have up to 2 rows of headers. Each header cell should have scope="col" or scope="row"
• Complex tables have more than 2 levels of headers. Each header should have a unique id and each data cell should have a headers attribute with each related header cell’s id listed. (W3C, 2018)

3.3.2:Labels or instructions

• Provide clear instructions for any interactive table elements
• Add title and attribution in a caption. When adding a title, attribution, or a last-updated date to a table, include it in the <caption> tag inside of the <table> element

4.1.2 Name, role, value

Use ARIA roles and attributes (e.g., role="table" or role="grid") and relevant ARIA attributes (e.g., aria-labelledby, aria-describedby, aria-sort, and aria-controls) to improve the accessibility of tables.

4.1.3 Status Messages

For tables with dynamic content or interactive features like sorting, use aria-live regions to announce changes to screen reader users.