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 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 & screen reader actions

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

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

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

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="stepper-cowbell">
    How much cowbell?
  </label>
  <div class="stepper-overlay"
       id="stepper-overlay" 
       data-selected="1"
       aria-hidden="true">
    <!-- Covers the select to ensure uniform styles -->
  </div>
  <select id="stepper-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.

Notable failed prototype attempts

Do not use a input type="number" — NVDA doesn’t support number inputs
Wrapping a input type="text" with aria-live="assertive" isn’t reliably output across all screen readers on change events