Using The Select Element
When ever possible use a native HTML element or attribute with the semantics and behaviour already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible.
- Use <button> or <input type=submit>, and do not use <a role=button> And
- use <ul>, <ol> and <li>, and do not use <span role=list>, etc.
The Select Element Keyboard Actions
The HTML <select> element represents a control that presents a menu of options. The options within the menu are represented by <option> elements, which can be grouped by <optgroup> elements. Options can be pre-selected for the user.
- The Tab key moves focus into the field. A second Tab key selects the current item on the list, updates the field’s value, closes the dropdown list, and moves focus to the next focusable item in the tab order.
- The Alt Down Arrow or Spacebar keys open the dropdown list and moves focus to the selected option. If nothing is selected, then focus moves to the first option in the list. If a combobox is not editable, then the Spacebar may also be used to open the dropdown list.
- The Up and Down Arrow keys moves focus up and down the list. As focus moves inside the dropdown list, the edit field is updated.
- The Enter key selects the current item on the list, updates the value, highlights the selected item in the dropdown list, closes the dropdown list and returns focus to the field.
- The Escape key closes the dropdown list, returns focus to the field, and does not change the current selection.
- Typing a letter (printable character) key moves focus to the next instance of a visible node whose title begins with that printable letter.
HTML Select Example 1
<span tabindex="0" id="button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="menu" aria-haspopup="true" aria-activedescendant="option-1" aria-labelledby="option-1" aria-disabled="false">Choose a country…</span> <ul aria-hidden="true" aria-labelledby="button" id="menu" role="listbox" tabindex="0" aria-activedescendant="option-1" style="display: none;"> <li id="option-1" role="option" tabindex="-1">Albania</li> <li id="option-2" role="option" tabindex="-1">Australia</li> <li id="option-3" role="option" tabindex="-1">Brazil</li> <li id="option-4" role="option" tabindex="-1">Canada</li> <li id="option-5" role="option" tabindex="-1">England</li> <li id="option-6" role="option" tabindex="-1">United States</li> </ul>