JavaScript Element ariaRowIndex Property

What You’ll Learn

Element.ariaRowIndex is an instance property that reflects the aria-rowindex attribute. Learn how it declares a cell or header’s 1-based row position within a table, grid, or treegrid, how it pairs with ariaRowCount, and how to get or set it from JavaScript—with five examples and try-it labs.

Introduction

When a table or grid shows only some rows (or skips rows in a virtualized list), assistive technologies still need to know which logical row a cell belongs to.

That is what aria-rowindex communicates. The DOM property ariaRowIndex lets you read and update that position from JavaScript.

const el = document.getElementById("role-heading");
console.log(el.ariaRowIndex); // "1"
el.ariaRowIndex = "2";

Understanding the Property

MDN: the ariaRowIndex property of the Element interface reflects the value of the aria-rowindex attribute, which defines an element’s row index or position with respect to the total number of rows within a table, grid, or treegrid.

• Reflected attribute — mirrors aria-rowindex.
• Get / set — readable and writable string integer.
• 1-based — first row is "1".
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaRowIndex

Value

A string which contains an integer (the row position).

📋 Row Index on Header (MDN Shape)

MDN sets aria-rowindex="1" on the header cells (row 1 of a 100-row logical table), with body cells at indexes like 11, 16, and 18. Then it updates #role-heading from "1" to "2" via the property:

<table
  id="semantic-table"
  role="table"
  aria-label="Semantic Elements"
  aria-describedby="semantic_elements_table_desc"
  aria-rowcount="100"
>
  <caption id="semantic_elements_table_desc">
    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 Role
      </th>
      <th
        role="columnheader"
        id="element-heading"
        aria-sort="none"
        aria-rowindex="1"
      >
        Semantic Element
      </th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell" aria-rowindex="11">header</td>
      <td role="cell" aria-rowindex="11">h1</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="16">header</td>
      <td role="cell" aria-rowindex="16">h6</td>
    </tr>
  </tbody>
</table>

let el = document.getElementById("role-heading");
console.log(el.ariaRowIndex); // 1
el.ariaRowIndex = "2";
console.log(el.ariaRowIndex); // 2

Related property: ariaRowCount declares the total number of rows on the container.

Examples Gallery

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

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

// HTML includes: aria-rowindex="1"

1

let el = document.getElementById("role-heading");
console.log(el.ariaRowIndex); // 1
el.ariaRowIndex = "2";
console.log(el.ariaRowIndex); // 2

1
2

const table = document.createElement("table");
table.setAttribute("role", "table");
table.ariaRowCount = "100";

const cell = document.createElement("td");
cell.setAttribute("role", "cell");
cell.ariaRowIndex = "11";
table.appendChild(cell);
document.body.appendChild(table);

console.log({
  tableRowCount: table.ariaRowCount,
  cellRowIndex: cell.ariaRowIndex
});

{
  "tableRowCount": "100",
  "cellRowIndex": "11"
}

const el = document.createElement("th");
el.setAttribute("role", "columnheader");
el.setAttribute("aria-rowindex", "1");
document.body.appendChild(el);

el.ariaRowIndex = "2";
console.log({
  fromProperty: el.ariaRowIndex,
  fromAttribute: el.getAttribute("aria-rowindex"),
  same: el.ariaRowIndex === el.getAttribute("aria-rowindex")
});

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

console.log({
  supported: "ariaRowIndex" in Element.prototype,
  tip: "1-based string integer (first row is \"1\")",
  pairsWith: "ariaRowCount on the table/grid",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "tip": "1-based string integer (first row is \"1\")",
  "pairsWith": "ariaRowCount on the table/grid",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Marking headers and cells with their logical row position.
• Virtualized grids where only a subset of rows is in the DOM.
• Showing sparse rows (e.g. indexes 11, 16, 18) within a larger aria-rowcount.
• Pairing with aria-colindex for full cell coordinates.
• 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 containing an integer for the 1-based row index.
• Often used with aria-rowcount and cell aria-colindex.
• Related: ariaRowCount, ariaColIndex, ariaRowIndexText, JavaScript hub.

💡 Best Practices