Advanced Tables ...
scope out the table
headers and id
Sorting table columns
- Inform the user
- The table is sortable
- State that table is sortable in <caption>
- At the column - types of sorting available
- Use abbr to provide a short header for reading in cells
- Modify the aria-label to indicate how the column will be sorted on next action (sort column-name type-of-sort)
- type-of-sort = ascending/descending, A-Z, Z-A, increasing/decreasing, etc.
- Modify the title on <button>s.to indicate how the column will be sorted on next action.
- Current state of sorting
- Modify <caption> to indicate how the table is being sorted (helps user see what changed in the table). ARIA's role="alert" is added to ensure that it is read by screen reader.
- Maintain location
- sorting a column returns user to action element that sorted column (the starting place - not top of page or other unexpected place)
Sorting demo (hard coded using buttons)
Sorting demo 2 (no hard coding)
(Original demo - SSA Accessibility Best Practices Library - Tables)
Sorting tables by Deque
IBM Carbon Design DataTable Sorting
Tables - CSS fun.