JavaScript Element ariaSort Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ARIASORT

Definition

Element.ariaSort reflects the aria-sort attribute: whether items in a table or grid are sorted ascending, descending, none, or with another algorithm (MDN). Put it on the active columnheader or rowheader.

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.ariaSort. Start with this line.

JavaScript
el.ariaSort / el.ariaSort = value
CallWhat it does
el.ariaSort / el.ariaSort = valuePrimary signature.

Built into the browser. Read or assign el.ariaSort — no import required.

Library declarations
JavaScript
el.ariaSort / el.ariaSort = value

Parameters

ParameterDescription
Column / row headerRequired. columnheader / rowheader (or native <th>)
Token stringRequired. ascending / descending / none / other
Actual sort logicRequired. Your JS reorders the data; ARIA only announces

Return Value

Return ValueDescription
*The current value of el.ariaSort.

JavaScript Examples

Example 1 — Read ariaSort

Log the sort token from a column header.

JavaScript
const el = document.getElementById("role-heading");
console.log(el.ariaSort); // "none"

// HTML: <th id="role-heading" aria-sort="none">ARIA Role</th>
Try It Yourself

How It Works

  1. Find the header. getElementById returns the column header cell.
  2. Read the reflection. ariaSort returns the aria-sort string.
  3. Interpret "none". No defined sort is applied to this column yet.
  4. Missing attribute. If unset, many browsers return null (meaning is still none).

Example 2 — Set Ascending (MDN)

MDN: update from "none" to "ascending".

JavaScript
const el = document.getElementById("role-heading");

console.log(el.ariaSort); // "none"
el.ariaSort = "ascending";
console.log(el.ariaSort); // "ascending"
console.log(el.getAttribute("aria-sort")); // "ascending"
Try It Yourself

How It Works

  1. Start unsorted. The first log shows "none".
  2. Assign the property. el.ariaSort = "ascending" updates the reflected attribute.
  3. Confirm both sides. Property and getAttribute both report "ascending".
  4. In a real UI. Also reorder the table rows so sighted users match assistive tech.

Example 3 — Switch Sorted Column

Move the active sort from one header to another.

JavaScript
const last = document.getElementById("last-name");
const company = document.getElementById("company");

last.ariaSort = "none";
company.ariaSort = "descending";

console.log(last.ariaSort);    // "none"
console.log(company.ariaSort); // "descending"
Try It Yourself

How It Works

  1. Clear the old column. Set the previous header to "none" (or remove the attribute).
  2. Mark the new column. Set company.ariaSort = "descending".
  3. One active sort. Assistive technologies now announce Company as the sorted column.
  4. Toggle tip. Clicking the same header again usually flips ascending ↔ descending.
Compatibility

Browser Support

Element.ariaSort is Baseline Widely available (MDN: across browsers since October 2023).

✓ Baseline · Widely available

Element.ariaSort

Supported in modern Chromium, Firefox, Safari, and Edge. Internet Explorer has no ariaSort IDL — use getAttribute / setAttribute there.

95% Modern browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
Element.ariaSort Excellent

Bottom line: Safe for modern web apps. Sort the data yourself, keep one active header, and sync visual indicators with ariaSort.

Frequently Asked Questions

It reflects the aria-sort attribute as a string that tells assistive technologies whether a table or grid column (or row) header is sorted ascending, descending, none, or with another algorithm.
No. MDN marks Element.ariaSort as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
One of the strings "ascending", "descending", "none", or "other". The default meaning when unset is none (no defined sort).
On the currently sorted columnheader or rowheader only. Move it when the user sorts a different column or row (MDN).
No. It only updates the accessibility tree. You must sort the data yourself and keep visual indicators in sync (MDN).
No for normal single-column sorting. Keep aria-sort on one header at a time so assistive technologies know which column is sorted (MDN).

Next: ariaValueMax

Learn the reflected aria-valuemax property for the maximum of range widgets like sliders and progress bars.

ariaValueMax tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

JavaScript Element ariaSetSize Property JavaScript Element ariaValueMax Property