Select

A select control presents a dropdown list from which users choose a single value, leveraging the native element for reliable keyboard interaction and screen reader support.

Demo

Tab to the select control and press Space or Enter to open the option list. Use the arrow keys to move through options and press Enter or Space to confirm a selection. Verify that both the field label and the chosen option are announced by a screen reader.

Select an option

What to Observe

The select has a persistent visible label that is programmatically associated with the control.
The control is reachable by Tab and fully operable by keyboard — no mouse is needed to open, navigate, or select an option.
The currently selected option is communicated to screen readers both when the control receives focus and after a selection is made.
If a default placeholder option is present, it is not selectable as a real value after the user has made a choice.
The select respects browser and OS conventions for the option list, ensuring consistent behavior across platforms.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

Field label: The visible text label linked to the select control that describes what the user is choosing.
Select element: The native HTML select control that renders the collapsed trigger and manages the option list.
Trigger / collapsed state: The visible button-like surface showing the current selection that opens the option list when activated.
Option list: The expanded dropdown containing all available choices, rendered by the browser or operating system.
Option items: The individual selectable values within the list, each with a visible text label.
Option groups: Optional groupings of related options under a shared non-selectable heading, created with the optgroup element.

Accessibility Behavior

The select control must have a visible label that is programmatically associated using a for/id pairing.
The control must be operable by keyboard: Tab to focus, Space or Enter to open, arrow keys to navigate options, and Enter or Space to confirm.
The selected option must be communicated to screen readers when focus enters the control and when the selection changes.
Placeholder options that represent no real value should carry an empty value and be disabled to prevent them from being re-selected.
Groupings of options must use the optgroup element with a label attribute so the category name is announced for screen reader users.
An error state, if present, must be communicated through text and linked to the select — not conveyed by a border color change alone.

Common Mistakes

Using a custom div-based dropdown instead of a native select element, losing all built-in keyboard and screen reader support.
Omitting a visible label and relying on a placeholder option as the only identifier, which disappears after the user makes a selection.
Failing to associate the label with the select programmatically, so screen readers do not announce the field's purpose.
Including a placeholder option that can be re-selected as a valid value, causing ambiguous or empty submissions.
Indicating an error state only through a red border color, with no text message linked to the control.

Why This Matters

The native select element is one of the most universally supported form controls across browsers, operating systems, and assistive technologies. When teams replace it with custom-built dropdowns, they take on the full responsibility of replicating every keyboard interaction and screen reader behavior — a burden that is often underestimated and leads to broken experiences. Retaining the native element with thoughtful labeling and option structure delivers the best accessibility outcome for the least implementation effort.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.