如何根据搜索框中输入的文本通知用户建议列表已到达

Question

I am having a autocomplete list with manual selection means that:

When the suggestions box/list is displayed, it contains suggested values that correspond to the characters typed in the textbox. In my implementation, the values in the listbox have names that start with the characters typed in the textbox.

Users can set the value of the searchbox by choosing a value from the suggestions list.

If the user does not choose a value from the suggestions list before moving focus outside the searchbox, the value that the user typed, if any, becomes the value of the searchbox.

So my ask here is how to provide information to the visually impaired user that the suggestions list has now arrived corresponding to the text he has entered.

Answer 1

As pointed out in the comments, the HTML datalist element would be the standard compliant way of realising a suggestion box. It would be linked with your text input by means of the list attribute.

<input list="ice-cream-flavors" … />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    …
</datalist>

Sticking to HTML usually assures the most robust support of accessibility in the long term, and you wouldn't even need to worry about how to announce changes to this list.

But, as of now, it seems that the most popular screen readers are not announcing changes to the suggestions , so you might want another solution.

The ARIA Authoring Practices provide some guidelines on how to build search suggestions. The pattern is called Combobox , and the corresponding autocomplete behaviour would be "List autocomplete with manual selection".

The following line from that document should answer your question:

When the combobox popup is not visible, the element with role combobox has aria-expanded set to false. When the popup element is visible, aria-expanded is set to true. Note that elements with role combobox have a default value for aria-expanded of false.

From Aria roles and states

Screenreaders usually announce changes to this attribute.

You might notice that besides this attribute, there are quite some other attributes and roles to use, and keyboard navigation to implement, to really make the component accessible.