JavaScript Element ariaSetSize Property

What You’ll Learn

Element.ariaSetSize is an instance property that reflects the aria-setsize attribute. Learn how it declares the total number of items in a set, how it pairs with ariaPosInSet, and how to get or set it from JavaScript—with five examples and try-it labs.

Introduction

Screen readers often announce “item 2 of 5” or “tab 1 of 3.” The “of N” part is the set size—how many items belong to the group.

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

const el = document.getElementById("tab-id");
console.log(el.ariaSetSize); // "3"
el.ariaSetSize = "4";

Understanding the Property

MDN: the ariaSetSize property of the Element interface reflects the value of the aria-setsize attribute, which defines the number of items in the current set of listitems or treeitems.

• Reflected attribute — mirrors aria-setsize.
• Get / set — readable and writable string integer.
• Total count — how many items belong to the set.
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaSetSize

Value

A string which contains an integer (the number of items in the set).

📋 MDN Tab Example Shape

MDN starts with a tab marked aria-setsize="3" (three tabs in the group), then updates ariaSetSize to "4":

<button
  role="tab"
  aria-selected="true"
  aria-setsize="3"
  aria-controls="tabpanel-id"
  id="tab-id">
  Tab label
</button>

let el = document.getElementById("tab-id");
console.log(el.ariaSetSize); // "3"
el.ariaSetSize = "4";
console.log(el.ariaSetSize); // "4"

When you add or remove tabs, update ariaSetSize on every tab in the set (and keep each ariaPosInSet accurate).

Examples Gallery

Examples follow MDN Element: ariaSetSize. Labs use a tab with aria-setsize so you can safely read and write the property.

const el = document.getElementById("tab-id");
console.log(el.ariaSetSize);

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

3

let el = document.getElementById("tab-id");
console.log(el.ariaSetSize); // "3"
el.ariaSetSize = "4";
console.log(el.ariaSetSize); // "4"

3
4

const el = document.createElement("div");
el.setAttribute("role", "listitem");
el.textContent = "Second item";
document.body.appendChild(el);

el.ariaPosInSet = "2";
el.ariaSetSize = "5";
console.log({
  position: el.ariaPosInSet,
  total: el.ariaSetSize,
  spokenLike: "item 2 of 5"
});

{
  "position": "2",
  "total": "5",
  "spokenLike": "item 2 of 5"
}

const el = document.createElement("button");
el.setAttribute("role", "tab");
el.setAttribute("aria-setsize", "3");
el.textContent = "Tab label";
document.body.appendChild(el);

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

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

console.log({
  supported: "ariaSetSize" in Element.prototype,
  pairWith: "ariaPosInSet / aria-posinset",
  valueType: "string integer",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "pairWith": "ariaPosInSet / aria-posinset",
  "valueType": "string integer",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Announcing how many tabs are in a custom tablist.
• Virtualized lists where only a window of items is in the DOM.
• Custom listitem / treeitem sets without native <ul> order.
• Updating totals when users add or remove items dynamically.
• 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 native lists when they already express size and order.
• Related: ariaSelected, ariaPosInSet, ariaSort, JavaScript hub.

💡 Best Practices