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".

Interactions:

• SpaceBar or ALT-DownArrow open select (ESC or Alt-UpArrow close)
• up/down arrow to make selection
• First letter quick jump
• see Caveats below

The Form:

The HTML:

Caveats:

• 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 option
  • 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 assistive technology,
  • sometimes breaks first letter navigation
  • OptGroup and size example
    apple banana pineapple red yellow blue
• 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>

Resources

• 7 Rules of Using Radio Buttons vs Drop-Down Menus
• Form Field Usability Revisited: Select Menus vs. Radio Buttons [Original Research]
• How to use Multiselect from the keyboard