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"
witharia-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.