Stepper input

How to test a stepper input

Gherkin Condensed

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 select (+/- buttons are ignored) 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

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to the select (+/- buttons are ignored)
- I HEAR Its purpose is clear (+/- buttons are ignored)
- I HEAR It identifies itself as a select, popup button, menu/submenu or listbox
- 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

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to focus on the select (+/- buttons are ignored)
- I HEAR Its purpose is clear (+/- buttons are ignored)
- I HEAR It identifies itself as a select, popup button, menu/submenu or listbox
- 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

1 Keyboard only & screenreader

When I use	I see/hear
Tab	Focus moves visibly to the select
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.
Arrow-keys	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.e.

2 Mobile screenreader gestures

When I use	I hear
Swipe	Ignores +/- buttons, focus moves to the input, traverses list
Double-tap	Opens select, selects option

3 Screenreader output for all devices

Reads	I hear
Name	Its purpose is clear (+/- buttons are ignored)
Role	It identifies itself as a select, popup button, menu/submenu or listbox
Group	Its label is read with the input
State	It indicates when the select is expanded/collapsed, indicates which option is selected

Code examples

Speciality stepper integer input

This component is useful for small-ish selections. If the max count is more than 20, this component will be cumbersome for people using a mouse.

<div class="stepper">
  <label for="cowbell">
    How much cowbell?
  </label>
  <select id="cowbell"
          name="stepper-input"
          min="1"
          max="11"
          data-selected="1">
    <option label="1" selected>1</option>
    <option label="2">2</option>
    <option label="3">3</option>
    <option label="4">4</option>
    <option label="5">5</option>
    <option label="6">6</option>
    <option label="7">7</option>
    <option label="8">8</option>
    <option label="9">9</option>
    <option label="10">10</option>
    <option label="11">11</option>
  </select>
  <div class="button minus" aria-hidden="true">
    <span class="hidden">
      Less cowbell
    </span>
  </div>
  <div class="button plus" aria-hidden="true">
    <span class="hidden">
      More cowbell
    </span>
  </div>
</div>

How much cowbell?

Developer notes

This example provides the simplest answer to a number input with a stepper control with minimal scripting.

Notice that the stepper buttons are hidden from the screen reader because it’s a better user experience to simply use the native select.

Using a select also eliminates any issues with the update being read by the screenreader on button press.

Other attempts

Using a input type="number" with its built in stepper is also simple, can be similarly styled, but NVDA can’t read number input labels
Wrapping a input type="text" with aria-live="assertive" isn’t reliablly output across all screenreaders on change events

Other possible options

If an unlimited number of options is required, using a normal text input with added controls will work, but a hidden element using aria-live="assertive will be required for the screenreader user.