Sortable & Filterable Data Grids

Interactive data grids that let users sort columns and filter rows are among the most common patterns in enterprise UIs — and among the most frequently broken for screen reader users and keyboard-only navigators. The failure mode is specific: sort state changes silently, filter results appear without announcement, focus teleports unpredictably after DOM reorder, and column headers carry no programmatic indication of their current direction. This page details the ARIA attributes, event handling sequence, announcement strategy, and keyboard contract that prevent each of those failures.

Before adding any interactivity, the underlying table must be structurally sound. Review semantic HTML table construction to confirm that scope, <caption>, and header association are correct — sorting a malformed table produces a malformed sorted table.

WCAG Criteria in Scope

Criterion Level Relevance to this pattern
1.3.1 Info and Relationships A Sort state and filter status must be conveyed programmatically, not only visually
2.1.1 Keyboard A Every sort trigger and filter control must be operable without a mouse
3.2.2 On Input A Activating a sort must not cause an unexpected context change (focus must stay on the header)
4.1.2 Name, Role, Value AA Sort direction must be exposed via aria-sort; filter inputs must carry accessible names
4.1.3 Status Messages AA Result counts and sort confirmations must reach AT without moving focus

Prerequisites

This page assumes you can:

Architecture Diagram: Sort & Filter Signal Flow

The diagram below shows how a user interaction travels from the sort button through the ARIA attribute update, DOM reorder, focus restoration, and live region announcement — in the order that prevents focus loss and avoids announcement gaps.

Sort interaction signal flow Five sequential steps: user activates sort button; aria-sort attribute updates on the th element; DOM rows reorder while focus reference is preserved; focus is restored to the sort button; live region announces the new sort state. User presses Enter / Space on sort button Update aria-sort on <th> BEFORE reorder Store focus ref; reorder DOM rows Restore focus to sort button (.focus()) Announce via live region 1 2 3 4 5 Steps 2–4 satisfy WCAG 4.1.2 (Name, Role, Value) and 3.2.2 (On Input) Step 5 satisfies WCAG 4.1.3 (Status Messages)

ARIA & HTML Spec Reference

aria-sort

aria-sort is a property defined in the ARIA 1.2 specification. It belongs on <th> elements (or elements with role="columnheader" or role="rowheader"). It communicates the current sort direction of a column to assistive technology.

Value Meaning When to apply
none Column is sortable but currently unsorted Default state for all sortable columns
ascending Sorted low-to-high, A-to-Z, or oldest-to-newest After user activates ascending sort
descending Sorted high-to-low, Z-to-A, or newest-to-oldest After user activates descending sort
other Sorted by a custom algorithm (e.g. relevance) Use only when the sort order is genuinely non-directional

Common misuse: Setting aria-sort on <td> cells or on the sort button element itself rather than on the containing <th>. The attribute belongs on the header cell, not the interactive control inside it.

Common misuse: Omitting aria-sort="none" on sortable-but-unsorted columns. When only the active column carries the attribute, screen readers cannot distinguish “currently sorted ascending” from “not sortable”.

Sort Button Inside the Header

The sort trigger must be a <button type="button"> nested inside the <th>. Do not make the entire <th> interactive (a <th tabindex="0"> with a click handler fails WCAG 4.1.2 because header cells have no implicit button role). The visual sort icon is decorative and must carry aria-hidden="true".

aria-controls on Filter Inputs

Linking a filter <input> to the grid via aria-controls="grid-id" tells assistive technology that this control affects the referenced region. Support for aria-controls is inconsistent across AT, so treat it as a progressive enhancement — the accessible name and the live region are the load-bearing parts.

aria-rowcount and aria-rowindex

When the grid is paginated or virtualized and the DOM does not contain every row, set aria-rowcount on the table to reflect the total dataset size, and aria-rowindex on each rendered <tr> to reflect its position in that total. Without these, screen readers announce “row 1 of 20” when the actual dataset has 4,000 rows. For a full treatment of virtualized contexts, see accessible virtualized list patterns.

Step-by-Step Implementation

Step 1 — Mark every sortable column (WCAG 1.3.1)

Set aria-sort="none" on every <th> that the user can sort. This communicates sortability even before any interaction.

<!-- WCAG 1.3.1: aria-sort conveys sort capability programmatically -->
<thead>
  <tr>
    <th scope="col" aria-sort="none" id="col-name">
      <!-- Sort trigger is a button, not the th itself (WCAG 4.1.2) -->
      <button type="button" class="sort-trigger" aria-label="Name, not sorted">
        Name
        <!-- aria-hidden: icon is decorative (WCAG 1.1.1) -->
        <span class="sort-icon" aria-hidden="true">⇅</span>
      </button>
    </th>
    <th scope="col" aria-sort="ascending" id="col-status">
      <!-- aria-label reflects current state so AT announces it on focus -->
      <button type="button" class="sort-trigger" aria-label="Status, sorted ascending">
        Status
        <span class="sort-icon" aria-hidden="true">▲</span>
      </button>
    </th>
    <th scope="col" id="col-date">
      <!-- No aria-sort: this column is not sortable -->
      Created
    </th>
  </tr>
