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.
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
- aria-activedescendant
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
- aria-valuetext
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
- W3C (opens new window)