aria-autocomplete
描述
自動完成是使用者介面功能,其中在使用者在輸入框中鍵入時會提供內聯建議。欄位值的建議文字會在輸入游標之後動態出現在欄位中,如果使用者執行某個操作(例如,按 Tab 鍵導致焦點離開欄位),則建議值將成為該值。
aria-autocomplete 屬性描述了文字框、搜尋框或組合框在動態幫助使用者完成文字輸入時將使用的自動完成互動模型的型別。它區分兩種模型:**內聯**模型 (aria-autocomplete="inline"),它呈現單個預測值;以及**列表**模型 (aria-autocomplete="list"),它在一個單獨的元素中呈現可能的值得集合,該元素會彈出到文字輸入的旁邊或下方,類似於<datalist>。第三個值 aria-autocomplete="both" 用於介面同時呈現列表幷包含預測值的情況。預設值為 none,這意味著文字框、搜尋框或組合框不會提供自動完成值。
aria-autocomplete 屬性僅描述輸入元素的預測行為型別,供輔助技術使用;它不提供功能。應使用 HTML 屬性或 JavaScript 提供實際的自動完成功能。
如果建議的自動完成值提供的建議值不依賴於使用者提供的輸入,請考慮省略所有人的自動完成。例如,搜尋框輸入顯示未過濾的最近搜尋詞語可能對電子商務網站上的營銷團隊有所幫助,但可能對螢幕閱讀器使用者沒有幫助。當最好不為 aria-autocomplete 指定值或將值設定為 none 預設值時,您的非輔助技術使用者可能也不需要這種體驗。
在實施自動完成功能時,請確保將建議的值部分呈現為選中文字,以便能夠區分使用者的輸入和建議。確保當建議的值不是所需的值時,使用者可以輕鬆刪除建議或透過繼續鍵入來替換建議。
在實施值列表時,DOM 焦點應保留在文字輸入上,同時顯示建議列表。
- 包含
aria-controls,其值為建議值列表的 ID。 - 包含
aria-haspopup,使其與包含建議值集合的元素的角色相匹配。 - 根據需要管理焦點,包括如果集合容器支援,則使用
aria-activedescendant。 - 在具有角色
combobox的元素上使用aria-expanded狀態來傳達列表是否顯示。
如果在欄位失去焦點時自動接受自動完成列表值,則該列表必須包含在支援 aria-activedescendant 的角色中,並且輸入欄位上的 aria-activedescendant 值會動態調整為引用包含所選建議的元素。
值
關聯角色
規範
| 規範 |
|---|
| 可訪問的富網際網路應用程式 (WAI-ARIA) # aria-autocomplete |
| 未知規範 |
| 未知規範 |