spark wai

在這篇文章中，我想討論一個(gè)AutoComplete小部件的可訪問(wèn)性。 在您鍵入該字段時(shí)，通常會(huì)使用“自動(dòng)完成”窗口小部件提供建議。 在當(dāng)前的工作中，我基于Twitter的Typeahead （一個(gè)靈活JavaScript庫(kù)）實(shí)現(xiàn)了JSF組件，該庫(kù)為構(gòu)建健壯的typeahead提供了堅(jiān)實(shí)的基礎(chǔ)。 Typeahead小部件具有偽代碼形式的可靠規(guī)范 ，詳細(xì)說(shuō)明了UI對(duì)事件的React。 Typeahed可以在相應(yīng)的輸入字段中顯示提示，例如google的搜索字段顯示該提示，突出顯示匹配項(xiàng)，處理自定義數(shù)據(jù)集和預(yù)編譯的模板。 此外， Bloodhound建議引擎還提供預(yù)取，智能緩存，快速查找以及回填遠(yuǎn)程數(shù)據(jù)的功能。

盡管有許多功能，但Typeahead的一大缺點(diǎn)是對(duì)WAI-ARIA的支持不足（我要說(shuō)到現(xiàn)在為止，它是完全缺失的）。 AutoComplete小部件的設(shè)計(jì)應(yīng)使屏幕閱讀器和其他輔助工具的用戶可以立即使用。 我決定添加完全的WAI-ARIA支持，完成此任務(wù)并將我的請(qǐng)求請(qǐng)求發(fā)送到GitHub。 以下是帶有解釋的新“ WAI-ARIA感知”標(biāo)記（未省略相關(guān)HTML屬性）。

<input class="typeahead tt-hint" aria-hidden="true"><input class="typeahead tt-input" role="combobox"aria-autocomplete="list/both"aria-owns="someUniqueID"aria-activedescendant="set dynamically to someUniqueID-1, etc."aria-expanded="false/true"><span id="someUniqueID" class="tt-dropdown-menu" role="listbox"><div class="tt-dataset-somename" role="presentation">...<span class="tt-suggestions" role="presentation"><div id="someUniqueID-1" class="tt-suggestion" role="option">... single suggestion ...</div>...</span>...</div> </span><span class="tt-status" role="status" aria-live="polite" style="border:0 none; clip:rect(0, 0, 0, 0); height:1px;width:1px; margin:-1px; overflow:hidden; padding:0; position:absolute;">... HTML string or a precompiled template ... </span>

tt-hint類(lèi)的第一個(gè)輸入字段模擬視覺(jué)提示（如上圖）。 提示以可視方式完成對(duì)匹配建議的輸入查詢。 可以通過(guò)按右箭頭或Tab鍵完成對(duì)建議（提示）的查詢。 該提示與屏幕閱讀器無(wú)關(guān)，因此我們可以將aria-hidden =“ true”應(yīng)用于該字段。 屏幕提示會(huì)忽略該提示。 為什么不重要？ 因?yàn)槲覀儗⑼ㄟ^(guò)aria-live =“禮貌”（將在下面進(jìn)行說(shuō)明）通過(guò)“狀態(tài)”區(qū)域強(qiáng)行閱讀匹配的建議。

下一個(gè)輸入字段是用戶輸入查詢的主要元素。 它應(yīng)該具有角色=“ combobox”。 對(duì)于自動(dòng)完成，建議使用此角色。 有關(guān)更多詳細(xì)信息，請(qǐng)參見(jiàn)WAI-ARIA官方文檔 。 實(shí)際上，docu還顯示了AutoComplete的粗略標(biāo)記結(jié)構(gòu)！

