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