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)
• Use javascript used to do the sorting and inform the user
  • extensive use of aria-*

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.