JavaScript Element ariaRowCount Property

What You’ll Learn

Element.ariaRowCount is an instance property that reflects the aria-rowcount attribute. Learn how it declares the total number of rows 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 tall a data table or grid is—even when only some rows are rendered in the DOM (virtualized or paged rows).

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

const el = document.getElementById("semantic-table");
console.log(el.ariaRowCount); // "100"
el.ariaRowCount = "101";

Understanding the Property

MDN: the ariaRowCount property of the Element interface reflects the value of the aria-rowcount attribute, which defines the total number of rows in a table, grid, or treegrid.

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

📝 Syntax

ariaRowCount

Value

A string which contains an integer—the total number of rows.

📋 Semantic Table (MDN Shape)

MDN sets aria-rowcount="100" on a table (representing the full data set, not only the visible rows), then updates it to "101" via the property:

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

let el = document.getElementById("semantic-table");
console.log(el.ariaRowCount); // 100
el.ariaRowCount = "101";
console.log(el.ariaRowCount); // 101

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

Examples Gallery

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

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

// HTML includes: aria-rowcount="100"

100

let el = document.getElementById("semantic-table");
console.log(el.ariaRowCount); // 100
el.ariaRowCount = "101";
console.log(el.ariaRowCount); // 101

100
101

const table = document.createElement("table");
table.setAttribute("role", "table");
table.ariaRowCount = "100";
table.ariaColCount = "2";
document.body.appendChild(table);

console.log({
  ariaRowCount: table.ariaRowCount,
  ariaColCount: table.ariaColCount
});

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

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

el.ariaRowCount = "101";
console.log({
  fromProperty: el.ariaRowCount,
  fromAttribute: el.getAttribute("aria-rowcount"),
  same: el.ariaRowCount === el.getAttribute("aria-rowcount")
});

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

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

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

🚀 Common Use Cases

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

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Value is a string containing an integer for the row count.
• Often used with aria-colcount and cell aria-rowindex.
• Related: ariaRoleDescription, ariaColCount, ariaRowIndex, JavaScript hub.

💡 Best Practices