JavaScript Element ariaColCount Property

What You’ll Learn

Element.ariaColCount is an instance property that reflects the aria-colcount attribute. Learn how it declares the total number of columns in a table, grid, or treegrid, when it matters for partial DOM tables, and how to get or set it from JavaScript—with five examples and try-it labs.

Introduction

Assistive technologies need to know how wide a data table or grid is—even when only some columns are rendered in the DOM (virtualized or paged columns).

aria-colcount declares that total. The DOM property ariaColCount lets you read and update it from JavaScript.

const el = document.getElementById("semantic-table");
console.log(el.ariaColCount); // "2"
el.ariaColCount = "3";

Understanding the Property

MDN: the ariaColCount property of the Element interface reflects the value of the aria-colcount attribute, which defines the number of columns in a table, grid, or treegrid.

• Reflected attribute — mirrors aria-colcount.
• Get / set — readable and writable string.
• Total columns — may be larger than columns currently in the DOM.
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaColCount

Value

A string representing the total number of columns.

📋 Semantic Table (MDN Shape)

MDN sets aria-colcount="2" on a table (with aria-rowcount="100"), then updates the column count to "3" via the property:

<table
  id="semantic-table"
  role="table"
  aria-label="Semantic Elements"
  aria-rowcount="100"
  aria-colcount="2">
  <caption>Semantic Elements to use instead of ARIA's roles</caption>
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader">ARIA Role</th>
      <th role="columnheader">Semantic Element</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell">header</td>
      <td role="cell">h1</td>
    </tr>
  </tbody>
</table>

Prefer a real <table> with semantic headers when you can. Use ARIA column counts when you need to describe a larger logical grid than what is currently rendered.

Examples Gallery

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

const el = document.getElementById("semantic-table");
console.log(el.ariaColCount);

// HTML includes: aria-colcount="2"

2

let el = document.getElementById("semantic-table");
console.log(el.ariaColCount); // 2
el.ariaColCount = "3";
console.log(el.ariaColCount); // 3

2
3

const table = document.createElement("table");
table.setAttribute("role", "table");
table.setAttribute("aria-rowcount", "100");
table.ariaColCount = "4";
document.body.appendChild(table);

console.log({
  ariaColCount: table.ariaColCount,
  ariaRowCount: table.getAttribute("aria-rowcount")
});

{
  "ariaColCount": "4",
  "ariaRowCount": "100"
}

const el = document.createElement("table");
el.setAttribute("aria-colcount", "2");
document.body.appendChild(el);

el.ariaColCount = "5";
console.log({
  fromProperty: el.ariaColCount,
  fromAttribute: el.getAttribute("aria-colcount"),
  same: el.ariaColCount === el.getAttribute("aria-colcount")
});

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

console.log({
  supported: "ariaColCount" in Element.prototype,
  tip: "Declare total columns even if not all are in the DOM",
  valueType: "string (not Number)",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "tip": "Declare total columns even if not all are in the DOM",
  "valueType": "string (not Number)",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Data tables that expose a total column count to AT.
• Virtualized grids where only some columns are rendered.
• Treegrids and spreadsheet-like widgets with dynamic columns.
• Keeping script and markup aligned without manual setAttribute.
• Pairing with aria-rowcount for full table dimensions.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Value is a string representing the column count.
• Often used with aria-rowcount and cell aria-colindex.
• Related: ariaColIndex, ariaChecked, EventTarget, JavaScript hub.

💡 Best Practices