Main content

spinbutton

Characteristics

Superclass Role:

  • input
  • range

Required States and Properties:

  • aria-valuemax
  • aria-valuemin
  • aria-valuenow

Supported States and Properties:

  • aria-required

Inherited States and Properties:

  • aria-atomic
  • aria-busy (state)
  • aria-controls
  • aria-describedby
  • aria-disabled (state)
  • aria-dropeffect
  • aria-flowto
  • aria-grabbed (state)
  • aria-haspopup
  • aria-hidden (state)
  • aria-invalid (state)
  • aria-label
  • aria-labelledby
  • aria-live
  • aria-owns
  • aria-relevant
  • aria-valuetext

Name From:

  • author

Accessible Name Required:

  • True

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

A spinbutton role is used when a range of options are available for the user to select from. To select an item from a number of options, a combo box can also be used, but a spin button helps to represent a large range.

Authors should ensure this functionality is accomplished programmatically through the use of up and down arrows on the keyboard. Usually the up-arrow key/ right arrow key increases the value while the down arrow key/ left arrow key decreases the value. Visibly, the current value is incremented or decremented until a maximum or minimum value is reached. 

It is better to provide an option to jump bulk numbers with a keyboard navigation key if the range is too high. If up-arrow key increases the value by one, a page-up key can increase the value by ten so that the user can quickly change the values when the numbers are high. Similar options can also be provided for decreasing the values. Home key can navigate the user to the first value in the range while the end key on the keyboard takes the user to the last value of the spin button.

Represent the minimum possible value by aria-valuemin, maximum value by aria-valuemax, while the current value is represented by aria-valuenow.

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.

Microsoft Active Accessibility accRole Property: 

  • ROLE_SYSTEM_SPINBUTTON

UI Automation ControlType Property: 

  • Spinner

UI Automation AriaRole Property: 

  • spinbutton
More in this category: « status slider »