• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Digital A11Y

Digital A11Y

Your Accessibility Partner

  • About
  • Articles
  • WAI-ARIA
  • WCAG
  • Resources
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact

WAI-ARIA: Role=Spinbutton

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)

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name
  • Knowbility looking for mentors in its Accessible Internet Rally
  • Understanding SC 2.5.2 Pointer Cancellation

Recent Comments

  • Al on Understanding SC 4.1.2 Name, Role, Value
  • Randy on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Understanding SC 1.4.12 Text Spacing
  • Raghavendra Satish Peri on Understanding SC 4.1.2 Name, Role, Value

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • Uncategorized
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y