JavaScript Element ariaRowIndex Property

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

Definition

Element.ariaRowIndex reflects the aria-rowindex attribute: an element’s row position with respect to the total number of rows in a table, grid, or treegrid (MDN). The value is a 1-based string integer (for example "7").

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

Syntax

Use el.ariaRowIndex. Start with this line.

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

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

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

Parameters

ParameterDescription
Row / cell / headerRequired. Host for the absolute row position
String integer ≥ 1Required. Position in the full table
aria-rowcountRequired. Total size context for the index

Return Value

Return ValueDescription
*The current value of el.ariaRowIndex.

JavaScript Examples

Example 1 — Read ariaRowIndex

Log the row index from a column header cell.

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

// HTML: <th id="role-heading" … aria-rowindex="1">
Try It Yourself

How It Works

  1. Find the cell. getElementById returns the header node.
  2. Read the reflection. ariaRowIndex returns the aria-rowindex string.
  3. Interpret "1". This cell sits in the first row of the full table.
  4. Missing attribute. If unset, many browsers return null.

Example 2 — Update the Index (MDN)

MDN: change the reported row index from "1" to "2".

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

console.log(el.ariaRowIndex); // "1"
el.ariaRowIndex = "2";
console.log(el.ariaRowIndex); // "2"
console.log(el.getAttribute("aria-rowindex")); // "2"
Try It Yourself

How It Works

  1. Start at 1. The first log shows the initial position.
  2. Assign a string. el.ariaRowIndex = "2" updates the reflected attribute.
  3. Confirm both sides. Property and getAttribute both report "2".
  4. In a real UI. Keep indexes consistent across the row and any spanning cells.

Example 3 — Partial Grid Rows 7–9

Show absolute indexes when the DOM only contains a slice of the grid.

JavaScript
const grid = document.createElement("div");
grid.setAttribute("role", "grid");
grid.ariaRowCount = "24";

const row = document.createElement("div");
row.setAttribute("role", "row");
row.ariaRowIndex = "7";
grid.appendChild(row);

console.log(grid.ariaRowCount); // "24"
console.log(row.ariaRowIndex);  // "7"
// Meaning: this is row 7 of 24, even if it is the first body row in the DOM
Try It Yourself

How It Works

  1. Declare the total. ariaRowCount = "24" sets the full grid size.
  2. Create a visible row. Only this slice is in the DOM.
  3. Set absolute index. "7" means position 7 in the full set, not DOM index 0.
  4. Assistive tech. Users can understand “row 7 of 24” instead of guessing from the visible list.
Compatibility

Browser Support

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

✓ Baseline · Widely available

Element.ariaRowIndex

Supported in modern Chromium, Firefox, Safari, and Edge. Internet Explorer has no ariaRowIndex 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.ariaRowIndex Excellent

Bottom line: Safe for modern web apps. Keep 1-based string indexes in sync with aria-rowcount whenever you virtualize or page rows.

Frequently Asked Questions

It reflects the aria-rowindex attribute as a string integer that defines an element’s row position with respect to the total number of rows in a table, grid, or treegrid.
No. MDN marks Element.ariaRowIndex as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
1-based. The first row is "1", the second is "2", and so on. The value must be >= 1 and <= aria-rowcount when that total is known.
When only a subset of rows is in the DOM (virtualized or paged tables). If every row is present, browsers can calculate indexes and you usually omit it (MDN).
ariaRowCount is the total rows on the table/grid. ariaRowIndex is where a specific row or cell sits inside that full set — for example row 7 of 24.
Put it on each row. On cells it is optional, except spanning cells: if a cell spans rows, aria-rowindex is required on that cell (MDN).

Next: ariaRowIndexText

Learn the reflected aria-rowindextext property for a human-readable row position.

ariaRowIndexText 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)

11 people found this page helpful

JavaScript Element ariaRowCount Property JavaScript Element ariaRowIndexText Property