Combined input field

Synonyms: Combination field, combo box

See also: Selection list, drop-down list, menu button, input field with autocomplete function

Combined input fields allow for text input and the selection of options from a list, where the list can be opened and closed (see DIN EN ISO 9241-161: 8.7).

In the closed state, a combined input field consists of an input field and a button (with arrow icon) for opening the list, which is located to the right of the input field. In the opened state, a selection list is displayed underneath (possibly with a scrollbar). The options of the selection list can be grouped. The labeling of the groups cannot be selected.

Combined input fields can be implemented very differently. The implementation variants include:

• As long as the input field is empty, in the open state, a selection list with all the options is displayed below the input field. If the input field contains text, only options that contain or begin with the text you have already entered appear in the selection list below the input field. If there are no options matching the entered text, no selection list will be displayed.
• The selection list contains certain commonly used values, regardless of the text input.
• The combined input field has two selection lists. The list entries of one list are independent of the text input; in the second list, the matching list entries are only displayed after the text input.
• The text input is used only to filter the options in the selection list. It is not possible to enter text that does not match any of the default options.

The requirements concerning the input field and the selection list are described in the “input field” and/or “selection list” section. Here, only the additional requirements are described which result from the fact that a selection list can be opened with the input field.

The requirements concerning the input field and the selection list are described in the “input field” and/or “selection list” section. Here, only the additional requirements are described which result from the fact that a selection list can be opened with the input field.

The requirements concerning the input field and the selection list are described in the “input field” and/or “selection list” section. Here, only the additional requirements are described which result from the fact that a selection list can be opened with the input field.

• JAWS: [label] edit combo collapsed | expanded [value] [instruction on text input and operation with the arrow keys]
• NVDA: [label] combo box collapsed | expanded [has autoc omplete] editable [value]
• Windows Narrator: [label] [value] combo edit collapsed | expanded

The combined input field should be implemented with the HTML elements <input type=… list=ID> and <datalist id=ID> and <option>.

• The list attribute is suitable to be used for the following values in the type attribute: text, search, url, tel, email.
• The list attribute may also be used according to the HTML specification with the following values in the type attribute. This is not supported by most browsers, however, and sometimes leads to misleading output by the screen readers: date, month, week, time, datetime-local, number, range, color.

The initial value is communicated through the value attribute at the <input> element.

The label should be linked to the combined input field with the <label for=ID> element.

The combined input field can be marked as a required field (required), as disabled (disabled) and/or as read-only (readonly).

The list entries cannot be marked as disabled or read-only. The list entries cannot be grouped.

Further information: 4.10.8 The datalist element - HTML Standard (whatwg.org), 4.10.5.3.9 The list attribute - HTML Standard (whatwg.org)

Please note: As the ARIA specification regarding combobox has changed fundamentally several times in recent years, it cannot be guaranteed that the combined input fields implemented with ARIA will be correctly output by all screen readers. The use of the native combined input field is therefore recommended instead. Alternatively, the ARIA implementation should be thoroughly tested with differing browsers and screen readers.
Please note: The ARIA pattern for combined input fields is often used for input fields with autocomplete function or drop-down lists. These three elements differ in their meaning and operation, however, and should not be mixed up.

If the combined input field is not implemented with the HTML elements, it is also necessary to take account of the following:

• The role is communicated with role=combobox. The role must be located at an input field (<input type=text>).
• The value of the input field (value attribute) is communicated as the value of the combined input field.
• The labeling of the combined input field can take place with aria-label or aria-labelledby.
• The status of the drop-down list (closed or open = selection list visible) must be communicated with aria-expanded.
• Reference is made to the selection list from the element with role=combobox using aria-controls.
• The autocomplete behavior of the combined input field is communicated with aria-autocomplete.
• The selection list is marked with role=listbox and its list entries with role=option.
• 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 button with the arrow icon which is able to open the selection list does not receive the keyboard focus (tabindex=-1), but should be marked so that it is output by the assistive technology when navigating with the virtual cursor. The button should be labeled expressively, refer to the selection list with aria-controls, and communicate the status of the selection list with aria-expanded.
• The combined input field can be marked as disabled with aria-disabled.
• The combined input field can be marked as read-only with aria-readonly.
• The combined input field can be marked as a required field with aria-required.
• The presentation of the combined input field should be verified in Windows High Contrast mode.
• The visible combined input field 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: combobox role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), Combobox 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!