Forms

Accessible search forms: Examples and Testing

Published by whatisADA / Grow Wild Agency · Updated

What to build

A search form needs a discoverable search region, a labeled query field, a clear submit action and understandable results. Preserve the query and give users a useful way to recover from an empty result set.

A practical example

A reference site searches both article titles and descriptions. After submission it shows the query, number of results and links with meaningful titles, while filters remain keyboard accessible.

Try the example

Use Tab and your keyboard controls, then compare the behavior with the checks below. This is an isolated learning example; test the complete pattern in your own product and assistive technology setup.

How to check it

  1. Find the search region and submit a query using Enter and the visible button.
  2. Try a useful query, a query with no results and an empty query.
  3. Verify the query is preserved, results are announced appropriately and each result link reaches the right page.

What can be missed

A search interface that indexes only a few hand-written links cannot serve as reliable site navigation. Keep the index connected to the content source and avoid broken legacy destinations.

Markup and state contract

This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.

<form role="search" action="/search">
  <label for="site-query">Search accessibility resources</label>
  <input id="site-query" type="search" name="q">
  <button type="submit">Search</button>
</form>

Record your test

Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.

These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.

Primary sources and scope

This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.