JavaScript Element ariaPosInSet Property

What You’ll Learn

Element.ariaPosInSet is an instance property that reflects the aria-posinset attribute. Learn how it marks an item’s position in a set of listitems or treeitems, how to pair it with aria-setsize, and how to get or set the property from JavaScript—with five examples and try-it labs.

Introduction

Screen readers often announce list position—“item 2 of 5”—when you move through a native <ul> or <ol>. Custom listitems may not expose that order unless you declare it.

aria-posinset marks an item’s position in the current set. ariaPosInSet is the JavaScript reflection of that attribute.

const el = document.getElementById("article2");
console.log(el.ariaPosInSet); // "2"
el.ariaPosInSet = "3";

Understanding the Property

MDN: the ariaPosInSet property of the Element interface reflects the value of the aria-posinset attribute, which defines the element’s number or position in the current set of listitems or treeitems.

• Reflected attribute — mirrors aria-posinset.
• Get / set — readable and writable string containing an integer.
• Pair with — aria-setsize for total set size.
• Baseline — widely available since October 2023 (MDN).

📝 Syntax

ariaPosInSet

Value

A string containing an integer.

📋 MDN Example Shape

MDN starts with aria-posinset="2" on an article, then updates it to "3" with the property:

<article id="article1" aria-posinset="1">…</article>
<article id="article2" aria-posinset="2">…</article>

let el = document.getElementById("article2");
console.log(el.ariaPosInSet); // "2"
el.ariaPosInSet = "3";
console.log(el.ariaPosInSet); // "3"

Examples Gallery

Examples follow MDN Element: ariaPosInSet. Labs use article and role="listitem" elements so you can safely read and write the property.

const el = document.getElementById("article2");
console.log(el.ariaPosInSet);

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

2

let el = document.getElementById("article2");
console.log(el.ariaPosInSet); // "2"
el.ariaPosInSet = "3";
console.log(el.ariaPosInSet); // "3"

2
3

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({
  ariaPosInSet: el.ariaPosInSet,
  ariaSetSize: el.ariaSetSize,
  attr: el.getAttribute("aria-posinset")
});

{
  "ariaPosInSet": "2",
  "ariaSetSize": "5",
  "attr": "2"
}

const el = document.createElement("article");
el.setAttribute("aria-posinset", "1");
el.textContent = "First article";
document.body.appendChild(el);

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

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

console.log({
  supported: "ariaPosInSet" in Element.prototype,
  type: "string containing an integer",
  pairWith: "ariaSetSize / aria-setsize",
  tip: "Prefer native ul/ol when possible (MDN)",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "type": "string containing an integer",
  "pairWith": "ariaSetSize / aria-setsize",
  "tip": "Prefer native ul/ol when possible (MDN)",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Custom role="listitem" widgets that cannot use <li> in a native list.
• Updating position when items are reordered in a virtual list or feed.
• Tree items that expose position within a sibling group via aria-posinset.
• Design-system components that render lists as non-list markup.
• Keeping script and markup aligned without manual setAttribute.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Prefer native <ul> / <ol> when possible (MDN note).
• Pair with aria-setsize on every item in the set.
• Value is a string containing an integer, not a Number type.
• Related: ariaPlaceholder, ariaPressed, ariaLabel, JavaScript hub.

💡 Best Practices