Properties

WAI-ARIA: aria-setsize (Property)

Authored By :Raghavendra Satish Peri Last Updated :April 20, 2023 Properties

Description

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. See related aria-posinset.

This property is marked on the members of a set, not the container element that collects the members of the set. To orient the user by saying an element is “item X out of Y,” the assistive technologies would use X equal to the aria-posinset attribute and Y equal to the aria-setsize attribute.

If all items in a set are present in the document structure, it is not necessary to set this property, as the user agent can automatically calculate the set size and position for each item. However, if only a portion of the set is present in the document structure at a given moment (in order to reduce document size), this property is needed to provide an explicit indication of set size.

Authors MUST set the value of aria-setsize to an integer equal to the number of items in the set. If the total number of items is unknown, authors SHOULD set the value of aria-setsize to -1.

When exposing aria-setsize on a menuitem, menuitemcheckbox, or menuitemradio, authors SHOULD set the value of aria-setsize based on the total number of items in the menu, excluding any separators.

Browser Compatibility For aria-setsize

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
`ariaSetSize`	ChromeFull support84	EdgeFull support84	FirefoxNo supportNo	Internet ExplorerNo supportNo	OperaFull support70	SafariFull support12.1	WebView AndroidFull support84	Chrome AndroidFull support84	Firefox for AndroidNo supportNo	Opera AndroidFull support60	Safari on iOSFull support12.2	Samsung InternetFull support14.0

aria-setsize Example

HTML Example

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>

HTML Example 2

The following example shows items 5 through 8 in a set whose total size is unknown.

<h2 id="label_fruit">Available Fruit</h2>
<ul role="listbox" aria-labelledby="label_fruit">
  <li role="option" aria-setsize="-1" aria-posinset="5">apples</li>
  <li role="option" aria-setsize="-1" aria-posinset="6">bananas</li>
  <li role="option" aria-setsize="-1" aria-posinset="7">cantaloupes</li>
  <li role="option" aria-setsize="-1" aria-posinset="8">dates</li>
</ul>

Characteristics

Used in Roles

Inherits into Roles

Value

integer
- A numerical value without a fractional component.

Semantic HTML

No HTML element equivalent.

Reference

W3C (opens new window)
MDN Web Docs

Related Insights on Accessibility

Raghavendra Satish Peri

Raghavendra Satish Peri is a digital Transformation specialist working with small & large enterprises in the areas of digital accessibility & digital marketing. He authors an Accessibility Blog at DigitalA11Y.com & is galvanizing the adoption of accessibility by inspiring the local tech community with meetups and mentorship. He propelled this thought by founding HelloA11y.com, a community of accessibility professionals, developers, and enthusiasts. When away from his computer, Raghava can be found at local cafes & restaurants sampling cuisines, attending local meetups, listening to audio books, or writing on his Personal Blog at raghava.in.

Properties