Number input

How to test a number input

Gherkin Condensed WCAG

Given that I am on a page with a number input

1 Keyboard for mobile & desktop

WHEN I use the tab key to move focus to a number input I SEE focus is strongly visually indicated
Then when I use the number keys I SEE numbers are entered
Then when I use non-number keys I SEE nothing is entered

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to a number input
- I HEAR Its purpose is clear
- I HEAR It identifies itself as an editable input
- I HEAR Hints or errors are read after the label, related inputs include a group name (Ex: Enter your personal information)
- I HEAR If applicable, it expresses its state (required, disabled / dimmed / unavailable)
Then when I use the number keys I HEAR numbers are entered
Then when I use non-number keys I HEAR nothing is entered

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to focus on a number input
- I HEAR Its purpose is clear
- I HEAR It identifies itself as an editable input
- I HEAR Hints or errors are read after the label, related inputs include a group name (Ex: Enter your personal information)
- I HEAR If applicable, it expresses its state (required, disabled / dimmed / unavailable)
Then when I enter a number I HEAR the numeric keypad is revealed

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Focus moves visibly to the input
Number keys	Numbers are entered
Non-number keys	Nothing is entered

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the input, numeric keypad is revealed

3 Screenreader output for all devices

Reads	I hear
Name	Its purpose is clear
Role	It identifies itself as an editable input
Group	Hints or errors are read after the label, related inputs include a group name (Ex: Enter your personal information)
State	If applicable, it expresses its state (required, disabled / dimmed / unavailable)

A number input must meet these WCAG principles.

1Perceivable

Is easy to identify as interactive
Type size is optically no smaller than 16px Helvetica
The text has a 4.5:1 minimum contrast ratio
Label is always visible (placeholder cannot be used as a label)
Color is not used as the only means of conveying information or state (error, success, focus, disabled etc)

2Operable

Is keyboard operable
Mobile device displays numeric keypad (instead of full keyboard)
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 minimum area equal to the width of the element and 2px in height

3Understandable

The input purpose should be clear in the context of the whole page
The width of the input accommodates/affords the intended input, reinforcing its purpose

4Robust

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

Code examples

Don’t use `type="number"`

The type="number" input is intended for integers and includes features we don’t want (like stepper/scroll functionality) that is a nuisance to everyone

Phone, credit card, pin etc. are not integers
NVDA doesn’t fully support type="number" inputs at this time

Use `type="text"` for number inputs

Use type=text with inputmode="numeric" with an input pattern and JS to filter out non-numeric characters.

<label for="pin">
  Pin number
</label>
<input type="text"
       id="pin"
       aria-describedby="hint"
       inputmode="numeric"
       pattern="[0-9]*">
<div id="hint" class="hint">
  The pin number will expire after 1 hour
</div>

Pin number

The pin number will expire after 1 hour

Disabled and focusable number input (preferred)

Using the aria-disabled attribute will allow the input to be focusable and more discoverable

<label for="security-id">
  Security ID number
</label>
<input type="text"
       id="security-id"
       aria-describedby="security-id-hint"
       inputmode="numeric"
       pattern="[0-9]*"
       aria-disabled="true">
<div id="security-id-hint" class="hint">
  The Security ID number will expire after 1 hour
</div>

Security ID number

The Security ID number will expire after 1 hour

Fully disabled number input (avoid)

Fully disabled inputs are not focusable so may not be as discoverable in a form

<label for="pin-disabled">
  Pin number
</label>
<input type="text"
       id="pin-disabled"
       inputmode="numeric"
       pattern="[0-9]*"
       disabled>

Pin number

Telephone number input

Setting type=”tel” changes the keyboard for mobile app users

<label for="phone">
  Phone number
</label>
<input type="tel"
       id="phone"
       inputmode="numeric"
       autocomplete="tel"
       aria-describedby="hint-phone">
<div class="hint" id="hint-phone">
  We’ll never sell or share your information
</div>

Phone number

We’ll never sell or share your information

Developer notes

Name

Include for="input-id in each <label> label to associate it with the input
Use aria-label="Input name" as a last resort if a <label> can’t be used
Don’t hide the label on focus

Role

Identifies as a text input

Group

Include for="input-id in each <label> label to associate it with the input
Use <fieldset> and <legend> to name a group of inputs.

Focus

Focus must be visible

Number input

How to test a number input

1 Keyboard for mobile & desktop

2 Desktop screenreader

3 Mobile screenreader

1 Keyboard & screen reader actions

2 Mobile screenreader gestures

3 Screenreader output for all devices

1Perceivable

2Operable

3Understandable

4Robust

Code examples

Don’t use type="number"

Use type="text" for number inputs

Disabled and focusable number input (preferred)

Fully disabled number input (avoid)

Telephone number input

Developer notes

Name

Role

Group

Focus

Don’t use `type="number"`

Use `type="text"` for number inputs