JavaScript Element ariaColIndex Property

What You’ll Learn

Element.ariaColIndex is an instance property that reflects the aria-colindex attribute. Learn how it declares a cell or header’s 1-based column position within a table, grid, or treegrid, how it pairs with ariaColCount, 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 columns (or reorders them), assistive technologies still need to know which logical column a cell belongs to.

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

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

Understanding the Property

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

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

📝 Syntax

ariaColIndex

Value

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

📋 Column Header Index (MDN Shape)

MDN sets aria-colindex="1" on the first column header, then updates it to "2" 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 Role
      </th>
      <th role="columnheader" id="element-heading" aria-rowindex="1">
        Semantic Element
      </th>
    </tr>
  </thead>
</table>

Related property: ariaColCount declares the total number of columns on the container.

Examples Gallery

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

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

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

1

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

1
2

const table = document.createElement("table");
table.setAttribute("role", "table");
table.ariaColCount = "4";

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

console.log({
  tableColCount: table.ariaColCount,
  cellColIndex: cell.ariaColIndex
});

{
  "tableColCount": "4",
  "cellColIndex": "3"
}

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

el.ariaColIndex = "4";
console.log({
  fromProperty: el.ariaColIndex,
  fromAttribute: el.getAttribute("aria-colindex"),
  same: el.ariaColIndex === el.getAttribute("aria-colindex")
});

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

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

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

🚀 Common Use Cases

• Marking column headers and cells with their logical position.
• Virtualized grids where only a subset of columns is in the DOM.
• Reordering columns while keeping stable logical indexes.
• Pairing with aria-rowindex 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; indexes are 1-based.
• Pairs with ariaColCount and often aria-rowindex.
• Related: ariaColIndexText, ariaColCount, EventTarget, JavaScript hub.

💡 Best Practices