The <select> Element
As defined in the HTML Living Standard, the <select> element represents a control for selecting amongst a set of options.
<label for="choice">Favorite Tag:</label>
<select id="choice" name="choice">
<option value="main">main</option>
<option value="article">article</option>
</select>
View HTML Living Standard: The select element
Accessibility Core: Name, Role, Value
The <select> element is a high-level interactive control. To be usable, it relies on being part of a semantic trio:
- Role: Browsers identify the element as a "listbox" or "combobox" automatically.
- Name: You must provide a label (using
<label for="...">) to provide the accessible name. - Value: The currently selected
<option>provides the value.
WCAG Requirement: Name, Role, Value
Success Criterion 4.1.2 (Level A): For all user interface components, the name and role can be programmatically determined...
A native <select> element handles the vast majority of this work for you. Screen readers announce the label, the element type, and the current selection as the user navigates. Custom "dropdown" widgets built with divs and spans often fail this criterion because they lack the built-in keyboard behavior and state reporting of the native select tag.
Standard Attributes
multiple: A boolean attribute that allows the user to select more than one option. Note: This changes the browser UI to a fixed-size listbox rather than a disclosure dropdown.size: Specifies the number of visible rows in the list.required: Ensures the user must select a non-placeholder option before submitting a form.disabled: Makes the entire control unselectable and grayed out.
<!-- Example of a multi-select listbox -->
<select name="tags" id="tags" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="a11y">Accessibility</option>
</select>
Best Practices
- Grouping: Use the
<optgroup>element to group related choices in long lists. This aids cognitive processing and screen reader navigation. - Placeholders: The first option should often be a "Please select" prompt with an empty value string. This makes the
requiredattribute function correctly. - Avoid Auto-Submit: Do not use JavaScript to submit the form immediately when the select value changes (
onchange="form.submit()"). This is disorienting for keyboard and screen reader users, violating WCAG SC 3.2.2 (On Input).
A11y Tip: Responsive States
On mobile devices, browsers often replace the desktop dropdown UI with a native modal picker. By using the standard <select> element, you automatically gain these OS-level optimizations, ensuring that touch targets are large and accessible for all users.