Standards · ARIA

Property Widget state

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-setsize on 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-setsize across siblings — one item says 100, the next says 99.
  • Using aria-setsize on 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 -1 are meaningful.
  • Forgetting aria-posinset. aria-setsize alone 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>