在本文中，我想討論AutoComplete小部件的可訪問性。 在您鍵入該字段時，通常會使用“自動完成”窗口小部件提供建議。 在當前的工作中，我基于Twitter的Typeahead （一個靈活JavaScript庫）實現了JSF組件，該庫為構建可靠的typeahead提供了堅實的基礎。 Typeahead小部件具有偽代碼形式的可靠規范 ，該規范詳細描述了UI對事件的反應。 Typeahed可以在相應的輸入字段中顯示提示，例如google的搜索字段顯示該提示，突出顯示匹配項，處理自定義數據集和預編譯的模板。 此外， Bloodhound建議引擎還提供預取，智能緩存，快速查找以及回填遠程數據的功能。

盡管有很多功能，但Typeahead的一大缺點是對WAI-ARIA的支持不足（我要說到現在為止，它是完全缺失的）。 AutoComplete小部件的設計應使屏幕閱讀器和其他輔助工具的用戶可以立即使用。 我決定添加一個完全的WAI-ARIA支持，完成此任務并將我的請求請求發送到GitHub。 以下是帶有解釋的新“ WAI-ARIA感知”標記（未省略相關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的第一個輸入字段模擬視覺提示（如上圖）。 提示以可視方式完成對匹配建議的輸入查詢。 可以通過按右箭頭或Tab鍵完成對建議（提示）的查詢。 該提示與屏幕閱讀器無關，因此我們可以將aria-hidden =“ true”應用于該字段。 屏幕閱讀器會忽略該提示。 為什么不重要？ 因為我們將通過aria-live =“禮貌”（將在下面進行說明）通過“狀態”區域強行閱讀匹配的建議。

下一個輸入字段是用戶輸入查詢的主要元素。 它應該具有角色=“ combobox”。 對于自動完成，建議使用此角色。 有關更多詳細信息，請參見WAI-ARIA官方文檔 。 實際上，docu還顯示了AutoComplete的粗略標記結構！

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

aria-expanded屬性指示帶有建議的列表是展開（true）還是折疊（false）。 列表狀態更改時，此屬性將自動更新。

帶有建議的列表本身應具有“列表框”角色。 這意味著，小部件允許用戶從選項列表中選擇一個或多個項目。 應將role =“ option”應用于列表中的各個結果項目節點。 我建議閱讀一篇有趣的文章“在構建自動完成列表時使用“列表框”和“選項”角色” 。 對于屏幕閱讀器而言并不重要的部件應標記為role =“ presentation”。 該角色說“我的標記僅適用于非盲人用戶”。 您可能會問，角色=“應用程序”是什么？ 對我們重要嗎？ 并不是的。 在閱讀了“并非所有ARIA小部件都應具有角色=”應用程序”之后，我跳過了它。

標記中的最后一個元素是跨度，其作用是角色=“狀態”和屬性aria-live =“禮讓”。 這有什么用？ 您可以通過使用戶知道自動完成的結果（通過自動說出的文本）來為小部件增添趣味。 小部件應將要說出的文字添加到移到視口之外的元素中。 這是所提到的具有應用樣式的span元素。 樣式與jQuery CSS類ui-helper-hidden-accessible完全相同，后者以可視方式隱藏內容，但仍可用于輔助技術。 span元素的aria-live =“ polite”屬性表示–應該在下一個寬限間隔（例如，當用戶停止鍵入時）宣布該元素內的更新。 通常，aria-live屬性指示實時內容中的一段以及應宣布更改的詳細程度。 我在項目中將自動完成的口語文本定義為由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}}')

當用戶停止鍵入內容并顯示建議時，屏幕閱讀器會讀取可用建議的計數和頂部建議。 非常好。

最后但并非最不重要的是測試。 如果您尚未安裝屏幕閱讀器，請安裝Google Chrome擴展ChromeVox和Accessibility Developer Tools 。 這些是開發的好工具。 請觀看簡短的ChromeVox演示和Accessibility Developer Tools演示 。 或者，您也可以嘗試使用免費的獨立屏幕閱讀器NVDA 。 簡單嘗試一下工具。

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

總結

以上是生活随笔為你收集整理的WAI-ARIA对自动完成小部件的支持的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。