Accessible Dropdowns & Selects

The native <select> element provides built-in accessibility. Always associate with a <label>. Use <optgroup> to group related options. The first option should typically be a placeholder with empty value. Native selects work with all assistive technologies without additional ARIA.

For custom styled selects, use the ARIA combobox pattern. Use role="combobox" on the input/button, aria-expanded to indicate open state, aria-controls to link to the listbox, and aria-autocomplete if applicable. The listbox should have role="listbox" with role="option" for each item.