PRACTICE 5 OF 8 · Complex widgets and data
Sortable table
Sort table columns and confirm the active sort direction is exposed.
Verify that sortable headers expose button behavior and current sort direction.
PREPARE
Set up your test
- Turn on a screen reader you know how to operate.
- Navigate by controls or use Tab where the task asks you to.
- Listen for purpose and state, not one exact sequence of spoken words.
WORKING EXAMPLE
Establish the expected behavior
Navigate to the column headers and sort by status. Listen for button behavior and sort direction.
| Issue | |
|---|---|
| Missing label | Open |
| Ambiguous link | Resolved |
Expected behavior: users can operate the sort and identify the current sort direction.
INTENTIONAL DEFECT
Find the barrier
The example below deliberately contains one accessibility defect. Skip the defective example.
Navigate to the column headers. Determine whether sorting behavior and direction are exposed.
| Issue | Status ^ |
|---|---|
| Missing label | Open |
| Ambiguous link | Resolved |
Hint
A caret character and visual highlight are not enough to expose sort behavior.
End of intentional defect.
DIAGNOSE
Choose the primary cause
EXPLANATION
Understand and repair it
Reveal explanation
What happened
The defective table shows a visual sort indicator but does not expose a sorting control or the active sort direction.
Repair
Put an actual button in sortable headers and use aria-sort on the currently sorted header cell.
<th scope="col" aria-sort="ascending">
<button type="button">Status</button>
</th>Retest
- Navigate to each sortable header and confirm it is operable.
- Sort the table and confirm the direction is announced.
- Confirm only the active sorted column has
aria-sort.
Report it
Example: The Status column appears sorted visually but is not exposed as a sortable control and does not communicate ascending sort direction.
Standards and support
This exercise describes behavior rather than promising identical speech across screen reader and browser combinations.
- WAI-ARIA: aria-sort
- WCAG 2.2: Understanding Name, Role, Value
- W3C Technique H63: Using scope attributes to associate header cells and data cells
Editorially reviewed 20 July 2026.