JavaScript Element ariaColSpan Property

What You’ll Learn

Element.ariaColSpan is an instance property that reflects the aria-colspan attribute. Learn how it declares how many columns a cell or gridcell spans, how it relates to HTML colspan and ariaColIndex, and how to get or set it from JavaScript—with five examples and try-it labs.

Introduction

Some table cells stretch across more than one column—like a merged header or a “Spanning” cell. Assistive technologies need that width as part of the grid model.

aria-colspan declares the span count. The DOM property ariaColSpan lets you read and update it from JavaScript.

const el = document.getElementById("spanning-column");
console.log(el.ariaColSpan); // "2"
el.ariaColSpan = "3";

Understanding the Property

MDN: the ariaColSpan property of the Element interface reflects the value of the aria-colspan attribute, which defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

• Reflected attribute — mirrors aria-colspan.
• Get / set — readable and writable string integer.
• Span width — how many columns the cell covers.
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaColSpan

Value

A string which contains an integer (the number of columns spanned).

📋 Spanning Cell (MDN Shape)

MDN starts with a cell spanning 2 columns, then updates ariaColSpan to "3":

<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2" aria-colspan="2" id="spanning-column">Spanning</td>
      <td>One</td>
    </tr>
  </tbody>
</table>

Related: ariaColIndex (starting column) and ariaColCount (total columns).

Examples Gallery

Examples follow MDN Element: ariaColSpan. Labs use a spanning table cell so you can safely read and write the property.

const el = document.getElementById("spanning-column");
console.log(el.ariaColSpan);

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

2

let el = document.getElementById("spanning-column");
console.log(el.ariaColSpan); // 2
el.ariaColSpan = "3";
console.log(el.ariaColSpan); // 3

2
3

const cell = document.createElement("td");
cell.setAttribute("role", "cell");
cell.ariaColIndex = "1";
cell.ariaColSpan = "2";
document.body.appendChild(cell);

console.log({
  start: cell.ariaColIndex,
  span: cell.ariaColSpan,
  coversThrough: "columns 1 and 2"
});

{
  "start": "1",
  "span": "2",
  "coversThrough": "columns 1 and 2"
}

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

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

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

console.log({
  supported: "ariaColSpan" in Element.prototype,
  tip: "Prefer HTML colspan for native tables; ariaColSpan for ARIA grids",
  valueType: "string integer",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "tip": "Prefer HTML colspan for native tables; ariaColSpan for ARIA grids",
  "valueType": "string integer",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Merged cells in ARIA grids and treegrids.
• Updating span width when a custom grid layout changes.
• Keeping ARIA in sync with HTML colspan on hybrid tables.
• Pairing with ariaColIndex for start + width.
• 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.
• Prefer HTML colspan for native table layout when possible.
• Related: ariaControlsElements, ariaColIndex, EventTarget, JavaScript hub.

💡 Best Practices