Spin button

Synonyms: Rotary button, step forward button, spinner, spin control

See also: Input field, slider, drop-down list, combined input field, button

Spin buttons allow for the selection of a value from a range of values with continuous data (e.g., days of the week, years). A spin button consists of two buttons that allow for the selection of the previous value and the following value as well as an input field in order to display the value. The input field for displaying the value can be read-only or allow for the direct text input. The value range of the spin button can be limited or unlimited, i.e. it can have a minimum value, a maximum value or both (see DIN EN ISO 9241-161: 8.41).

• JAWS: [label] edit spin box [value] [instruction on text input and operation with the arrow keys]
• NVDA: [label] spin button | spin button editable [value]
• Windows Narrator: [label] spinner | spin button [value] minimum [minimum value] and maximum [maximum value]

Please note:

• The Windows Narrator outputs the HTML spin buttons as a “net” and the ARIA spin buttons as a “spin button”.
• The minimum and maximum values are only perceptible with the Windows Narrator.
• The difference between spin buttons with and without text input is only perceptible with NVDA.

The spin button should be implemented with the HTML element <input type=number> The initial value is communicated through the value attribute
The increment as well as the minimum and maximum values can be communicated with the step, min und max attributes.
The label of the spin button should be linked to the spin button with the <label for=ID> element.
A spin button can be marked as disabled (disabled) and read-only (readonly) ausgezeichnet werden. A spin button can be marked as a required field with required.

Further information: 4.10.5.1.12 Number state (type=number) - HTML Standard (whatwg.org)

Please note: On mobile devices, an ARIA spin button without text input may not be operated with assistive technology, because no gesture commands for the operation of non-native spin buttons have been implemented. This applies, in particular, if the buttons for increasing and/or decreasing the value are child elements of the spin button. In addition to this, the differences between spin buttons with and without text input are not perceptible with most screen readers. It is therefore recommended that only spin buttons with a text input option are implemented.

If the spin button is not implemented with the HTML element, it is also necessary to take account of the following:

• The role is communicated with role=spinbutton.
• If the spinbutton role is located at an input field or at an element which contains an input field, it is a spin button with text input. Otherwise, it is a spin button without text input.
• The labeling of the spin button can take place with aria-label or aria-labelledby. If the ARIA spinbutton role is located at an HTML input field, it can also be labeled with <label for=ID>.
• The current value must be specified with aria-valuenow. BefindetIf the ARIAspinbutton role is located at an HTML input field, its value is used as the current value of the spin button.
• aria-valuetext can also be used to specify a value in text form which should be then output by the assistive technology instead of the value inaria-valuenow.
• The minimum and maximum values can be specified with aria-valuemin and aria-valuemax.
• With ARIA spin buttons, specifying an increment is not possible.
• The spin button can be marked as disabled with aria-disabled and with aria-readonly as read-only.
• The switches used for increasing and/or decreasing the value should not receive keyboard focus separately.
• The presentation of the spin button should be verified in Windows High Contrast mode.
• The visible spin button and the programmatically focused element should have the same position and size.

Further information: spinbutton role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), Spinbutton Pattern | APG | WAI | W3C

Information about this article

Date:

6.12.2024

License:

CC-BY-SA 4.0

Version:

1.0

You are welcome to send feedback by email about our handout!