Stepper input

How to test a stepper input

Gherkin Condensed WCAG

Given that I am on a page with a stepper input

1 Keyboard for mobile & desktop

WHEN I use the tab key to move focus to the first interactive item I SEE focus is strongly visually indicated
Then when I use the arrow keys to select an option I SEE the selected option is changed
Then when I use the escape key when the select is open I SEE it collapses and focus moves to the select
When when I use the enter key is pressed on buttons I SEE the value is incremented or decremented

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to the first interactive item
- I HEAR Button labels are clear and include context The select field's visual label is announced
- I HEAR For the select field it identifies itself as a select, popup button, menu/submenu or listbox For the buttons they are identified as button
- I HEAR Its label is read with the input
- I HEAR It indicates when the select is expanded/collapsed, indicates which option is selected
Then when I use the arrow keys to select an option I HEAR the selected option is changed
Then when I use the escape key when the select is open I HEAR it collapses and focus moves to the select
When when I use the enter key is pressed on buttons I HEAR the value is incremented or decremented

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to focus on the form fields
- I HEAR Button labels are clear and include context The select field's visual label is announced
- I HEAR For the select field it identifies itself as a select, popup button, menu/submenu or listbox For the buttons they are identified as button
- I HEAR Its label is read with the input
- I HEAR It indicates when the select is expanded/collapsed, indicates which option is selected
Then when I doubletap with the select in focus I HEAR the picker/spinner opens
Then when I doubletap with the button in focus I HEAR the value is incremented or decremented

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Focus moves to either the select field or buttons
Enter or spacebar	If select is focused, expands the select and places focus on the currently selected option in the list If focus is in the options, collapses the select and keeps the currently selected option. If focus is on one of the buttons, it will either increment or decrement the value
Arrow-keys	If select is focused, moves focus to and selects the next option
Escape	If the select is displayed, collapses the select and moves focus to the button
Home	If the select is displayed, moves focus to and selects the first option
End	If the select is displayed, moves focus to and selects the last option

2 Mobile screenreader gestures

When I use	I hear
Swipe	Moves focus to each form control in the pattern
Double-tap	If select is focused, opens select, selects option If a button is focused, it will either increment or decrement the value

3 Screenreader output for all devices

Reads	I hear
Name	Button labels are clear and include context The select field's visual label is announced
Role	For the select field it identifies itself as a select, popup button, menu/submenu or listbox For the buttons they are identified as button
Group	Its label is read with the input
State	It indicates when the select is expanded/collapsed, indicates which option is selected

A stepper input must meet these WCAG principles.

1Perceivable

Is easy to identify as interactive
Color is not used as the only means of conveying information

2Operable

Is keyboard operable
The click/tap target area is no smaller than 44x44px
The disabled and focus states have a 3:1 minimum contrast ratio against default
The focus indication has a 3:1 minimum contrast ratio against adjacent elements
The focus indication has a minimum area equal to the width of the element and 2px in height
The form field label in the code contains the text that is visually presented

3Understandable

Its purpose is clear in the context of the whole page

4Robust

Conveys the correct semantic role
Expresses its state (if applicable)
Meets criteria across platforms, devices and viewports

Code examples

Speciality stepper integer input

Before using this pattern, consider if using a plain Select dropdown might be more clear and simple for all users. A select does everything that this stepper does, and with less code! Plus, a select is native and accessible out of the box.

This component is useful for small range increments. If the max count is more than 20, consider use of a Text Input field as this component will be cumbersome for people using a mouse.

<div class="stepper">
  <label for="stepper">
    Quantity
  </label>
  <button class="button minus" aria-label="Decrease Quantity" aria-disabled="true"></button>
  <select id="stepper"
          name="stepper-input"
          min="1"
          max="11"
          data-selected="1">
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
  </select>
  <button class="button plus" aria-label="Increase Quantity"></button>
  <!-- live container where "Quantity updated, {x}" will be dynamically updated -->
  <div aria-live="polite" class="hidden" id="stepper-status-target"></div>
</div>

Quantity

Developer notes

This stepper example provides both button and select elements for users to change a value.
A non-visual live container with aria-live="polite" is present in the page at DOM load. When the button elements are activated, this non-visual live container is updated with dynamic content that screen reader users will hear announced as they increment or decrement the value. This dynamic text is then removed from the DOM after a few seconds (but not the actual container with aria-live="polite") so the message is not discovered by screen reader users after interaction. The content of this message dynamically created based on the Label for the Select and the current value of the Select. e.g. “Quantity updated, 4”
The value of the select element naturally communicates the updated value to screen reader users so the live container is not updated when that form element is interacted with.
The button aria-label values should be plain text and they should include context of what they affect when activated (typically the label for the select). e.g. Increase Quantity, Add Quantity
aria-disabled="true" will be applied to the buttons when either end of the range is reached
Related alternative patterns: Select dropdown or an ARIA Spinbutton.