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>

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.