Labels for Select Menus
- Select is also known as a drop-down or combo-box.
- The label for the select menu associates the prompt with the menu as a whole, the <select> tag.
- DO NOT ADD a label to the individual <option> items in the menu.
- Users expect to move down a <select>. Note: it's a dropDOWN, not a dropUP.
- Put default <option selected> at the TOP, not bottom or middle. The default can also be used as a "hint".
- SpaceBar or ALT-DownArrow open select (ESC or Alt-UpArrow close)
- up/down arrow to make selection
- First letter quick jump
- see Caveats below
<label for="dogsize">Your dog's size</label>
<option value="" selected>Pick a dog size:</option>
<input type="button" value="Submit" />
- Select is the most difficult to use cognitively; use radio buttons if possible
- multiple attribute. Allows multiple selections - very difficult with keyboard only, obscure keystrokes,
use checkboxes (Webaim)
- limited amount of text for each
- no word wrap
- if you set a width, options of longer width are visually truncated.
- <optgroup> -
- helps structure list <optgroup label="fruit">
- but not always read by
- sometimes breaks first letter navigation
- size attribute controls the size of the scroll list box.
<select size="3"> shows 3 item scroll list box above.
- breaks ALT-DownArrow to expand box
- cannot style the highlight (selection indicator) in <select>