Forms

Accessible select controls: Examples and Testing

Published by whatisADA / Grow Wild Agency · Updated

What to build

For a straightforward choice from a fixed list, a native select supplies familiar keyboard and platform behavior. Give it a visible label and keep its value separate from unrelated actions such as form submission.

A practical example

A resource filter lets visitors select a document type. Changing the select updates nearby results without moving focus; a short status reports the new count.

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.

This example stays in your browser and is not submitted.

How to check it

  1. Use the keyboard to open and change the selection under the browser's native interaction model.
  2. Verify the visible label, current value and handling of an empty or required choice.
  3. Check that result updates preserve focus and do not unexpectedly navigate to a different page.

What can be missed

Replacing a native select with a custom listbox creates additional keyboard and assistive-technology responsibilities. A styled div does not preserve the browser's built-in behavior.

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.

<label for="document-type">Document type</label>
<select id="document-type" name="document-type">
  <option value="all">All documents</option>
  <option value="pdf">PDF</option>
  <option value="word">Word document</option>
</select>

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.