JavaScript Element ariaRowIndexText Property

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

Definition

Element.ariaRowIndexText reflects the aria-rowindextext attribute: a human-readable text alternative of aria-rowindex (MDN). Use it when a spoken label is clearer than the numeric index alone.

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

Syntax

Use el.ariaRowIndexText. Start with this line.

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

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

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

Parameters

ParameterDescription
aria-rowindexRequired. Machine-usable numeric position
aria-rowindextextOptional. Human-readable alternative string

Return Value

Return ValueDescription
*The current value of el.ariaRowIndexText.

JavaScript Examples

Example 1 — Read ariaRowIndexText

Log the human-readable row label from a header cell.

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

// HTML: aria-rowindex="1" aria-rowindextext="Heading row"
Try It Yourself

How It Works

  1. Find the cell. getElementById returns the header node.
  2. Read the reflection. ariaRowIndexText returns the aria-rowindextext string.
  3. Interpret the label. Assistive tech can announce “Heading row” instead of only “1”.
  4. Missing attribute. If unset, many browsers return null.

Example 2 — Update the Label (MDN)

MDN: change the text from "Heading row" to "Updated heading row".

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

console.log(el.ariaRowIndexText); // "Heading row"
el.ariaRowIndexText = "Updated heading row";
console.log(el.ariaRowIndexText); // "Updated heading row"
console.log(el.getAttribute("aria-rowindextext"));
Try It Yourself

How It Works

  1. Read the old string. The first log shows "Heading row".
  2. Assign the property. Writing ariaRowIndexText updates the reflected attribute.
  3. Confirm both sides. Property and getAttribute match after the write.
  4. Keep the number. Leave aria-rowindex alone unless the absolute position also changed.

Example 3 — Always Pair with ariaRowIndex

Set both the numeric index and a clearer text label together.

JavaScript
const row = document.createElement("div");
row.setAttribute("role", "row");
row.ariaRowIndex = "7";
row.ariaRowIndexText = "Row 7 of results";

console.log(row.ariaRowIndex);     // "7"
console.log(row.ariaRowIndexText); // "Row 7 of results"
// AT can track position with 7 and speak the friendlier text
Try It Yourself

How It Works

  1. Create a row. Partial tables/grids often use role="row".
  2. Set the number first. ariaRowIndex = "7" is the machine-usable position.
  3. Add the text. ariaRowIndexText explains that position in plain language.
  4. MDN rule. Text is an addition — never drop the numeric index.
Compatibility

Browser Support

Element.ariaRowIndexText is Baseline Newly available (MDN: since December 2025). It works across the latest devices and browser versions, but may be missing in older ones.

✓ Baseline · Newly available

Element.ariaRowIndexText

Present in current Chromium, Firefox, Safari, and Edge releases that ship the December 2025 Baseline set. Prefer feature detection before relying on the IDL property.

80% Latest 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.ariaRowIndexText Newly available

Bottom line: Safe on modern evergreen browsers from late 2025 onward. Keep aria-rowindex always; treat ariaRowIndexText as a progressive enhancement and feature-detect when needed.

Frequently Asked Questions

It reflects the aria-rowindextext attribute as a string — a human-readable text alternative for the numeric aria-rowindex value.
No. MDN marks Element.ariaRowIndexText as Baseline Newly available (since December 2025). It is not Deprecated, Experimental, or Non-standard. It may be missing in older browsers.
ariaRowIndex is the 1-based numeric position (for example "1"). ariaRowIndexText is optional friendly wording that describes that position (for example "Heading row" or "A" on a chessboard).
No. MDN says it should only be included in addition to, not as a replacement of, aria-rowindex. Some assistive technologies rely on the numeric index for position tracking.
When the integer is not meaningful for users — for example chess ranks/files, Battleship coordinates, or a label like "Heading row" instead of just "1".
Yes. Reading and writing ariaRowIndexText updates the reflected aria-rowindextext attribute. Keep aria-rowindex in sync as well.

Next: ariaRowSpan

Learn the reflected aria-rowspan property for cells that span multiple rows.

ariaRowSpan 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 ariaRowIndex Property JavaScript Element ariaRowSpan Property