Select list

A select list is a form element that offers a menu of predefined options; in HTML it's the select element. The user opens the list, browses the options, and selects one or more. For assistive technologies, it's one of the most reliable native components, provided you don't replace it with a fake custom menu in divs.

A screen reader user arrives at your form. They press the down arrow, hear "France," then "Germany," "Belgium." They type the letter "E," and focus jumps to "Spain." Zero JavaScript. It's the native <select> doing all the work.

#What a <select> does

The <select> tag creates a dropdown list. Each option is an <option> element. When the list is long, <optgroup> groups options by category:

<label for="country">Country</label>
<select id="country" name="country">
  <option value="">Choose a country</option>
  <optgroup label="Europe">
    <option value="fr">France</option>
    <option value="de">Germany</option>
  </optgroup>
  <optgroup label="Americas">
    <option value="ca">Canada</option>
    <option value="br">Brazil</option>
  </optgroup>
</select>

The browser handles the rest. The user navigates with arrows, searches for an option by typing its first letter. Screen readers announce the field's role, its options, and the current selection. Everything is covered by W3C technique H91. Like any form field, <select> needs a <label> connected by for and id attributes.

One tip often overlooked: AcceDe Web recommends ordering options logically (alphabetically, numerically, or by contextual relevance) and never prefixing them with dashes or asterisks. The reason is concrete: typing "E" to reach "Spain" no longer works if the option is named "--Spain."

#The trap of the fake select in <div>

The native <select> isn't the most photogenic component. Designers know this. The temptation is strong to replace it with a custom menu in <div> and JavaScript.

A <div> is not a form control. The browser assigns it no role and no keyboard interaction. Screen readers don't announce it as a select list. To recreate this behavior, you must implement the W3C Listbox pattern: listbox and option roles, focus management, arrow navigation, first-letter selection, escape to close.

It's doable. The W3C recommends preferring native controls unless the need demands otherwise. Each custom ARIA component multiplies the risk of regression with every code update.

#In summary

The native <select> is accessible without effort: the browser handles keyboard and assistive technologies for you. Group long options with <optgroup> and order them logically. Don't prefix them with decorative characters. And if you customize the appearance, be prepared to recode the entire ARIA interaction.

Back to glossary
Share this article

Learn more

Form Input Field

A form input field is the HTML element in which a user enters or selects data: free text, date, checkbox, dropdown, file upload. To be accessible, each field must be linked in the code to a label that identifies the expected data. Without this connection, screen readers announce a silent field.

Form

A form is a set of fields and buttons that allow a user to transmit data on a website. To be accessible, each field must have a label linked in the code, related controls must be grouped in a fieldset, and errors must be reported as text. WCAG dedicates 13 criteria to it, its most comprehensive topic.

Form Field Label

A form field label is the text that indicates the data expected by an input field ('Name', 'Email', 'Password'). To be accessible, this text must be linked to the field in HTML code via the label element or ARIA attributes. Without this link, screen readers announce a silent field with no indication of what to enter.