Skip to main content Skip to site Map

Design Search form

How to design a search form

WCAG Disabilities

A search form must meet WCAG principles:

1 Perceivable

Text can resize up to 200% with no loss of information - 1.4.4 AA
Text has a 4.5:1 minimum contrast ratio - 1.4.3 AA
Color is not used as the only means of conveying meaning (error/success) - 1.4.1 A

2 Operable

The click/tap target is no smaller than 24x24px - 2.5.8 AA
The click/tap target is no smaller than 44x44px - 2.5.5 AAA
The focus indication is visible (in some way) 2.4.7 AA
The focus indication has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
The focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA

3 Understandable

Errors are identified and described to the user in text - 3.3.1 A
Corrections to errors are identified and described to the user in text - 3.3.3 AA

4 Robust

Name, role, state is documented 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

A search form must work for people with disabilities:

Low vision

Text can resize up to 200% with no loss of information - 1.4.4 AA
Text has a 4.5:1 minimum contrast ratio - 1.4.3 AA

Color perception

Color is not used as the only means of conveying meaning (error/success) - 1.4.1 A

Motor

The click/tap target is no smaller than 24x24px - 2.5.8 AA
The click/tap target is no smaller than 44x44px - 2.5.5 AAA
The focus indication is visible (in some way) 2.4.7 AA
The focus indication has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
The focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA

Blindness

Errors are identified and described to the user in text - 3.3.1 A
Corrections to errors are identified and described to the user in text - 3.3.3 AA
Name, role, state is documented 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

Usage

Effective search is a crucial feature for people using a screen reader.
Many people will use their screen reader shortcuts to immediately find a search form, rather than navigate your elaborate navigation structure.

UX

Yes, it must have a submit button
The search button can visually appear on the left or right, but it must be focused after the input field.
The enter key also submits the search
A visible label is not required if the context and placement of the search form is conventional enough to be easily understood

Working examples

This example search form includes autocomplete.
It is discoverable as a search form landmark with screen reader shortcuts.

Annotations for search

form role="search" for the search form wrapper
aria-label="Search this site" for the search input field; give some context to the scope of the search
role="button" aria-label="Search" for the search submit button

Related search form entries