</thead>

Step 2 — Update aria-sort before reordering rows (WCAG 4.1.2)

Toggle the attribute on the activated column and reset all others to none. The attribute update must happen before the DOM mutation so the accessibility tree reflects the new state at the moment the sort completes.

// WCAG 4.1.2: update aria-sort and accessible name before DOM reorder
function applySortState(activeHeader, direction) {
  // Reset all sortable headers
  document.querySelectorAll('th[aria-sort]').forEach(th => {
    th.setAttribute('aria-sort', 'none');
    const btn = th.querySelector('.sort-trigger');
    if (btn) {
      const colName = th.textContent.trim().replace(/[▲▼⇅]/g, '').trim();
      btn.setAttribute('aria-label', `${colName}, not sorted`);
    }
  });

  // Apply new state to the activated header
  activeHeader.setAttribute('aria-sort', direction);
  const btn = activeHeader.querySelector('.sort-trigger');
  const colName = btn.textContent.trim().replace(/[▲▼⇅]/g, '').trim();
  // aria-label exposes state on focus (WCAG 4.1.2 Name)
  btn.setAttribute('aria-label', `${colName}, sorted ${direction}`);
}

Step 3 — Preserve focus across the DOM reorder (WCAG 2.1.1, 3.2.2)

Store a reference to document.activeElement before mutating the DOM. After the reorder, call .focus() on that reference. This is the single most common omission in sort implementations.

// WCAG 3.2.2: activating sort must not move focus unexpectedly
function sortTable(headerButton, colIndex, direction) {
  // 1. Capture focus reference before any DOM mutation
  const focusRef = document.activeElement;

  // 2. Update aria-sort on the th (Step 2 above)
  const th = headerButton.closest('th');
  applySortState(th, direction);

  // 3. Reorder rows (implementation varies; key: do not touch focusRef's DOM node)
  const tbody = document.querySelector('#data-grid tbody');
  const rows = Array.from(tbody.querySelectorAll('tr'));
  rows.sort((a, b) => compareRows(a, b, colIndex, direction));
  rows.forEach(row => tbody.appendChild(row)); // re-attach in sorted order

  // 4. Restore focus (WCAG 2.1.1 Keyboard, 3.2.2 On Input)
  if (focusRef && focusRef.isConnected) {
    focusRef.focus();
  }

  // 5. Announce result via live region (Step 4 below)
  announce(`Table sorted by ${th.textContent.trim()} ${direction}`);
}

Step 4 — Announce sort state via a live region (WCAG 4.1.3)

A dedicated role="status" element with aria-live="polite" carries the announcement. The region sits outside the table so AT is not confused about its relationship to the grid. For deeper context on choosing between polite and assertive announcements, see choosing between polite and assertive aria-live regions.

<!-- WCAG 4.1.3: live region for status messages; placed outside <table> -->
<!-- role="status" is equivalent to aria-live="polite" + aria-atomic="true" -->
<div
  id="grid-announcements"
  role="status"
  aria-live="polite"
  aria-atomic="true"
  class="sr-only"
></div>
// Queue-based debounce prevents flooding when interactions arrive rapidly
// WCAG 4.1.3: status messages reach AT without focus movement
const queue = [];
let flushTimer;

function announce(message) {
  queue.push(message);
  clearTimeout(flushTimer);
  flushTimer = setTimeout(() => {
    const region = document.getElementById('grid-announcements');
    // Clear first so screen readers re-read identical messages
    region.textContent = '';
    // Small rAF delay lets the cleared state reach the accessibility tree
    requestAnimationFrame(() => {
      region.textContent = queue.splice(0).join('. ');
    });
  }, 250);
}

Step 5 — Build labelled filter controls (WCAG 1.3.1, 4.1.2, 4.1.3)

Filter inputs must be wrapped in explicit <label> elements. Debounce the input event to avoid thrashing the DOM on every keystroke. On Escape, clear the filter value and announce the reset.

<!-- WCAG 4.1.2: explicit <label> provides accessible name -->
<div class="filter-group" role="search" aria-label="Filter grid rows">
  <label for="status-filter">Filter by status</label>
  <input
    type="search"
    id="status-filter"
    autocomplete="off"
    aria-controls="data-grid"
    aria-describedby="filter-hint"
    placeholder="Type to filter…"
  />
  <!-- WCAG 1.3.1: hint text is programmatically associated -->
  <p id="filter-hint" class="hint-text">
    Results update as you type. Press Escape to clear.
  </p>
</div>
// WCAG 4.1.3: announce result count after filter settles
let filterTimer;

