Multiple select Menu/List Box Lacks Accessible Markup

Short Description

Multiple select menus/List Boxes have intrinsic navigation issues for a screen reader user

Long Description

  • A multiple select menu/list box allows a user to select multiple options, and it is a clean way to store a long list. However, there are multiple navigation and operation issues for a screen reader user.
  • In a multiple select menu/list box, a screen reader user needs to use a specific combination of keys to make each selection. In addition, it can be difficult to determine which options they have selected. In a regular select menu/combo box/drop down box, a screen reader user enters the menu, uses the arrow keys combined with letters to navigate to the desired selection, and then leaves the element. The option that last had the focus is the one that is selected and it remains in the field, making it easy to select and know what they selected.
  • The screen reader generally does not read the item focused on when the user enters the menu, increasing the likelihood the user will miss an option.
  • If a user uses the arrow keys to navigate the menu without the specific key combinations, the previously selected items are likely to revert to being unselected.
  • There is no quick way to check which items are selected or not selected without listening through the whole item name of every item. In addition, screen readers differ in how much information they provide about whether or not an item is selected.

Example of Issue

Recommendations

  • Use check boxes instead of the multiple select menu if the list has a manageable number of items.
  • Add instructions with the keyboard short cuts for making multiple selections if it is necessary to use a multiple select list.

Accessibility/Usability

Accessibility
Usability

Impacted Assistive Technology

Screen Reader

Impacted Type of Device

Computer
Mobile