• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Digital A11Y

Digital A11Y

Your Accessibility Partner

  • About
  • Articles
  • WAI-ARIA
  • WCAG
  • Resources
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact

WAI-ARIA: aria-setsize (Property)

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.

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.

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

  • 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)

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name
  • Knowbility looking for mentors in its Accessible Internet Rally
  • Understanding SC 2.5.2 Pointer Cancellation

Recent Comments

  • Al on Understanding SC 4.1.2 Name, Role, Value
  • Randy on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Understanding SC 1.4.12 Text Spacing
  • Raghavendra Satish Peri on Understanding SC 4.1.2 Name, Role, Value

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • Uncategorized
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y