Synonyms: Input field with suggestion list, autocomplete search, auto suggestion box
See also: selection list , drop-down list , menu button , input field (one-line), , combined input field
Input fields with the autocomplete function allow for text to be entered freely and the selection of options from a list, whereby the list is only opened after the text has been input.
In the closed state, an input field with autocomplete function consists of a single 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.
Input fields with the autocomplete function can also add the first hit to the input field automatically, so that this can be adopted immediately (Inline-Autocomplete). In this case, the text cursor remains at the position of the last character entered.
Presentation
Permalink "Presentation"The requirements concerning the input field are described in the “input field” section. Here, only the additional requirements are described which result from the fact that it is an input field with autocomplete function.
No. | Property | Description | Classification | Reference |
---|---|---|---|---|
617 | Contrast | The labeling of the options in the selection list of the autocomplete function must have a contrast of at least 4.5:1. | Must | EN 301 549: 9.1.4.3, 11.1.4.3 |
618 | Contrast | The selected option in the selection list of the autocomplete function must have a contrast of at least 3:1 with respect to the neighboring options. | Must | EN 301 549: 9.1.4.11, 11.1.4.11 |
619 | Focus visibility | In the case of keyboard navigation through the list entries, the current option must be displayed in the visible area. | Must | EN 301 549: 11.2.4.7 |
Operation
Permalink "Operation"The requirements concerning the input field are described in the “input field” section. Here, only the additional requirements are described which result from the fact that it is an input field with autocomplete function.
No. | Property | Description | Classification | Reference |
---|---|---|---|---|
620 | Use of the keyboard | It must be possible to access, operate and exit the options in the selection list of the autocomplete function with the keyboard (see Use of the keyboard table, below). | Must | EN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2 |
621 | Updates | When focusing and operating the input field with the autocomplete function, no unexpected |
Use of the keyboard: input field with autocomplete function
Permalink "Use of the keyboard: input field with autocomplete function"Action | Key | Classification |
---|---|---|
Opening of the selection list | Text input | Required |
Closing the selection list | ENTER ESC TAB Text input that does not lead to any results from the autocomplete function | Reauired |
Operation of the selection list (selection of the previous or following value) | UPP ARROW, DOWN ARROW | Required |
Operation of the selection list (selection of a value before or after with a defined increment) | PAGE UP, PAGE DOWN Note: The increment should correspond to the amount of visible options. | Recommended |
Use of the pointing device: input field with autocomplete function
Permalink "Use of the pointing device: input field with autocomplete function"Action | Key | Classification |
---|---|---|
Closing the selection list | Left click on a value within the open list | Required |
Closing the selection list | Left click outside the combined input field (consisting of the input field and the selection list) | Required |
Value selection within the selection list | Left click on a value | Required |
Programming/interfaces
Permalink "Programming/interfaces"The requirements concerning the input field are described in the “input field” section. Here, only the additional requirements are described which result from the fact that it is an input field with autocomplete function.
No. | Property | Description | Classification | Reference |
---|---|---|---|---|
623 | Role | The input field role must be communicated to the Accessibility API (see |
Information about this article
You are welcome to send feedback by email about our handout!