Testing aria-autocomplete

aria-autocomplete tells assistive technology what kind of autocomplete suggestion behaviour a combobox offers as the user types: none, inline, list, or both. All four examples below suggest from the same fixed list: Apple, Apricot, Banana, Blueberry, Cherry, Cranberry.

Example 1: aria-autocomplete="none"

Typing here produces no suggestions of any kind, no popup, no inline completion. This is the default value, included for contrast with the other three.

Expected result: no suggestions should appear or be offered, by design.

HTML markup
<input role="combobox" aria-autocomplete="none">

Example 2: aria-autocomplete="list"

As you type, matching fruits appear in a popup list below the input. Arrow keys move between matches, using aria-activedescendant, the same virtual focus pattern covered on its own page. Real focus stays on the input throughout.

Expected result: typing "ap" should show Apple and Apricot in the popup. Arrow keys should move aria-activedescendant between them without moving real focus from the input.

HTML markup
<input role="combobox" aria-autocomplete="list" aria-controls="ac-list-listbox">
<ul role="listbox" id="ac-list-listbox"></ul>

Example 3: aria-autocomplete="inline"

As you type, the input's own value is completed automatically with the first matching suggestion, with the completed remainder shown as selected text. Typing a further character, or pressing Backspace, replaces or removes the suggested part naturally. There is no popup at all with this value.

Expected result: typing "ap" should complete the input's value to "apple", with "ple" shown as selected text. Typing "b" should complete to the first match, "banana".

HTML markup
<input role="combobox" aria-autocomplete="inline">

Example 4: aria-autocomplete="both"

Combines the previous two: inline completion of the input's value, and a popup list of all matches, at the same time.

Expected result: typing "ap" should both complete the input's value inline to "apple" (selected remainder), and show Apple and Apricot in the popup list below.

HTML markup
<input role="combobox" aria-autocomplete="both" aria-controls="ac-both-listbox">
<ul role="listbox" id="ac-both-listbox"></ul>

Note for testing: confirm with your standard browser and screen reader combinations how each value is actually announced, particularly inline, where the selected/highlighted completion text needs to be conveyed clearly as a suggestion, not silently, or as if the user had typed it themselves.