How to design
a
number input
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
✓ 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