aria-setsize
Total number of items in a set when the DOM does not contain them all. Pairs with aria-posinset so a screen reader can announce "item 14 of 5,000" even if only five are rendered. Use -1 if the total is unknown.
When to use
Whenever you use aria-posinset. The two attributes are a pair: position is meaningless without the total. Common cases are virtualized lists, paginated grids, filtered comboboxes, and infinite-scroll feeds — anywhere the DOM only contains a window into a larger collection.
Valid on items inside containers that are inherently set-like: option, menuitem, treeitem, tab, row, article inside a feed. The attribute goes on the items, not the container.
How it behaves
The value is an integer. Use the true total when you know it. Use -1 when the total is genuinely unbounded or unknown — a live search feed that keeps loading more results, for example. Some screen readers announce -1 as “many” or just omit the count; others silently fall back to the sibling count.
Update aria-setsize whenever the underlying set changes: a new filter, a sort, a deleted row. Every item in the visible window has to carry the same aria-setsize value; mismatched values across siblings produce confusing announcements like “1 of 10” then “2 of 9”.
Common failures
- Setting
aria-setsizeon the container instead of on each item. The attribute is per-item. - Forgetting to update the value after a filter or sort, so the user hears the unfiltered total even though many results are no longer reachable.
- Inconsistent
aria-setsizeacross siblings — one item says100, the next says99. - Using
aria-setsizeon items whose container already includes every item in DOM order. The AT was counting correctly; adding the attribute introduces drift. - Zero or negative values other than
-1. Only positive integers and-1are meaningful. - Forgetting
aria-posinset.aria-setsizealone tells the user how many items exist but not where they are.
Example
<!-- Tree where lazy-loaded children are added as the user expands branches -->
<ul role="tree" aria-label="Files">
<li
role="treeitem"
aria-level="2"
aria-posinset="1"
aria-setsize="248"
>
invoice-001.pdf
</li>
<li
role="treeitem"
aria-level="2"
aria-posinset="2"
aria-setsize="248"
>
invoice-002.pdf
</li>
<!-- 246 more, lazy-loaded as user scrolls -->
</ul>