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

Figure 42: Spin button
No.PropertyDescriptionClassificationReference
629ContrastThe text in the spin button must have a contrast ratio of at least 4.5:1 with respect to the background.MustEN 301 549: 9.1.4.3, 11.1.4.3
630ContrastThe border of the spin button must have a contrast ratio of at least 3:1 with respect to the background.MustEN 301 549: 9.1.4.11, 11.1.4.11
631ContrastThe arrow icons for the selection of the previous and following value must have a contrast ratio of at least 3:1 with respect to the neighboring color.MustEN 301 549: 9.1.4.11, 11.1.4.11
632LabelThe spin button must have a visible label (see labelFocus indicatorTextcursor
No.PropertyDescriptionClassificationReference
635Use of the keyboardIt must be possible to access, operate and exit the spin button with the keyboard (see Use of the keyboard table, below).

Note: The button for the selection of the previous and following value should not receive the keyboard focus separately

MustEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
636UpdatesWhen focusing and operating the spin button, no unexpected change of contextUse of the pointing device

Use of the keyboard: spin button

Permalink "Use of the keyboard: spin button"
ActionKeyClassification
Focusing of the spin buttonTABRequired
Leaving the spin buttonTABRequired
Entering a value in the input fieldText inputRequired (if text input is possible)
Navigating in the input fieldRIGHT/LEFT ARROW
POS1, END
Required (if text input is possible)
Operation of the spin button (selection of the previous or following value)UP ARROW, DOWN ARROWRequired
Operation of the spin button (selection of a value before or after with a defined increment)PAGE UP, PAGE DOWN

Note: The increment depends on the amount of possible values. An increment of 10 for instance, would make sense with 100 values.

Recommended
Operation of the spin button (selection of the first and last value)POS1, ENDRecommended (if no text input is possible and a range of values exists)

Use of the pointing device: spin button

Permalink "Use of the pointing device: spin button"
ActionKeyClassification
Placing the focus on a specific position in the input fieldLeft click in the input fieldRequired (if text input is possible)
Selection of the previous or following valueLeft click on the corresponding button with the arrow iconRequired
No.PropertyDescriptionClassificationReference
638RoleThe spin button role must be communicated to the Accessibility API (see Accessibility APIElementstatusFocus indicator

Practical tip: spin button in Web applications

Permalink "Practical tip: spin button in Web applications"
  • JAWS: [label] spin button [value] [instruction on text input and operation with the arrow keys]
  • NVDA: [label] spin button | spin button editable [value]
  • Windows Narrator: [label] net | 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

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