Given that I am on a screen with a search input field
| When I use | I see/hear |
|---|---|
| Arrow keys or ctrl + tab | Focus visibly moves to the input |
| Spacebar | Selects input, auto-suggestions |
| Ctrl + tab or arrow keys | Focus moves to auto-suggestions |
| When I use | I hear |
|---|---|
| Swipe | Focus moves to the input, expresses its name, role (and state if disabled/dimmed) |
| Doubletap | Keyboard appears appears to edit |
| Keyboard | Number of suggestions is announced |
| Reads | I hear |
|---|---|
| Name | Purpose is clear and matches visible label |
| Role | Identifies itself as search field |
| Group | Visible label is read with the input in focus |
| Suggestions | Number of suggestions is announced when typing |
| When I use | I see |
|---|---|
| Text resize | Text can resize up to 200% without losing information |
| Increased contrast | Focus outline becomes high contrast |
A search field lets people search a collection of content for specific terms they enter.
When you use system-provided components to include a search field in a navigation bar, it automatically receives the appropriate appearance and behaves as people expect.