JavaScript Element ariaSort Property

What You’ll Learn

Element.ariaSort is an instance property that reflects the aria-sort attribute. Learn the ascending, descending, none, and other values, how sortable column headers use it, and how to get or set the property from JavaScript—with five examples and try-it labs.

Introduction

Data tables often let users click a column header to sort rows—A–Z, Z–A, newest first, and so on. Assistive technologies need to know which column is sorted and in which direction.

aria-sort carries that signal on a column header. ariaSort is the JavaScript reflection of that attribute.

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

Understanding the Property

MDN: the ariaSort property of the Element interface reflects the value of the aria-sort attribute, which indicates if items in a table or grid are sorted in ascending or descending order.

• Reflected attribute — mirrors aria-sort.
• Get / set — readable and writable string.
• Four tokens — ascending, descending, none, other.
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaSort

Value

A string with one of the following values:

📋 MDN Column Header Shape

MDN starts with a column header marked aria-sort="none", then updates it to "ascending" with the property:

<th
  role="columnheader"
  id="role-heading"
  aria-sort="none"
  aria-rowindex="1"
  aria-colindex="1">
  ARIA Role
</th>

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

Related learning: ariaRowCount, ariaColIndex, and ariaRowIndex for table/grid models.

Examples Gallery

Examples follow MDN Element: ariaSort. Labs use a role="columnheader" so you can safely read and write the property.

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

// HTML includes: role="columnheader" aria-sort="none"

none

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

none
ascending

const el = document.createElement("th");
el.setAttribute("role", "columnheader");
el.setAttribute("aria-sort", "ascending");
el.textContent = "Name";
document.body.appendChild(el);

el.ariaSort = el.ariaSort === "ascending" ? "descending" : "ascending";
console.log({
  ariaSort: el.ariaSort,
  tip: "Clear other headers to none when this one becomes active"
});

{
  "ariaSort": "descending",
  "tip": "Clear other headers to none when this one becomes active"
}

const el = document.createElement("th");
el.setAttribute("role", "columnheader");
el.setAttribute("aria-sort", "none");
el.textContent = "ARIA Role";
document.body.appendChild(el);

el.ariaSort = "descending";
console.log({
  fromProperty: el.ariaSort,
  fromAttribute: el.getAttribute("aria-sort"),
  same: el.ariaSort === el.getAttribute("aria-sort")
});

{
  "fromProperty": "descending",
  "fromAttribute": "descending",
  "same": true
}

console.log({
  supported: "ariaSort" in Element.prototype,
  allowed: ["ascending", "descending", "none", "other"],
  tip: "Sort the rows in the DOM; ariaSort only announces the state",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "allowed": ["ascending", "descending", "none", "other"],
  "tip": "Sort the rows in the DOM; ariaSort only announces the state",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Sortable data tables and ARIA grids.
• Announcing A–Z vs Z–A when a header is clicked.
• Clearing other columns to none when a new sort becomes active.
• Marking custom sort modes with other.
• Keeping script and markup aligned without manual setAttribute.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Value is a string: ascending, descending, none, or other.
• ariaSort announces sort—it does not sort the DOM by itself.
• Related: ariaSetSize, ariaRowCount, ariaColIndex, ariaValueMax, JavaScript hub.

💡 Best Practices