aria-sort — Indicating Sorting State in Tables and Grids

In this tutorial, you will learn about aria. We cover key concepts, practical examples, and best practices to help you master this topic.

aria-sort indicates the current sorting order of a table or grid column, with values ascending, descending, none, and other helping screen reader users understand sort state.

In this tutorial, you'll learn how to use aria-sort in ARIA sortable tables.

What You'll Learn

By the end of this lesson, you'll understand the four aria-sort values, how to apply them to column headers, and how to update sort state with user interaction.

Why It Matters

Sortable tables are common in data displays. Without aria-sort, screen reader users cannot tell which column is sorted or in what direction.

Real-World Use

Durga Antivirus Pro's threat table uses aria-sort on column headers so users know when the list is sorted by file name, date, or threat level.

Sort State Flow

flowchart LR
  A[Column clicked] --> B{Current sort state}
  B -->|None| C[Set aria-sort='ascending']
  B -->|Ascending| D[Set aria-sort='descending']
  B -->|Descending| E[Remove aria-sort or set 'none']
  C --> F[Resort data ascending]
  D --> G[Resort data descending]
  E --> H[Default order]

How aria-sort Works

aria-sort is applied to the column header element of a sortable column:

<table role="grid" aria-label="Scan results">
  <thead>
    <tr>
      <th role="columnheader" aria-sort="ascending" tabindex="0">
        File Name
      </th>
      <th role="columnheader" tabindex="0">
        Size
      </th>
      <th role="columnheader" aria-sort="none" tabindex="0">
        Date
      </th>
    </tr>
  </thead>
  <tbody>
    <!-- data rows -->
  </tbody>
</table>

The screen reader announces "File Name column header, sort ascending".

aria-sort Values

<th aria-sort="ascending">Name</th>
<th aria-sort="descending">Date</th>
<th aria-sort="none">Size</th>
<th aria-sort="other">Relevance</th>

Toggling Sort State

function toggleSort(header, column) {
  const currentSort = header.getAttribute('aria-sort');
  const headers = header.closest('tr').querySelectorAll('[aria-sort]');
  headers.forEach(h => h.setAttribute('aria-sort', 'none'));
  if (currentSort === 'ascending') {
    header.setAttribute('aria-sort', 'descending');
    sortData(column, 'desc');
  } else {
    header.setAttribute('aria-sort', 'ascending');
    sortData(column, 'asc');
  }
}

Common Mistakes

• Not removing sort from the previous column: Only one column should have a non-none sort.
• Using aria-sort on non-header elements: Apply it to columnheader or th elements.
• Forgetting to make headers focusable: Sortable headers should be keyboard accessible.
• Using aria-sort without actual sorting: The attribute must match the data state.
• Not providing keyboard support for sorting: Allow Enter or Space to trigger sort.

Practice and Challenge

1. What are the four aria-sort values? ascending, descending, none, other.

2. Which element gets the aria-sort attribute? The column header (th or columnheader role).

3. How many columns should have a non-none aria-sort at a time? One.

4. What does aria-sort="other" mean? Sorted by a custom algorithm, not simple ascending/descending.

5. Challenge: Create a sortable table with three columns. Implement click-to-sort that cycles through ascending, descending, and none. Use aria-sort on the active column.

FAQ

Mini Project

Build a sortable data table of security threats with columns for file name, type, severity, and date. Use aria-sort on each sortable column header. Implement keyboard sorting.

What's Next

Continue to aria-grabbed to learn about drag and drop state.