Search input

How to test a search input

Gherkin Condensed WCAG

Given that I am on a page with a search input

1 Keyboard for mobile & desktop

WHEN I use the tab key to move focus to a search input I SEE focus is strongly visually indicated
Then when I use the tab key to move focus to the search submit button I SEE the button is focused
Then when I use the enter or spacebar key I SEE the search results are presented

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to a search input
- I HEAR Its purpose is clear
- I HEAR It identifies itself as a search input
- I HEAR The form itself is discoverable with screenreader shortcuts as search landmark
Then when I use the tab key to move focus to the search submit button I HEAR the button is focused
Then when I use the enter or spacebar key I HEAR the search results are presented

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to focus on a search input
- I HEAR Its purpose is clear
- I HEAR It identifies itself as a search input
- I HEAR The form itself is discoverable with screenreader shortcuts as search landmark

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Focus moves visibly to the search text input and search button
Space	Search button is activated
Enter	Search is activated

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the search text input and search button
Doubletap	Search button is activated

3 Screenreader output for all devices

Reads	I hear
Name	Its purpose is clear
Role	It identifies itself as a search input
Group	The form itself is discoverable with screenreader shortcuts as search landmark

A search input must meet these WCAG principles.

1Perceivable

Is easy to identify as interactive
Type size is optically no smaller than 16px Helvetica
Text/iconography has a 4.5:1 minimum contrast ratio
Color is not used as the only means of conveying information or state (error, success, focus, disabled etc)

2Operable

Is keyboard operable
Any click/tap target area is no smaller than 44x44px
The disabled and focus states have a 3:1 minimum contrast ratio against default
The focus indication has a minimum area equal to the width of the element and 2px in height
A search submit button is also available and meets button design criteria

3Understandable

The search scope should be clear in the context of the whole page
The width of the input accommodates/affords the intended input, reinforcing its purpose

4Robust

Conveys the correct semantic role
Expresses its state (if applicable)
Meets criteria across platforms, devices and viewports

Video examples

iOS Voiceover

Android Talkback

Windows Jaws Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.
Include a search button

Search with autocomplete suggestions

For search autocomplete see Autocomplete input with listbox

<form role="search" action="/search/">
  <label for="search">
    Search this website:
  </label>
  <input list="components" type="search" id="search">
  <datalist id="components"> 
    <option value="Alert"> 
    <option value="Animation"> 
    <option value="Button"> 
    <option value="Checkbox">
    <option value="Date picker">
    <option value="Expander accordion">
    <option value="Footer / contentinfo">
    <option value="Form">
    <option value="Header / banner">
    <option value="Heading: h1, h2, h3">
  </datalist>

  <button type="submit">
    <span class="hidden">Search</span>
  </button>
</form>

Developer notes

Name

Use a label with a for="input-id to describe the input
Use aria-label="Search this website" if a label can’t be used

Role

Use role="search" for the <form>
Use type="search" for the text <input>

Group

Form identifies itself as role="search"
Include a search submit button.

Focus

Focus must be visible