JavaScript Element ariaRowIndexText Property

What You’ll Learn

Element.ariaRowIndexText is an instance property that reflects the aria-rowindextext attribute. Learn how it provides a human-readable alternative to numeric ariaRowIndex, when to use it on table/grid headers, and how to get or set it from JavaScript—with five examples and try-it labs.

Introduction

aria-rowindex tells assistive technologies which row number a cell is in (for example "1"). Sometimes a spoken phrase is clearer than that number alone—for example “Heading row.”

That friendly label is what aria-rowindextext provides. The DOM property ariaRowIndexText lets you read and update it from JavaScript.

const el = document.getElementById("role-heading");
console.log(el.ariaRowIndexText); // "Heading row"
el.ariaRowIndexText = "Updated heading row";

Understanding the Property

MDN: the ariaRowIndexText property of the Element interface reflects the value of the aria-rowindextext attribute, which defines a human readable text alternative of aria-rowindex.

• Reflected attribute — mirrors aria-rowindextext.
• Get / set — readable and writable string.
• Companion to — ariaRowIndex.
• Baseline — newly available since December 2025 (MDN).

📝 Syntax

ariaRowIndexText

Value

A string—human-readable text that describes the row index.

⚖️ ariaRowIndex vs ariaRowIndexText

📋 Row Index Text (MDN Shape)

MDN sets both a numeric index and readable text on the first header, then updates the text with the property:

<table id="semantic-table" role="table" aria-label="Semantic Elements" aria-rowcount="100">
  <caption>Semantic Elements to use instead of ARIA's roles</caption>
  <thead role="rowgroup">
    <tr role="row">
      <th
        role="columnheader"
        id="role-heading"
        aria-sort="none"
        aria-rowindex="1"
        aria-rowindextext="Heading row">
        ARIA Role
      </th>
      <th role="columnheader" id="element-heading" aria-rowindex="1">
        Semantic Element
      </th>
    </tr>
  </thead>
</table>

Examples Gallery

Examples follow MDN Element.ariaRowIndexText. Labs use a table header so you can safely read and write the property.

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

// HTML includes: aria-rowindextext="Heading row"

Heading row

let el = document.getElementById("role-heading");
console.log(el.ariaRowIndexText); // Heading row
el.ariaRowIndexText = "Updated heading row";
console.log(el.ariaRowIndexText); // Updated heading row

Heading row
Updated heading row

const th = document.createElement("th");
th.setAttribute("role", "columnheader");
th.ariaRowIndex = "11";
th.ariaRowIndexText = "Data row eleven";
document.body.appendChild(th);

console.log({
  ariaRowIndex: th.ariaRowIndex,
  ariaRowIndexText: th.ariaRowIndexText
});

{
  "ariaRowIndex": "11",
  "ariaRowIndexText": "Data row eleven"
}

const el = document.createElement("th");
el.setAttribute("aria-rowindextext", "Heading row");
document.body.appendChild(el);

el.ariaRowIndexText = "Updated heading row";
console.log({
  fromProperty: el.ariaRowIndexText,
  fromAttribute: el.getAttribute("aria-rowindextext"),
  same: el.ariaRowIndexText === el.getAttribute("aria-rowindextext")
});

{
  "fromProperty": "Updated heading row",
  "fromAttribute": "Updated heading row",
  "same": true
}

console.log({
  supported: "ariaRowIndexText" in Element.prototype,
  tip: "Human-readable alternative to aria-rowindex",
  pairsWith: "ariaRowIndex (numeric position)",
  status: "Baseline Newly available (MDN, Dec 2025)"
});

{
  "supported": true,
  "tip": "Human-readable alternative to aria-rowindex",
  "pairsWith": "ariaRowIndex (numeric position)",
  "status": "Baseline Newly available (MDN, Dec 2025)"
}

🚀 Common Use Cases

• Friendlier spoken labels for spreadsheet-style row numbers / labels.
• Custom grids where row titles differ from visible header text.
• Localizing how row position is announced.
• Updating readable labels when a row label is renamed in script.
• Keeping script and markup aligned without manual setAttribute.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Newly available, Dec 2025).
• Feature-detect on older browsers.
• Companion to ariaRowIndex — does not replace it.
• Related: ariaRowIndex, ariaRowSpan, ariaColIndexText, JavaScript hub.

💡 Best Practices