aria-setsize attribute defines the number of items in the current set of listitems or treeitems when not all items in the set are present in the DOM.
Browsers automatically calculate the set size and position for each item in a group of items, like the number of
<li>s in a list, buttons in a same-named group of radio buttons, and
<option>}s in a
<select>. Assistive technologies, like screen readers, take advantage of this state management to report set sizes to the user.
When the DOM is not complete, the browser calculation of the number of items in a set can be incorrect. When only a subset of items, such as list items, are loaded into the DOM, the browser calculates the number of items based only on those present. The
aria-setsize attribute should be used to override the browser's incorrect count. It defines the number of items in the current set of listitems or treeitems had the entire set been loaded.
aria-setsize attribute is set on each item, rather than on any containing element. The value is the same for each item: an integer reflecting number of items in the complete set, or
-1 if the set size is unknown. If all the items are present in the DOM, the browser can calculate the set size and the position of each item, making both
Elements with the
aria-setsize generally have the
aria-posinset attribute included as well to indicate the position of that item within the set. The
aria-posinset value is between
1 and the positive value of
For example, in a page's comments section, When comments in are not all in the DOM, such as when comments are paginated, the level, total number of comments, and position of each comment should be set with ARIA. The hierarchical level of comments can be indicated with
aria-level. Group positional information is indicated with
When a feed has a static number of articles,
aria-setsize can be added to each article element with the value being either the total number of articles loaded or the total number in the feed. The value chosen depends on which value is most helpful to users. If the number of articles is extremely large, indefinite, or changes often,
aria-setsize="-1" can be set to communicate the size of the set is unknown.
In a tree view, if the complete set of available nodes is not present in the DOM due to dynamic loading as the user moves focus in or scrolls the tree, each node has
The following example shows items 5 through 8 in a set of 16.
<h2 id="label_fruit"> Available Fruit </h2> <ul role="listbox" aria-labelledby="label_fruit"> <li role="option" aria-setsize="16" aria-posinset="5">apples</li> <li role="option" aria-setsize="16" aria-posinset="6">bananas</li> <li role="option" aria-setsize="16" aria-posinset="7">cantaloupes</li> <li role="option" aria-setsize="16" aria-posinset="8">dates</li> </ul>
To orient the user, assistive technologies would list the bananas above as "item 6 out of 16."
The number of items in the full set or
-1is the set size is unknown.
|Accessible Rich Internet Applications (WAI-ARIA) |