aria-setsize — Defining the Size of 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-setsize defines the total number of items in a set, used with aria-posinset when not all items are in the DOM, enabling screen readers to announce item N of M context.

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

What You'll Learn

By the end of this lesson, you'll understand when to set aria-setsize, how it pairs with aria-posinset, and how it helps in paginated or virtual-scrolled lists.

Why It Matters

Users navigating search results or long lists need to know the total count. "Item 3 of 100" provides critical orientation context.

Real-World Use

Durga Antivirus Pro uses aria-setsize on threat list items to tell users how many total threats were found during a scan.

Set Size Context

flowchart LR
  A[Set items rendered] --> B{All items in DOM?}
  B -->|Yes| C[No aria-setsize needed]
  B -->|No, paginated| D[Set aria-setsize on each item]
  D --> E[aria-setsize='total count']
  E --> F[Screen reader announces 'N of M']

How aria-setsize Works

aria-setsize specifies the total number of elements in a set. It is placed on each item in the set:

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

Screen reader: "Result 1, option, 1 of 57".

Dynamic aria-setsize

Update aria-setsize when the total changes:

function updatePagination(items, total) {
  items.forEach((item, index) => {
    item.setAttribute('aria-posinset', index + 1);
    item.setAttribute('aria-setsize', total);
  });
}

When to Use

Use aria-setsize with aria-posinset when:

• Items are paginated (only a subset rendered)
• Virtual scrolling is used
• Items are loaded lazily as the user scrolls
• The set size is known but not all items exist in the DOM

Common Mistakes

• Using aria-setsize without aria-posinset: Both are needed together.
• Setting aria-setsize when all items are in the DOM: Screen readers calculate this automatically.
• Using incorrect total count: An inaccurate aria-setsize misleads users.
• Not updating when items are filtered: The total must reflect the current filtered set.
• Using default values: Always provide explicit total counts.

Practice and Challenge

1. What does aria-setsize define? The total number of items in a set.

2. What attribute must pair with aria-setsize? aria-posinset.

3. Should you use aria-setsize when all items are in the DOM? No, screen readers calculate the size automatically.

4. When should you use aria-setsize? When items are paginated, virtual-scrolled, or lazy-loaded.

5. Challenge: Create a paginated list with 10 items per page and a total of 100 items. Use aria-posinset and aria-setsize correctly.

FAQ

Mini Project

Build a search results page that shows 5 results per page with 50 total results. Use aria-posinset and aria-setsize on each result. Include pagination controls.

What's Next

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