How do you indicate sort state accessibly in a data table?
WHAT IT TESTS: Communicating sort state without relying on color alone. ANSWER OUTLINE: Use shape-differentiated icons, annotate aria-sort on the active header, and maximize the button click target.
WHAT IT TESTS: Whether you can design inclusive sort indicators that do not depend on color and are properly conveyed to assistive technologies. ANSWER OUTLINE: First, use distinct shape-based icons for unsorted, ascending, and descending states so color-blind users can perceive differences. Second, annotate the active column header with aria-sort and wrap header text in a button to expose the control to screen readers. Third, maximize the click target so the entire header cell is actionable.
Read the original → w3.org
- #accessibility
- #ui design
- #figma
- #aria
- #data tables
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.