Dropdown (Select) — Accessibility Specification (WCAG 2.1 AA)

What is this component?

What is this component? A dropdown (native <select>) lets users choose a single option (or multiple with multiple) from a list. Native selects have built‑in semantics, keyboard support, and platform behaviors.

Where and how is it used? Use for choosing from finite, well‑defined options (e.g., country, size, quantity). Prefer native <select> for reliability and accessibility across devices.

Accessibility Requirements

Requirement	WCAG Criteria	Description
Programmatic label	1.3.1, 3.3.2	Associate the `<select>` with a `<label for>` or wrap the input. Provide helpful instructions or `aria-describedby` when needed.
Keyboard operability	2.1.1	Focus via Tab, open with Alt+↓ (OS dependent), navigate with arrows, confirm with Enter or Space.
Focus visible	2.4.7	Provide a clear visible focus indicator on the control.
Name, Role, Value	4.1.2	Native select exposes role “combobox/listbox” as appropriate, name from label, and value from the selected option.
Error identification	3.3.1	Errors are identified with text and programmatic association; don’t rely on color alone.

ARIA Roles and Attributes

ARIA Role/Attribute	Used On	Purpose & Usage
`<select>` / `<option>`	Native dropdown	Preferred. Avoid replacing with custom widgets unless necessary.
`aria-describedby`	Select needing help/error text	Associates assistive hint or error details.
`aria-invalid="true"`	Invalid input	Indicates error state programmatically when validation fails.

Implementation Guidelines


Country

DO’s

Prefer native <select> for best AT and mobile support.
Provide a concise, descriptive label above the control.
Order options logically; group with <optgroup> if needed.
Include a placeholder option like “Select a country”.
Use aria-describedby for helper or error text.

Don’ts

Don’t replace native selects with complex custom components without full keyboard/ARIA parity.
Don’t rely on color alone to indicate errors or required state.
Don’t auto‑change context on selection without warning or confirmation.
Don’t use extremely long lists without search/filter.

Common Pitfalls

Broken label association: select not tied to label, hurting usability and AT naming.
Keyboard traps: custom selects that can’t be opened/closed or navigated via keyboard.
Poor mobile behavior: custom widgets ignore native pickers and increase cognitive load.
Missing error text linkage: messages not connected via aria-describedby.

Testing Checklist

Test Item	WCAG Criteria	Pass Criteria
Label reads correctly	1.3.1, 3.3.2	Screen reader announces the label as the control’s name.
Keyboard interaction	2.1.1	Open, navigate, and select using keyboard; no traps.
Focus visible	2.4.7	Visible focus ring appears on select.
Error identification	3.3.1	Error message is shown and announced; state set to `aria-invalid="true"` if applicable.