如何根據搜索框中輸入的文本通知用戶建議列表已到達

Question

我有一個帶有手動選擇的自動完成列表意味着：

當顯示建議框/列表時，它包含與文本框中鍵入的字符相對應的建議值。 在我的實現中，列表框中的值的名稱以文本框中鍵入的字符開頭。

用戶可以通過從建議列表中選擇一個值來設置搜索框的值。

如果用戶在將焦點移出搜索框之前沒有從建議列表中選擇值，則用戶鍵入的值（如果有）將成為搜索框的值。

所以我在這里的問題是如何向視障用戶提供建議列表現在已經到達與他輸入的文本相對應的信息。

Answer 1

正如評論中指出的那樣，HTML datalist 元素將是實現建議框的標准兼容方式。 它將通過list屬性與您的文本輸入鏈接。

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

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

從長遠來看，堅持使用 HTML 通常可以確保對可訪問性的最強大支持，您甚至無需擔心如何宣布對此列表的更改。

但是，截至目前，似乎最流行的屏幕閱讀器並未宣布對建議的更改，因此您可能需要其他解決方案。

ARIA 創作實踐提供了一些關於如何構建搜索建議的指南。 該模式稱為Combobox ，相應的自動完成行為將是“手動選擇列表自動完成”。

該文檔中的以下行應該可以回答您的問題：

當組合框彈出窗口不可見時，具有組合框角色的元素將 aria-expanded 設置為 false。 當彈出元素可見時，aria-expanded 設置為 true。 請注意，具有角色組合框的元素的 aria-expanded 的默認值為 false。

屏幕閱讀器通常會宣布對此屬性的更改。

您可能會注意到，除了這個屬性之外，還有很多其他屬性和角色要使用，鍵盤導航要實現，才能真正使組件可訪問。