Sortable tables: use header buttons + aria-sort
This micro-demo shows a common failure mode (headers that look clickable, but aren’t real controls) and a simple fix:
keep real <table> semantics, put a <button> inside each sortable <th>, and expose state via aria-sort.
BEFORE (broken)
Looks sortable, works with a mouse, but the “controls” are not focusable and there’s no programmatic sort state.
Before table: unsorted.
| Name | Score | Time (ms) |
|---|
Try: Tab to the headers (you can’t). Screen readers also won’t get a reliable “sorted by …” announcement.
AFTER (fixed)
After table: unsorted.
Each sortable header has a real button. The active column’s <th> exposes sort state with aria-sort.
Focus stays on the button you used.
Share
No tracking. The easiest share target is this hub page, not YouTube.