How to test
a
website input field
Given that I am on a screen with
a
website input field
2 Desktop screenreader
-
WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver)
AND
I use the ctrl + tab or arrow keys to move focus to the input
-
I HEAR
purpose is clear and matches visible label
-
I HEAR
identifies itself as text field
-
I HEAR
visible label and instructions are read with the input in focus
-
I HEAR
if applicable, it expresses its state (required, dimmed, invalid)
2
VoiceOver
screenreader
-
WHEN I use a screenreader
AND
I swipe to focus on a text input
-
I HEAR
purpose is clear and matches visible label
-
I HEAR
identifies itself as text field
-
I HEAR
visible label and instructions are read with the input in focus
-
I HEAR
if applicable, it expresses its state (required, dimmed, invalid)
1 Keyboard actions
| When I use |
I see/hear |
| Arrow keys or ctrl + tab |
Focus visibly moves to the input
|
| Spacebar |
Selects input
|
2 Mobile screenreader gestures
| When I use |
I hear |
| Swipe |
Focus moves to the input, expresses its name, role, state then any instructions
|
| Doubletap |
.com website keyboard appears appears to edit
|
3 Screenreader output
| Reads |
I hear |
| Name |
Purpose is clear and matches visible label
|
| Role |
Identifies itself as text field
|
| Group |
Visible label and instructions are read with the input in focus
|
| State |
If applicable, it expresses its state (required, dimmed, invalid)
|
4 Device settings
| When I use |
I see |
| Text resize |
Text can resize up to 200% without losing information
|
| Increased contrast |
Focus outline becomes high contrast
|
Usage
A text field is a rectangular area in which people enter or edit small, specific pieces of text.
Related website input field entries