WAI-ARIA: aria-posinset(Property)

Defines an element’s number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Description

Defines an element’s number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. See related aria-setsize.

If all items in a set are present in the document structure, it is not necessary to set this attribute, 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, this property is needed to provide an explicit indication of an element’s position.

Authors MUST set the value for aria-posinset to an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. Authors SHOULD use aria-setsize.

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

Browser Compatibility For aria-posinset

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
ariaPosInSet	ChromeFull support81	EdgeFull support81	FirefoxNo supportNo	Internet ExplorerNo supportNo	OperaFull support68	SafariFull support12.1	WebView AndroidFull support81	Chrome AndroidFull support81	Firefox for AndroidNo supportNo	Opera AndroidFull support58	Safari on iOSFull support12.2	Samsung InternetFull support13.0

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>

Characteristics

Used in Roles

• article
• listitem
• menuitem
• option
• radio
• tab

Inherits into Roles

• menuitemcheckbox
• menuitemradio
• treeitem

Value

• integer
  • A numerical value without a fractional component.

Semantic HTML

No HTML element equivalent.

Reference

• W3C (opens new window)
• MDN Web Docs