How do you indicate sort state accessibly in a data table?

WHAT THIS TESTS: This question tests whether you understand inclusive design for complex interactive components, specifically how to encode state visually and programmatically. Interviewers want to see that you treat accessibility as a design systems problem, not a post-development fix. You must show knowledge of WCAG perceivability and operability principles by addressing color independence, screen-reader semantics, and target sizing in a single coherent pattern.

A GOOD ANSWER COVERS: A strong answer walks through four decisions in order. First, visual indicators must differ by shape, not just color; for example, use a diamond or hollow icon for unsorted columns and upward or downward pointing triangles for ascending and descending. Second, the active sorted column must carry the aria-sort attribute with values ascending or descending so assistive technologies announce the state. Third, the header text should be wrapped in a button element to create a native interactive control with built-in keyboard support. Fourth, the button should fill the entire header cell via CSS to maximize the click target for users with motor impairments.

COMMON WRONG ANSWERS: Red flags include proposing color-only indicators such as green for ascending and red for descending, which fails for color-blind users and offers no shape distinction. Another mistake is relying on CSS-generated icons without ARIA annotations, leaving screen-reader users unaware of which column is sorted or in what direction. Suggesting custom div-based controls instead of native buttons also signals a gap in understanding keyboard accessibility and semantic HTML.

LIKELY FOLLOW-UPS: An interviewer might ask how you would handle sorting multiple columns simultaneously, where you would need to clarify whether aria-sort supports multiple headers or if an alternative pattern like a visually hidden description is required. They may also ask how you would annotate this in Figma; the correct approach is to document the aria-sort state on the component variant and include accessibility notes in the design spec rather than relying on redlines alone.

ONE CONCRETE EXAMPLE: In the W3C APG sortable table example, the Favorite Number column is sorted ascending. The header contains a button that spans the full cell, the active th has aria-sort set to ascending, and the icon is a character entity triangle. Unsortable columns like Address omit the button entirely, while sortable but inactive columns display a diamond icon to signal capability without implying current state.

Source: W3C ARIA Authoring Practices Guide (APG)