JavaScript Element ariaRowSpan Property

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

Definition

Element.ariaRowSpan reflects the aria-rowspan attribute: how many rows a cell or gridcell spans in a table, grid, or treegrid (MDN). The value is a string integer (for example "3").

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

Syntax

Use el.ariaRowSpan. Start with this line.

JavaScript
el.ariaRowSpan / el.ariaRowSpan = value
CallWhat it does
el.ariaRowSpan / el.ariaRowSpan = valuePrimary signature.

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

Library declarations
JavaScript
el.ariaRowSpan / el.ariaRowSpan = value

Parameters

ParameterDescription
Cell / gridcell / headerRequired. Element that covers multiple rows
String integerRequired. Span count; "0" = rest of row group
Visual layoutRequired. CSS / structure must match the announced span

Return Value

Return ValueDescription
*The current value of el.ariaRowSpan.

JavaScript Examples

Example 1 — Read ariaRowSpan

Log how many rows a spanning heading covers.

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

// HTML: <th … rowspan="3" aria-rowspan="3">
Try It Yourself

How It Works

  1. Find the cell. getElementById returns the heading cell.
  2. Read the reflection. ariaRowSpan returns the aria-rowspan string.
  3. Interpret "3". Assistive technologies treat the cell as covering three rows.
  4. Missing attribute. If unset, many browsers return null (default meaning is still one row).

Example 2 — Update the Span (MDN)

MDN: change the reported span from "3" to "2".

JavaScript
const el = document.getElementById("spanning-heading");

console.log(el.ariaRowSpan); // "3"
el.ariaRowSpan = "2";
console.log(el.ariaRowSpan); // "2"
console.log(el.getAttribute("aria-rowspan")); // "2"
Try It Yourself

How It Works

  1. Start at 3. The first log shows the initial span.
  2. Assign a string. el.ariaRowSpan = "2" updates the reflected attribute.
  3. Confirm both sides. Property and getAttribute both report "2".
  4. In a native table. Also update HTML rowspan (and layout) so sighted users match AT.

Example 3 — Span in an ARIA Gridcell

Use ariaRowSpan with ariaRowIndex on a custom grid cell.

JavaScript
const cell = document.createElement("div");
cell.setAttribute("role", "gridcell");
cell.ariaRowIndex = "9";
cell.ariaRowSpan = "2";
cell.textContent = "Goalkeeper";

console.log(cell.ariaRowIndex); // "9"
console.log(cell.ariaRowSpan);  // "2"
// Starts at row 9 and covers two rows in the accessibility tree
Try It Yourself

How It Works

  1. Create a gridcell. Custom grids use roles instead of native <td>.
  2. Set the start row. ariaRowIndex = "9" is where the span begins.
  3. Set the span. ariaRowSpan = "2" covers rows 9 and 10.
  4. Style separately. Make the cell look two rows tall in CSS so visuals match ARIA.
Compatibility

Browser Support

Element.ariaRowSpan is Baseline Widely available (MDN: across browsers since October 2023).

✓ Baseline · Widely available

Element.ariaRowSpan

Supported in modern Chromium, Firefox, Safari, and Edge. Internet Explorer has no ariaRowSpan IDL — use getAttribute / setAttribute there.

95% Modern browser support
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
Element.ariaRowSpan Excellent

Bottom line: Safe for modern web apps. Prefer HTML rowspan in native tables; use ariaRowSpan for ARIA grids and keep visual layout in sync.

Frequently Asked Questions

It reflects the aria-rowspan attribute as a string integer that defines how many rows a cell or gridcell spans in a table, grid, or treegrid.
No. MDN marks Element.ariaRowSpan as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
A string containing an integer (for example "2" or "3"). "0" means span all remaining rows in the row group. The default is "1".
On a native <td>/<th> inside a real <table>, use the HTML rowspan attribute. aria-rowspan is for ARIA cells/gridcells (and can mirror rowspan). If both are present, rowspan takes precedence (MDN).
No. Like other ARIA attributes, it only updates the accessibility tree. For non-semantic grids you must style the visual span with CSS yourself (MDN).
ariaRowIndex is the starting row. ariaRowSpan is how many rows the cell covers from that start. Pair them on spanning cells in partial tables.

Next: ariaSelected

Learn the reflected aria-selected property for selected options, tabs, and grid cells.

ariaSelected 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 ariaRowIndexText Property JavaScript Element ariaSelected Property