JavaScript Element ariaRowSpan Property

What You’ll Learn

Element.ariaRowSpan is an instance property that reflects the aria-rowspan attribute. Learn how it declares how many rows a cell or gridcell spans, how it relates to HTML rowspan and ariaRowIndex, 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 row—like a category label that sits beside several data rows. Assistive technologies need that height as part of the grid model.

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

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

Understanding the Property

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

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

📝 Syntax

ariaRowSpan

Value

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

📋 Spanning Heading (MDN Shape)

MDN starts with a heading spanning 3 rows, then updates ariaRowSpan to "2":

<table>
  <thead>
    <tr>
      <th id="spanning-heading" rowspan="3" aria-rowspan="3">
        Spanning heading
      </th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>One</td>
    </tr>
    <tr>
      <td>Two</td>
    </tr>
  </tbody>
</table>

Related: ariaRowIndex (starting row) and ariaRowCount (total rows). Also see ariaColSpan for the column-direction twin.

Examples Gallery

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

const el = document.getElementById("spanning-heading");
console.log(el.ariaRowSpan);

// HTML includes: aria-rowspan="3"

3

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

3
2

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

console.log({
  start: cell.ariaRowIndex,
  span: cell.ariaRowSpan,
  coversThrough: "rows 1 and 2"
});

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

const el = document.createElement("th");
el.setAttribute("aria-rowspan", "3");
document.body.appendChild(el);

el.ariaRowSpan = "2";
console.log({
  fromProperty: el.ariaRowSpan,
  fromAttribute: el.getAttribute("aria-rowspan"),
  same: el.ariaRowSpan === el.getAttribute("aria-rowspan")
});

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

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

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

🚀 Common Use Cases

• Merged cells in ARIA grids and treegrids (vertical merges).
• Updating span height when a custom grid layout changes.
• Keeping ARIA in sync with HTML rowspan on hybrid tables.
• Pairing with ariaRowIndex for start + height.
• 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 rowspan for native table layout when possible.
• Related: ariaRowIndexText, ariaRowIndex, ariaSelected, ariaColSpan, JavaScript hub.

💡 Best Practices