ARIA:aria-autocomplete 屬性

aria-autocomplete 屬性用於指示使用者在輸入文字時,是否會觸發一個或多個對使用者意圖值的預測性顯示,這些預測性顯示會針對 comboboxsearchboxtextbox 元件,並說明如果進行了預測,將如何呈現這些預測。

描述

自動完成(Autocompletion)是一種使用者介面特性,使用者在輸入框中輸入時,會動態地顯示建議。用於完成欄位值的建議文字會在輸入游標之後動態地顯示在輸入框中,如果使用者執行了導致焦點離開輸入框的操作(例如按下 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 值應動態調整,以引用包含所選建議的元素。

none(預設)

當用戶輸入時,不顯示任何自動建議。

inline

aria-autocomplete="inline" 可能會動態地在輸入游標後插入文字,以建議一種完成使用者輸入的方式。

list

aria-autocomplete="list" 當用戶輸入時,可能會顯示一個包含可能完成使用者輸入的值集合的元素。

both

aria-autocomplete="both" 同時提供這兩種模型。當用戶輸入時,可能會顯示一個包含可能完成使用者輸入的值集合的元素。如果顯示,集合中的一個值會被自動選中,並且完成該自動選中值所需的文字會出現在輸入框的游標之後。

相關角色

用於角色

規範

規範
無障礙富網際網路應用程式 (WAI-ARIA)
# aria-autocomplete
未知規範

另見