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