Sortable Table

Component Behavior

This example is adapted from W3C's Sortable Table documentation.

The ARIA sortable table component allows users to sort table data by clicking column headers. When a header is clicked, the table's content reorders according to the column's data, either ascending or descending. The sorting state is communicated visually and via ARIA attributes (aria-sort) to ensure accessibility for assistive technologies. Keyboard navigation and screen reader support are provided to enhance usability for all users.

Accessibility Guidelines

The table is made accessible to ensure that users with disabilities can interact with the table effectively. Key accessibility guidelines include:

• ARIA Attributes: Use aria-sort on column headers to indicate the current sort direction (ascending, descending, or none). This helps screen readers announce the sort order clearly.
• Keyboard Navigation: Ensure that users can navigate the table using the keyboard, with focusable column headers that allow sorting via keypresses (e.g., Enter or Spacebar). Tab order should be logical, allowing easy movement between headers and table rows.
• Focus Management: Maintain visible focus indicators for interactive elements like column headers to assist keyboard users in understanding where they are on the page.
• Screen Reader Compatibility: Use semantic HTML and ARIA roles to ensure that assistive technologies accurately interpret the table's structure and sorting behavior. Use proper role assignments (role="columnheader", aria-sort).
• Visual Cues: Provide visual indicators of sorting direction, such as up/down arrows, for users who rely on visual cues.

Component Example

Link

Link to this component on GitHub