Search input - Web accessibility testing checklist

How to test a search input

Gherkin Condensed

Given that I am on a screen with a search input

1 Keyboard only

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 screen reader landmark shortcuts
- 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 form or landmark
When I use the tab key to move focus to a search input I HEAR focus is strongly visually indicated
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 screenreader 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 form or landmark

1 Keyboard & screen reader actions

When I use	I see/hear
Landmark shortcuts	It can be discovered, understood and skipped to
Tab	Focus moves to controls inside the landmark (but the landmark itself does not receive focus)
Space	Search button is activated
Enter	Search is activated

2 Mobile screenreader gestures

When I use	I hear
Landmark shortcuts	It can be discovered, understood and skipped to
Swipe	Focus moves to controls inside the landmark (but the landmark itself does not receive focus)
Doubletap	Search button is activated

3 Screenreader output

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 form or landmark

A search input must meet WCAG principles:

1 Perceivable

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)

2 Operable

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

3 Understandable

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

4 Robust

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

Search results

Don’t reinvent the basic search results page, keep it simple and navigable

<form role="search" action="/demos/search/">
  <label for="atomic-search">
    Search this website:
  </label>
  <input list="components" type="search" id="atomic-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>

Web Search input

How to test a search input

1 Keyboard only

2 Desktop screenreader

3 Mobile screenreader

1 Keyboard & screen reader actions

2 Mobile screenreader gestures

3 Screenreader output

1 Perceivable

2 Operable

3 Understandable

4 Robust

Video examples

iOS Voiceover

Android Talkback

Windows Jaws Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

Code examples

Use semantic HTML

Search with autocomplete suggestions

Search results

Related search input entries