文檔金喜正規買球>>telerik中文文檔>>概述
概述
AutoComplete 可通過屏幕閱讀器訪問,并提供 WAI-ARIA、Section 508、WCAG 2.1 和鍵盤支持。
注意:根據規范“作者必須確保具有角色組合框的元素包含或擁有具有角色文本框或搜索框的文本輸入元素...”。請注意,在實現過程中,文本輸入元素是具有 role="combobox" 的元素,并且不包含其他文本輸入元素。此方法對于規范以及規范均有效。
如 中所述,“由于先前模式的實現問題,組合框指南在 ARIA 1.2 中發生了重大變化”。因此,我們將保留當前狀態,即使它與 WAI-ARIA 1.1 規范相矛盾。
Kendo UI for jQuery AutoComplete提供廣泛的輔助功能支持,使殘障用戶能夠完全控制其功能。
自動完成符合標準]( ) 和要求,遵循針對其角色實現鍵盤導航的component最佳實踐,提供了管理其焦點的選項,并針對最常見的屏幕閱讀器進行了測試。
WAI-ARIA
下表列出了 AutoComplete 組件支持的選擇器、屬性和行為模式:
選擇器 | 屬性 | 用法 |
---|---|---|
.k-input-inner | role=combobox | 宣布存在自動完成作為用于過濾的自動完成的內部元素。 |
label for或aria-label或aria-labelledby | 該輸入需要為其分配一個可訪問的名稱。 | |
aria-haspopup=listbox | 指示組件有一個列表框彈出窗口。 | |
aria-expanded=true/false | 宣布彈出窗口的可見性狀態。 | |
aria-controls=.k-list-ul id | 指向列表框元素。表示該combobox元素控制listbox. | |
aria-activedescendant=.k-list-item.k-focus id | 指向彈出窗口中的焦點項目。通過鍵盤導航更改焦點項目。如果彈出窗口不可見,則該屬性不應指向任何元素或應將其刪除。 | |
aria-autocomplete=list | 啟用過濾功能時,將呈現屬性并將值設置為列表。 | |
aria-autocomplete=both | 當過濾和建議功能都啟用時,將呈現屬性并將值設置為兩者。 | |
aria-autocomplete=inline | 屬性已呈現,值設置為僅建議啟用功能。 | |
readonly或者aria-readonly | 僅當自動完成功能為只讀時才會呈現屬性。 | |
aria-busy=true | 僅當自動完成加載數據時才會呈現屬性。 | |
tabindex=0 | 該元素必須是可聚焦的。 | |
.k-invalid .k-input-inner,.ng-invalid .k-input-inner | aria-invalid=true | 僅當自動完成處于表單中并宣布組件的有效狀態時才會呈現屬性。 |
.k-disabled .k-input-inner | disabled=disabled或者aria-disabled=true | 僅當自動完成功能被禁用時才會呈現屬性。 |
列表框彈出
組件的 Popup 元素應實現Popup List組件的規范。
選擇器 | 屬性 | 用法 |
---|---|---|
.k-animation-container | role=region | 當組件容器附加到<body>文檔的元素時,需要為其分配一個里程碑角色。否則,應將其附加到具有適當標志性角色的元素。 |
aria-label或者aria-labelledby | 當容器分配了角色時提供標簽region。 | |
.k-list-ul | role=listbox | 將 ul 元素標識為列表框。 |
aria-label或者aria-labelledby | 為組合框的列表框提供標簽。 | |
.k-list-item | role=option | 將 li 元素標識為列表框選項。 |
.k-list-item.k-selected | aria-selected=true | 指示項目的選定狀態。 |
第508條
AutoComplete 完全符合第 508 節的要求。
測試
AutoComplete 已經使用自動進行了廣泛測試,并使用最常見的屏幕閱讀器進行了手動測試。
屏幕閱讀器
環境 | 工具 |
---|---|
火狐瀏覽器 | NVDA |
Chrome | JAWS |
微軟Edge | JAWS |
自動化測試
AutoComplete 已使用進行了測試。