aria-posinset and aria-setsize — Position and Size in a Set

In this tutorial, you will learn about aria. We cover key concepts, practical examples, and best practices to help you master this topic.

aria-posinset and aria-setsize communicate an element's position within a set and the total set size to screen readers, essential when DOM order does not match logical set membership.

In this tutorial, you'll learn how to use aria-posinset and aria-setsize in ARIA.

What You'll Learn

By the end of this lesson, you'll understand when to use position-in-set attributes, how to calculate values for dynamic sets, and how screen readers announce them.

Why It Matters

Users in a paginated list, search results, or tree view need to know their position. "Item 3 of 15" gives context that helps users navigate efficiently.

Real-World Use

Durga Antivirus Pro uses aria-posinset and aria-setsize in its threat list to tell users which item they are on out of the total threats found.

Set Position Context

flowchart TD
  A[Items in a set] --> B{Are all items present in DOM?}
  B -->|Yes| C[Screen reader calculates position]
  B -->|No, virtual scrolling| D[Use aria-posinset and aria-setsize]
  D --> E[Specify position in full set]
  D --> F[Specify total set size]

How aria-posinset and aria-setsize Work

Use these when only a subset of items is in the DOM (pagination, virtual scrolling, Lazy Loading):

<div role="listbox" aria-label="Search results">
  <div role="option" aria-posinset="1" aria-setsize="100">Result 1</div>
  <div role="option" aria-posinset="2" aria-setsize="100">Result 2</div>
  <div role="option" aria-posinset="3" aria-setsize="100">Result 3</div>
</div>

The screen reader announces "Result 1, option, 1 of 100".

Dynamic Values

Update these attributes when the set changes:

function updateResults(results, totalCount) {
  results.forEach((element, index) => {
    element.setAttribute('aria-posinset', index + 1);
    element.setAttribute('aria-setsize', totalCount);
  });
}

When NOT to Use

Do not use aria-posinset and aria-setsize when all items are in the DOM. Screen readers can calculate the position from the DOM structure:

<!-- All items in DOM: no need for posinset/setsize -->
<ul role="listbox">
  <li role="option">Item 1</li>
  <li role="option">Item 2</li>
  <li role="option">Item 3</li>
</ul>

Screen readers announce "Item 1, option, 1 of 3" automatically.

Common Mistakes

• Using aria-posinset without aria-setsize: Both are needed to convey context.
• Using them when all items are in the DOM: Redundant and can conflict with native calculation.
• Using zero-based indexing: aria-posinset starts at 1.
• Not updating when items are added or removed: Stale values give false information.
• Using them on non-set roles: The parent element must be a set container like listbox, radiogroup, or tree.

Practice and Challenge

1. What does aria-posinset indicate? The element's position within a set, starting from 1.

2. When should you use aria-posinset and aria-setsize? When not all items in the set are present in the DOM simultaneously.

3. What is the starting value for aria-posinset? 1.

4. What happens if you use aria-posinset without aria-setsize? The screen reader has position but not total context.

5. Challenge: Create a paginated list of 50 items showing 5 per page. Use aria-posinset and aria-setsize to reflect the full set.

FAQ

Mini Project

Create a virtual-scrolling listbox with 1000 items. Only render 10 items in the DOM at a time. Use aria-posinset and aria-setsize to communicate the true position.

What's Next

Continue to aria-sort to learn about sorting state in tables and grids.