Selection list

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

See also: Multiple selection list, drop-down list, radio button group, tree structure

Selection lists allow the selection of an option from a list (see DIN EN ISO 9241-161: 8.39).

All the available options are displayed in the selection list (with scrollbars)if necessary). The current value is highlighted. The options can be grouped. The labeling of the groups cannot be selected. The focused option is identical to the selected option.

During focusing of the selection list:

• JAWS:
  • Without selected list entry: [label] list box [instruction on operation with the arrow keys]
  • With selected list entry: [label] list box [value] [position] of [amount] [instruction on operation with the arrow keys]
• NVDA:
  • Without selected list entry: [label] list
  • With selected list entry: [label] list [value] [position] of [amount]
• Windows narrator:
  • Without selected list entry: [label] selected requires selection contains [amount] items
  • With selected list entry: [label] list [value] [position] of [amount] selected

When navigating through the selection list with the arrow keys:

• JAWS: [value] [position] of [amount]
• NVDA: [value] [position] of [amount]
• Windows Narrator: [value] [position] of [amount] selected

On reading with the virtual cursor:

• JAWS:
  • Without selected list entry: [label] list box
  • With selected list entry: [label] [value] list box items selected [position] of [amount]
• NVDA:
  • Without selected list entry: [label] list clickable [first list entry]
  • With selected list entry: [label] list clickable [value]
• Windows Narrator: [label] [position] of [amount] [| selected] [list entry]

Please note:

• JAWS and NVDA do not output the grouping of an HTML selection list with <optgroup>. Windows Narrator only outputs the grouping with <optgroup> on reading with the virtual cursor.
• JAWS and NVDA do not output the grouping of an ARIA selection list correctly with role=group group. Windows Narrator only outputs the grouping with role=group on reading with the virtual cursor.
• When reading with the virtual cursor, JAWS only outputs the selected list entry, NVDA outputs the selected or first list entry, and Windows Narrator outputs all list entries.

The selection list should be implemented with the HTML elements <select> and <option> with a value greater than 1 with the size attribut und without the multiple attribute.
The list entries can be grouped with the <optgroup> element. The grouping should be avoided, however, as many screen readers do not output the group label (which is specified with the label attribut).
The initially selected list entry can be set with the selected attribut. An initial list entry should be selected in each selection list, as keyboard users automatically make a selection when navigating through the selection list which cannot be undone. The list entry should be initially selected which is either most likely to be selected or which contains a neutral option (e.g. “not applicable”).
The label should be linked to the selection list with the <label for=ID> element.
A selection list, a group of list entries and the individual list entries can be marked as disabled (disabled), but not read-only (readonly).
A selection list can be marked as a required field with required.

Further information: 4.10.7 The select element - HTML Standard (whatwg.org)

If the selection list is not implemented with the HTML element, it is also necessary to take account of the following:

• The selection list is marked with role=listbox and contains the list entries that are marked with role=option.
• The list entries can be grouped within an element which is marked with role=group. The group is labeled with aria-label or aria-labelledby.
• The selected list entry is marked with aria-selected=true, all others with aria-selected=false. The selected list entry can also be communicated with aria-checked – this is not recommended for selection lists without multiple selection, however.
• Alternatively, the selected list entry is not explicitly marked, but is determined automatically by the focused list entry during the operation. This is not recommended, though, because the assistive technology is not able to reliably determine the selected list entry in the non-focused state.
• The labeling of the selection list can take place with aria-label or aria-labelledby.
• When navigating through the list entries in the selection list, these must either actually receive the focus, or reference is made to the selected list entry with aria-activedescendant. The first variant is to be preferred.
• The selection list can be marked as disabled with aria-disabled.
• The selection list can be marked as read-only with aria-readonly.
• The selection list can be marked as a required field with aria-required.
• A non-standard horizontal orientation of the selection list can be specified with aria-orientation=horizontal. Frequently, the orientation is not output by the assistive technology, so that with horizontally oriented list entries, operation with all the arrow keys should be possible.
• The presentation of the selection list should be verified in Windows High Contrast mode.
• The visible selection list and the programmatically focused element should have the same position and size.
• When navigating through the list entries, the focused list entry should be displayed in the visible area.

Further information: listbox role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), Listbox Pattern | APG | WAI | W3C

Information about this article

Date:

6.12.2024

License:

CC-BY-SA 4.0

Version:

1.0

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