a11y/table-sort

Why

A click handler on the <th> cannot be reached with the keyboard and does not say it can be activated. Without aria-sort nobody using a screen reader knows the current order.

Fix

Put <button type="button"> inside each sortable <th> with the column name as its text; set aria-sort="ascending" or "descending" on the sorted <th> only, and remove it from the others. Announce the new order in a polite live region if the table is long.

Examples

<th scope="col" aria-sort="ascending"><button type="button">Date <span aria-hidden="true">▲</span></button></th>
<th scope="col"><button type="button">Amount</button></th>

Sources

• WAI-ARIA Authoring Practices, Sortable Table example
• W3C, WAI-ARIA 1.2, aria-sort

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/table-sort