Multiple selection list

Synonyme: List field, multi-line selection list, list box

See also: Selection list, drpo-down list, check box group, tree structur

Multiple selection lists allow the selection of several options from a list (see DIN EN ISO 9241-161: 8.39).

All the selectable options are displayed in the multiple selection list (with scrollbrars if necessary). The selected options are highlighted. The options can be grouped. The labeling of the groups cannot be selected. The focused option is not automatically identical to the selected option.

The requirements concerning the selection list are described in the “selection list” section. Here, only the additional requirements are described which result from the fact that it is a selection list with multiple selection.

The requirements concerning the selection list are described in the “selection list” section. Here, only the additional requirements are described which result from the fact that it is a selection list with multiple selection.

Note: A simplified but currently less established use of the multiple selection feature is described in the practical tip on the simplified use of multiple selection. It is recommended that the implemented operation concerning multiple selection is described in the application or the Help option, regardless of the method chosen

Note: A simplified but currently less established use of the multiple selection feature is described in the practical tip: simplified use of multiple selection. It is recommended that the implemented operation concerning multiple selection is described in the application or the Help option, regardless of the method chosen.

The requirements concerning the selection list are described in the “selection list” section. Here, only the additional requirements are described which result from the fact that it is a selection list with multiple selection.

The possibility for multiple selection is not generally identifiable, as the multiple selection lists do not differ visually from the selection list. Moreover, multiple selection (in particular the selection of non-neighboring values) with the keyboard and the pointing device is difficult. In addition, the selected elements are often imperceptible with the screen reader. It is therefore recommended to replace multiple selection lists with other elements, to implement them in a simple form, or to describe their function and operation. Alternatives to multiple selection lists include:

• group of check boxes, or
• two selection list or multiple selection lists side by side, with the first list showing the available values and the second list showing the selected values. Buttons can be used to move values from the first list to the second list or to remove them (see screenshot).

A simple use of multiple selection lists can be implemented as follows:

• with the pointing device: Click on a value changes the status (selected or unselected)
• with the keyboard: Enabling of a value with the SPACE bar changes the status (selected or unselected).

A simple use of multiple selection lists can be implemented as follows:

• with the pointing device: Click on a value changes the status (selected or unselected)
• with the keyboard: Enabling of a value with the SPACE bar changes the status (selected or unselected).

• JAWS:
  • JAWS:
    • Without selected list entry: [label] extended list field [instruction on operation with the arrow keys]
    • With selected list entries: [label] extended list field [focused list entry] [position and amount] [instruction on operation with the arrow keys]
• NVDA:
  • Without selected list entry: [label] list
  • With selected list entries: [label] list [focused list entry] [position and amount]
• Windows narrator:
  • Without selected list entry: [label] selected supports multiple selection [amount]
  • With selected list entries: [label] [focused list entry] [position and amount] selected.

Please note: In the form mode, the selected list entries are imperceptible with the screen reader. The possibility for multiple selection is partly imperceptible. The use of an alternative element is therefore recommended (see Practical tip: alternatives to the selection list with multiple selection).

Please note: The use of the keyboard is also difficult for the following reasons:

• Modifier keys, which users may not be familiar with, are required for multiple selection. With old browsers, multiple selection with the keyboard is not possible and/or it is necessary for different modifier keys to be used.
• In the case of multiple selection, the selected list entries are visible, but the currently focused list entry is not.

The use of an alternative element is therefore recommended (see Practical tip: alternatives to the selection list with multiple selection).

The implementation instructions for the HTML selection list are described in the “selection list” section. Here, only the additional instructions are given, which result from the fact that it is a selection list with multiple selection.

• The multiple selection list should be implemented with the multiple attribute.
• The initially selected list entry is marked with the selected attribute.

The implementation instructions for the ARIA selection list are described in the “selection list” section. Here, only the additional instructions are given, which result from the fact that it is a selection list with multiple selection.

• The possibility for multiple selection is communicated with aria-multiselectable=true.
• The selected list entries are marked with aria-selected=true or aria-checked=true, all others with aria-selected=false and/or aria-checked=false.
• When navigating through the list entries in the selection list, these must either actually receive the focus, or reference is made to the focused list entry with aria-activedescendant. The first variant is to be preferred. In both cases, care must be taken to ensure that the navigation through the multiple selection list does not automatically change the status of the list entries (selected or unselected)

Information about this article

Date:

21.10.2024

License:

CC-BY-SA 4.0

Version:

1.0

You are welcome to send feedback by email about our handout!