JavaScript Element ariaColIndex Property

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

Definition

In JavaScript, the ariaColIndex property of Element reflects 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 (MDN).

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

Syntax

Use el.ariaColIndex. Start with this line.

JavaScript
el.ariaColIndex
CallWhat it does
el.ariaColIndexPrimary signature.

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

Library declarations
JavaScript
el.ariaColIndex

Parameters

ParameterDescription
Cell / header / rowRequired. Where ariaColIndex is set
String integer ≥ 1Required. Position in the full column set

Return Value

Return ValueDescription
*The current value of el.ariaColIndex.

JavaScript Examples

Example 1 — Read ariaColIndex

MDN-style header: read the reflected column-index string.

JavaScript
const el = document.getElementById("role-heading");
console.log(el.ariaColIndex); // "1"
Try It Yourself

How It Works

  1. Select the header/cell. The element that owns aria-colindex.
  2. Read ariaColIndex. Returns the reflected string integer.
  3. Expect text digits. "1", not the number 1.
  4. Meaning. Position in the full table (1-based).

Example 2 — Get and Set (MDN)

Update the column index from script.

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

How It Works

  1. Log the start value. Matches the HTML attribute.
  2. Assign a string. Prefer "2" over the number 2.
  3. Read again. Confirms the property (and attribute) updated.
  4. Stay in range. Index must be ≤ ariaColCount when that is set.

Example 3 — Partial / Non-Contiguous Columns

Show columns 1, 2, 5, and 6 of a 6-column table (MDN pattern).

JavaScript
const table = document.querySelector("table");
const headers = table.querySelectorAll("th");

table.ariaColCount = "6";

// Visible columns are 1, 2, 5, 6 in the FULL table
const fullIndexes = ["1", "2", "5", "6"];
headers.forEach((th, i) => {
  th.ariaColIndex = fullIndexes[i];
});

headers.forEach((th) => {
  console.log(th.textContent.trim(), "→", th.ariaColIndex);
});
Try It Yourself

How It Works

  1. Announce the full width. ariaColCount = "6".
  2. Map visible headers. Each gets its real full-table index.
  3. Skip gaps honestly. Showing cols 1,2,5,6 means indexes jump to "5".
  4. Non-contiguous rule. Set index on every cell when columns are not contiguous (MDN).
Compatibility

Browser Support

Element.ariaColIndex is Baseline Widely available (MDN: across browsers since October 2023). It is not Deprecated, Experimental, or Non-standard.

✓ Baseline Widely available

Element.ariaColIndex

Reflects aria-colindex as a 1-based string integer. Pair with ariaColCount when only some columns are in the DOM.

Baseline Widely available
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
ariaColIndex Baseline

Bottom line: Safe for modern apps. Use 1-based string indexes, keep them ≤ ariaColCount, and label non-contiguous columns on every cell.

Frequently Asked Questions

It reflects the aria-colindex attribute as a string integer that defines an element’s column index or position with respect to the total number of columns in a table, grid, or treegrid (MDN).
No. MDN marks Element.ariaColIndex as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
A string that contains an integer (for example "1" or "2"), not a Number type. Values are ≥ 1 and ≤ the full column count.
1-based. The first column is "1", the second is "2", and so on (MDN).
ariaColCount is the total number of columns on the table/grid. ariaColIndex is this cell or header’s position within that total — especially when some columns are missing from the DOM.
Yes. Reading and writing ariaColIndex updates the reflected aria-colindex attribute.

Next: ariaColIndexText

Learn the Element property that reflects aria-colindextext for human-readable column indexes.

ariaColIndexText 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 ariaColCount Property JavaScript Element ariaColIndexText Property