主輸入字段應(yīng)具有各種ARIA狀態(tài)和屬性。 aria-autocomplete =” list”表示當(dāng)用戶輸入時(shí)，輸入以列表的形式提供自動(dòng)完成建議。 aria-autocomplete =“ both”表示提示也由提示（除了列表）提供。 aria-owns屬性指示輸入字段和帶有建議的列表之間存在父/子關(guān)系。 當(dāng)無(wú)法使用DOM層次結(jié)構(gòu)表示關(guān)系時(shí)，應(yīng)始終設(shè)置此屬性。 否則，屏幕閱讀器將很難找到包含建議的列表。 在我們的例子中，它指向列表的ID。 最有趣的屬性是aria-activedescendant。 視力不佳的用戶通過(guò)箭頭鍵在列表中導(dǎo)航。 aria-activedescendant屬性將焦點(diǎn)更改傳播到輔助技術(shù)-對(duì)其進(jìn)行了調(diào)整以反映已導(dǎo)航到的當(dāng)前子元素的ID屬性。 在上圖中，選中了“阿拉伯的勞倫斯”項(xiàng)目（突出顯示）。 aria-activedescendant設(shè)置為此項(xiàng)的ID，屏幕閱讀器會(huì)向盲人用戶“ Lawrence of Arabia”讀取。 注意：焦點(diǎn)停留在輸入字段上，因此您仍然可以編輯輸入值。 我建議在Google的Web Accessibility簡(jiǎn)介中閱讀有關(guān)此屬性的更多信息。

aria-expanded屬性指示帶有建議的列表是展開(kāi)（true）還是折疊（false）。 列表狀態(tài)更改時(shí)，此屬性將自動(dòng)更新。

帶有建議的列表本身應(yīng)具有“列表框”角色。 這意味著，小部件允許用戶從選項(xiàng)列表中選擇一個(gè)或多個(gè)項(xiàng)目。 應(yīng)將role =“ option”應(yīng)用于列表中的各個(gè)結(jié)果項(xiàng)目節(jié)點(diǎn)。 我建議閱讀一篇有趣的文章“在構(gòu)造自動(dòng)完成列表時(shí)使用“列表框”和“選項(xiàng)”角色” 。 對(duì)于屏幕閱讀器來(lái)說(shuō)不重要的部分應(yīng)標(biāo)記為role =“ presentation”。 該角色說(shuō)“我的標(biāo)記僅適用于非盲人用戶”。 您可能會(huì)問(wèn)，角色=“應(yīng)用程序”是什么？ 對(duì)我們重要嗎？ 并不是的。 在閱讀了“并非所有ARIA小部件都應(yīng)具有角色=”應(yīng)用程序”之后，我跳過(guò)了它。

標(biāo)記中的最后一個(gè)元素是具有角色=“狀態(tài)”和屬性aria-live =“禮讓”的范圍。 這有什么用？ 您可以通過(guò)讓用戶知道自動(dòng)完成的結(jié)果（通過(guò)自動(dòng)朗讀的文本）來(lái)為小部件增添趣味。 小部件應(yīng)將要說(shuō)的文本添加到移到視口之外的元素中。 這是所提到的具有應(yīng)用樣式的span元素。 樣式與jQuery CSS類(lèi)ui-helper-hidden-accessible完全相同，后者以可視方式隱藏內(nèi)容，但仍可用于輔助技術(shù)。 span元素的aria-live =“ polite”屬性意味著–應(yīng)該在下一個(gè)寬限間隔（例如，當(dāng)用戶停止鍵入時(shí)）宣布該元素內(nèi)的更新。 通常，aria-live屬性指示實(shí)時(shí)內(nèi)容中的一段以及應(yīng)宣布更改的詳細(xì)程度。 我在項(xiàng)目中將自動(dòng)完成的口語(yǔ)文本定義為由Handlebars編譯JavaScript模板（也可以使用其他任何模板化引擎，例如Hogan ）。

Handlebars.compile('{{#unless isEmpty}}{{count}} suggestions available.' +'{{#if withHint}}Top suggestion {{hint}} can be chosen by right arrow or tab key.' +'{{/if}}{{/unless}}')

當(dāng)用戶停止鍵入內(nèi)容并顯示建議時(shí)，屏幕閱讀器會(huì)讀取可用建議的數(shù)量和頂部建議。 非常好。

最后但并非最不重要的是測(cè)試。 如果尚未安裝屏幕閱讀器，請(qǐng)安裝Google Chrome擴(kuò)展ChromeVox和Accessibility Developer Tools 。 這些是開(kāi)發(fā)的好工具。 請(qǐng)觀看簡(jiǎn)短的ChromeVox演示和Accessibility Developer Tools演示 。 或者，您也可以嘗試使用免費(fèi)的獨(dú)立屏幕閱讀器NVDA 。 簡(jiǎn)單嘗試一下工具。

翻譯自: https://www.javacodegeeks.com/2014/10/wai-aria-support-for-autocomplete-widget.html

spark wai

總結(jié)

以上是生活随笔為你收集整理的spark wai_WAI-ARIA对自动完成小部件的支持的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。