Number input - UX UI Design accessibility WCAG checklist

How to design a number input

WCAG Disabilities

A number input must meet WCAG principles:

1 Perceivable

Color is not used as the only means of conveying state (error/success/required) - 1.4.1 A
Border color meets 3:1 contrast ratio against adjacent elements - 1.4.11 AA
The text has a 4.5:1 minimum contrast ratio - 1.4.3 AA
Text can resize up to 200% with no loss of information - 1.4.4 AA
Description, autofill, inputmode, type is documented - 1.3.5 AA

2 Operable

The purpose of can be determined from the text alone - 2.4.4 A
The click/tap target area includes the label and is no smaller than 24x24px - 2.5.8 AA
The click/tap target area includes the label and is no smaller than 44x44px - 2.5.5 AAA
The focus indication is visible (in some way) 2.4.7 AA
The focus indication has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
The focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA

3 Understandable

Label is always visible (placeholder cannot be used as a label) - 3.3.2 A
Errors are identified and described to the user in text - 3.3.1 A
Corrections to errors are identified and described to the user in text - 3.3.3 AA
Information previously entered is auto-populated or available to select. 3.3.7 A

4 Robust

Name, role, state, description, autofill, inputmode, type is documented - 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

A number input must work for people with disabilities:

Low vision

The text has a 4.5:1 minimum contrast ratio - 1.4.3 AA
Text can resize up to 200% with no loss of information - 1.4.4 AA
Border color meets 3:1 contrast ratio against adjacent elements - 1.4.11 AA

Color perception

Color is not used as the only means of conveying state (error/success/required) - 1.4.1 A

Cognitive

Label is always visible (placeholder cannot be used as a label) - 3.3.2 A
Description, autofill, inputmode, type is documented - 1.3.5 AA

Motor

The click/tap target area includes the label and is no smaller than 24x24px - 2.5.8 AA
The click/tap target area includes the label and is no smaller than 44x44px - 2.5.5 AAA
The focus indication is visible (in some way) 2.4.7 AA
The focus indication has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
The focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA
Information previously entered is auto-populated or available to select. 3.3.7 A

Blindness

The purpose of can be determined from the text alone - 2.4.4 A
Errors are identified and described to the user in text - 3.3.1 A
Corrections to errors are identified and described to the user in text - 3.3.3 AA
Name, role, state is documented - 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

UX

Number input fields are more complex than they seem.

Do not use type="number"
- type="number" 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
- Older versions of NVDA don’t support type="number"
Screen readers do not call a type="number" input a number input, they call it:
- Spinner
- Spin button
- Stepper
- Incrementable edit text number field

Use `type="text"` for number inputs

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

Annotations for number inputs

type=text inputmode="numeric"
- Ensures maximum support and opens the numeric keypad on mobile devices

Pin number

The pin number will expire after 1 hour

Annotations for telephone input

type="tel"
- Ensures maximum support and opens the numeric keypad on mobile devices

Phone number

We’ll never sell or share your information

Design Number input

How to design a number input

1 Perceivable

2 Operable

3 Understandable

4 Robust

Low vision

Color perception

Cognitive

Motor

Blindness

UX

Use `type="text"` for number inputs

Annotations for number inputs

Annotations for telephone input

Further reading

Related number input entries

Design Number input

How to design a number input

1 Perceivable

2 Operable

3 Understandable

4 Robust

✓ Low vision

✓ Color perception

✓ Cognitive

✓ Motor

✓ Blindness

UX

Use type="text" for number inputs

Annotations for number inputs

Annotations for telephone input

Further reading

Related number input entries

Low vision

Color perception

Cognitive

Motor

Blindness

Use `type="text"` for number inputs