document.getElementById('status-filter').addEventListener('input', e => {
  clearTimeout(filterTimer);
  filterTimer = setTimeout(() => {
    applyFilter(e.target.value);
    const visibleCount = document.querySelectorAll('#data-grid tbody tr:not([hidden])').length;
    // WCAG 4.1.3: status message without focus change
    announce(`${visibleCount} row${visibleCount !== 1 ? 's' : ''} shown`);
  }, 300);
});

document.getElementById('status-filter').addEventListener('keydown', e => {
  if (e.key === 'Escape') {
    e.target.value = '';
    applyFilter('');
    announce('Filter cleared. All rows visible.');
    // WCAG 3.2.2: Escape resets state but keeps focus on the input
  }
});

Keyboard Interaction Contract

Key Context Action Expected AT announcement Failure indicator
Enter or Space Focus on sort button Toggles sort direction “Status, sorted ascending” (on button) + “Table sorted by Status ascending” (from live region) No announcement; sort icon changes but AT is silent
Tab Anywhere in grid header Moves focus to next interactive header or out of table New element’s name and role Focus disappears into non-interactive cells
Shift+Tab Anywhere in grid header Moves focus to previous interactive header Previous element’s name Same
Tab Filter input Moves focus to next filter or grid Nothing unexpected Filter input traps focus
Escape Filter input Clears filter, keeps focus on input “Filter cleared. All rows visible.” Filter clears but focus jumps to an unrelated element
Enter Filter input Submits filter (if form-based) Result count Activates a default button outside the filter group

Screen Reader Compatibility Matrix

AT + Browser aria-sort announcement Live region behaviour Known deviation
NVDA 2024 + Firefox Announces sort direction on focus (“ascending”) and on activation role="status" fires reliably at polite timing May re-read the entire column header text before the direction; keep aria-label concise
NVDA 2024 + Chrome Announces aria-sort value correctly Live region fires but sometimes delays 1–2 seconds Double-check that textContent = '' before writing new value
JAWS 2024 + Chrome Reads custom aria-label on the button, not the raw aria-sort value role="status" with aria-atomic="true" announces the full string If aria-label is absent, JAWS may read “button” with no sort information
VoiceOver + Safari (macOS) Reads aria-label on the button; does not speak aria-sort independently Live region fires but is suppressed if VO is actively reading Always include the direction in the button’s aria-label, not only in aria-sort
VoiceOver + Chrome (iOS) Reads button label including sort direction role="status" occasionally fires twice Use the rAF clearing pattern (Step 4) to prevent duplicate announcements
TalkBack + Chrome (Android) Reads aria-label on the button Live region fires reliably Touch users may not know the column is sortable; consider adding “double tap to sort” to the hint

Edge Cases & Failure Modes

1. Focus loss after virtual DOM reconciliation

When a React or Vue component re-renders the entire table after a sort, the DOM nodes are replaced, breaking the focusRef reference. Fix: use a key prop strategy that preserves the header button node identity, or re-query the button by id after render and call .focus() on the fresh reference.

2. aria-sort updated after the DOM reorder

If your sort function reorders rows and then updates aria-sort, some screen readers announce the old state. Always set aria-sort first, then mutate the DOM. See the aria-sort attributes for accessible column filtering deep-dive for attribute timing rules.

3. Multiple simultaneous sort columns

Multi-column sort (primary + secondary key) requires aria-sort on each sorted column. Set it to ascending or descending on both columns; the first sorted column carries the primary indicator. JAWS and NVDA announce all columns with aria-sort set when navigating headers — test that the announcement is not overwhelming.

4. Live region flooding from rapid filter input

A user who types quickly produces dozens of DOM mutations before the debounce fires. Without the queue-clearing pattern in Step 4, VoiceOver on iOS queues all announcements and reads them sequentially for several seconds after the user stops typing. The textContent = '' + requestAnimationFrame pattern collapses the queue to a single consolidated message.

5. Inline filter inputs inside header cells

Placing filter <input> elements inside <th> cells breaks AT navigation in application mode (role="grid"). Users relying on row/column navigation shortcuts find themselves trapped inside a header cell. Keep filter inputs in a separate toolbar region above the grid (using role="search") and link them to the grid via aria-controls.

aria-sort Attributes for Accessible Column Filtering

The precise ARIA 1.2 rules for aria-sort — including which elements are valid hosts, the timing of attribute updates relative to DOM mutations, and the per-AT deviation matrix — are covered in the dedicated page: aria-sort attributes for accessible column filtering.

Key implementation facts from that page:

  • aria-sort is only valid on elements with role="columnheader" or role="rowheader" (which <th scope="col"> and <th scope="row"> satisfy natively).
  • The attribute must be set before the DOM reorder; NVDA reads the accessibility tree at the moment the mutation fires.
  • JAWS ignores aria-sort and relies entirely on the button’s aria-label; always encode direction in both.

Testing Checklist

Automated

Keyboard-only

Screen reader manual

← Back to Accessible Data Tables & Grid Systems