Data and collections

Accessible listboxes: Examples and Testing

Published by whatisADA / Grow Wild Agency · Updated

What to build

A listbox presents selectable options with a managed keyboard interaction model. Distinguish focus from selection, expose selected states and choose a native select when it can perform the same task more simply.

A practical example

An asset chooser lists one selectable document at a time. The active option moves with the expected keys, selection is clear, and the chosen document name is available to assistive technology.

How to check it

  1. Enter the widget and navigate options using its documented keyboard model.
  2. Check focus, selected state and single- or multiple-selection behavior.
  3. Test a long list, scrolling, type-ahead if implemented and changes to the available options.

What can be missed

Options should not contain unrelated interactive controls. A list of links is generally ordinary navigation, not a listbox, and its expected behavior should remain link-like.

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.

<span id="asset-label">Select a document</span>
<ul role="listbox" aria-labelledby="asset-label">
  <li role="option" aria-selected="true" tabindex="0">Audit scope</li>
  <li role="option" aria-selected="false" tabindex="-1">Test record</li>
</ul>

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.