Code examples
50
of 50
characters remaining
Textarea multiline input
How to design a textarea multiline input
A textarea multiline 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
-
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
-
Label is always visible (placeholder cannot be used as a label) - 3.3.2 A
3
Understandable
-
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
4
Robust
-
Name, role, state, description, autofill is documented - 4.1.2 A
-
Meets criteria across platforms, devices and viewports 4.0.0 AA
A textarea multiline 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
Color perception
-
Color is not used as the only means of conveying state (error/success/required) - 1.4.1 A
Cognitive
-
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
Blindness
-
Label is always visible (placeholder cannot be used as a label) - 3.3.2 A
-
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