Selects

The <select> element is used to create a list of options often referred to as a drop-down list.

Each option in the drop-down list is marked up as an <option> element nested within the <select>.

Like other form controls, a <select> must have a programmatically associated label. Do not use the first option in the list as a label.

Avoid multi-select drop-downs. Many users do not know to use multi-select drop-downs. If multiple selections are needed, change the design pattern (e.g. use a set of checkboxes instead).

As shown in the example code, using an explicit label will help users understand the context of the available options.

Drop-down example code

<label for="icecream">What is your favorite ice cream flavour?</label>
<select id="icecream" name="select">
	<option value="1">Vanilla</option>
	<option value="2">Chocolate</option>
	<option value="3">Strawberry</option>
	<option value="4">Rocky Road</option>
	<option value="5">I'm lactose intolerant!</option>
</select>

Semantics

Native HTML <select> elements receive keyboard focus by default. They convey the following semantic information which helps users of assistive technologies to interact with them:

State of the <select> (expanded or collapsed)
Number of options
Option position within a set of options (e.g. [option name], 1 of 3)
The currently selected option

Native elements also provide an established set of keyboard interactions that users can rely on.

Creating accessible custom drop-downs is very difficult. It is strongly recommended to use native HTML <select> elements or change the intended visual design to support native elements that provide a similar function. Avoid creating custom drop-downs.

If a custom drop-down is necessary:

Reference the WAI-ARIA Authoring Practices 1.1 design pattern for Listbox and follow the example for the Collapsible drop-down Listbox Example.
Ensure the visual design communicates the custom drop-down’s function, by including a down arrow or other established visual cue.
Ensure that any implemented custom drop-down is thoroughly tested by experienced accessibility specialists for semantics and keyboard interactions.

Optgroup

The <optgroup> element is not well-supported by screen readers, and should generally be avoided. Where sections of options are needed, consider using multiple <select> elements rather than a single <select> with <optgroup> sections.