JavaScript Element ariaColIndexText Property

What You’ll Learn

Element.ariaColIndexText is an instance property that reflects the aria-colindextext attribute. Learn how it provides a human-readable alternative to numeric ariaColIndex, 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-colindex tells assistive technologies which column number a cell is in (for example "1"). Sometimes a spoken phrase is clearer than that number alone—for example “Aria Role column.”

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

const el = document.getElementById("role-heading");
console.log(el.ariaColIndexText); // "Aria Role column"
el.ariaColIndexText = "New column name";

Understanding the Property

MDN: the ariaColIndexText property of the Element interface reflects the value of the aria-colindextext attribute, which defines a human readable text alternative of aria-colindex.

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

📝 Syntax

ariaColIndexText

Value

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

⚖️ ariaColIndex vs ariaColIndexText

📋 Column Header 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-rowindex="1"
        aria-colindex="1"
        aria-colindextext="Aria Role column">
        ARIA Role
      </th>
      <th role="columnheader" id="element-heading" aria-rowindex="1">
        Semantic Element
      </th>
    </tr>
  </thead>
</table>

Examples Gallery

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

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

// HTML includes: aria-colindextext="Aria Role column"

Aria Role column

let el = document.getElementById("role-heading");
console.log(el.ariaColIndexText); // Aria Role column
el.ariaColIndexText = "New column name";
console.log(el.ariaColIndexText); // New column name

Aria Role column
New column name

const th = document.createElement("th");
th.setAttribute("role", "columnheader");
th.ariaColIndex = "2";
th.ariaColIndexText = "Status column";
document.body.appendChild(th);

console.log({
  ariaColIndex: th.ariaColIndex,
  ariaColIndexText: th.ariaColIndexText
});

{
  "ariaColIndex": "2",
  "ariaColIndexText": "Status column"
}

const el = document.createElement("th");
el.setAttribute("aria-colindextext", "Aria Role column");
document.body.appendChild(el);

el.ariaColIndexText = "New column name";
console.log({
  fromProperty: el.ariaColIndexText,
  fromAttribute: el.getAttribute("aria-colindextext"),
  same: el.ariaColIndexText === el.getAttribute("aria-colindextext")
});

{
  "fromProperty": "New column name",
  "fromAttribute": "New column name",
  "same": true
}

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

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

🚀 Common Use Cases

• Friendlier spoken labels for spreadsheet-style column letters/numbers.
• Custom grids where column titles differ from visible header text.
• Localizing how column position is announced.
• Updating readable labels when a column 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 ariaColIndex — does not replace it.
• Related: ariaColSpan, ariaColIndex, EventTarget, JavaScript hub.

💡 Best Practices