Usage
A text field is a rectangular area in which people enter or edit small, specific pieces of text.
iOS Phone input field
How to test a phone input field
Given that I am on a screen with a phone input field
1 Keyboard
-
WHEN I use the ctrl + tab or arrow keys to move focus to the input I SEE focus is visually indicated (strongly if high contrast enabled)
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)
3 Device settings
-
When I use Text resize I SEE Text can resize up to 200% without losing information
-
When I use Increase contrast I SEE focus outline becomes high contrast
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 | Numeric 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 |
| Increase contrast | Focus outline becomes high contrast |