Roles

WAI-ARIA: Role=Spinbutton

Authored By :Raghavendra Satish Peri Last Updated :April 24, 2024 Roles

Description

A form of range that expects the user to select from among discrete choices.

A spinbutton typically allows the user to select from the given range through the use of an up and down button on the keyboard. Visibly, the current value is incremented or decremented until a maximum or minimum value is reached. Authors SHOULD ensure this functionality is accomplished programmatically through the use of up and down arrows on the keyboard.

Although a spinbutton is similar in appearance to many presentations of select, it is advisable to use spinbutton when working with known ranges (especially in the case of large ranges) as opposed to distinct options. For example, a spinbutton representing a range from 1 to 1,000,000 would provide much better performance than a select widget representing the same values.

Authors MAY create a spinbutton with children or owned elements, but MUST limit those elements to a textbox and/or two buttons.

To be keyboard accessible, authors SHOULD manage focus of descendants for all instances of this role, as described in Managing Focus. When a spinbutton receives focus, authors SHOULD ensure focus is placed on the textbox element if one is present, and on the spinbutton itself otherwise. Authors SHOULD NOT include contained button elements in the primary navigation ring, e.g., the Tab ring in HTML, because they are superfluous for people using keyboard devices.

Authors MUST set the aria-valuenow attribute. Authors SHOULD set the aria-valuemin attribute when there is a minimum value, and the aria-valuemax attribute when there is a maximum value. If missing or not a number, the implicit values of these attributes are as follows:

The implicit value of aria-valuemin is that there is no minimum value.
The implicit value of aria-valuemax is that there is no maximum value.
The implicit value of aria-valuenow is 0.

Role=Spinbutton Example

HTML Example

<input
role="spinbutton"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="25"
type="number"
value="25">

Characteristics

Superclass Role

composite
input
range

Required States and Properties

aria-valuemax
aria-valuemin
aria-valuenow

Supported States and Properties

aria-readonly
aria-required

Inherited States and Properties

Name From

author

Accessible Name Required

True

Implicit Value for Rrole

Default for aria-valuemin is that there is no minimum value.
Default for aria-valuemax is that there is no maximum value.
Default for aria-valuenow is 0.

Semantic HTML

No HTML element equivalent.

Reference

WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=spinbutton.

Raghavendra Satish Peri

Raghavendra Satish Peri empowers enterprises with his expertise in digital accessibility and marketing. Through his impactful work, he collaborates with both small businesses and large enterprises, spearheading digital transformation initiatives. Raghavendra is the author behind the influential Accessibility Blog hosted at DigitalA11Y.com, where he delves into the intricate realm of digital accessibility and its significance.
Passionate about fostering change within the tech landscape, Raghavendra actively inspires local tech communities through engaging meetups and mentorship. He is the driving force behind HelloA11Y.com, a vibrant platform that unites accessibility professionals, developers, and enthusiasts, propelling the adoption of accessible practices.
Beyond the digital realm, Raghavendra seeks diverse experiences. You might find him exploring various cuisines at local cafes and restaurants or immersing himself in thought-provoking audio books. His insights and musings also find a home on his Personal Blog at raghava.in, where he shares his thoughts and experiences with a wider audience.