無障礙性(a11y) · Chrome 擴展開發文檔

# 無障礙性(a11y) 當你設計一款擴展，需要讓擴展對于諸如視覺缺陷，失聰，行動不便的殘疾人沒有使用障礙。所有人 — 不僅僅是有特殊需求的人 — 都應該能從那些無障礙擴展所提供的相應模式中獲益。例如，鍵盤的快捷鍵對于盲人，靈敏度較差的那些人非常重要，然而他們也能提高高級用戶在無鼠標狀態下的工作效率。字幕和手抄本提供了聾人獲取影音內容的通道，然而他們對語言學習者也非常有用。人們可以通過各種方式和擴展交互。他們可能使用標準的顯示器、鍵盤、鼠標，他們也可能使用顯示放大器和鍵盤。另外還有一種情況是_屏幕閱讀機_，一種為盲人和有視覺缺陷的人解釋屏幕內容的輔助工具。屏幕閱讀機可以大聲朗讀或者輸出盲文。雖然你不能預測人們會使用何種工具，但通過一系列的指引，你可以寫出一款對大多數人無障礙的擴展。雖然本篇的指引不能讓你的擴展對每一個人都沒有使用障礙，不過這些指引確實是個好的開始。 ## 使用無障礙的UI控件首先，請使用支持無使用障礙的UI控件。最便捷的獲取無障礙控件的方法是用標準HTML控件。如果你要創建自定義控件，請記住從設計之初就考慮控件的無障礙性，要比完工之后再支持無障礙性容易的多。 ### 標準控件在任何時候都嘗試使用標準的 HTML UI 控件。標準的HTML控件 (如以下圖例所示) 支持鍵盤無障礙性，可伸縮性，而且能被屏幕閱讀機所理解。 ![Screenshots and code for button, checkbox, radio, text, select/option, and link](https://box.kancloud.cn/2015-12-28_5680ab10cd090.png) ### 自定義控件中的ARIA ARIA 是一份通過一系列標準 DOM 屬性使UI控件能被屏幕閱讀器接入的規范。這些屬性為屏幕閱讀器提供了功能和當前頁面控件狀態的線索。 ARIA 是?[W3C進行過程中的項目。](http://www.w3.org/WAI/intro/aria) 為插件中的自定義控件添加ARIA支持包含修改 DOM 屬性，為Google Chrome添加用戶交互時引發事件的屬性。屏幕閱讀器相應這些事件并描述控件的功能。ARIA定義的DOM屬性分為_角色_，_狀態_，和 _屬性。_ ARIA _角色_? 屬標明了控件類型并描述了其行為。它表現為DOM屬性角色，并附帶一組預定義的ARIA 角色值。因為ARIA 角色是靜態的，角色屬性不應該改變它的值。 [ARIA 角色規范](http://www.w3.org/WAI/PF/aria/roles) 包含了如何挑選正確角色的細節信息。例如，如果你的插件包含工具條，工具欄DOM元素的角色屬性應該如下設置： ``` <div role="toolbar"> ``` ARIA 屬性也用于描述一類特殊角色控件的當前狀態和屬性。_狀態_ ?是動態的而且應當在用戶交互時被更新。例如，角色為 "checkbox"的控件可以為 "checked" or "unchecked". _屬性_ 總體上來說不是動態的，不過和描述控件特殊信息的狀態相似。想了解ARIA 狀態和屬性的更多信息，請參見[W3C States and Properties specification](http://www.w3.org/TR/wai-aria/states_and_properties). **注釋:**?你不需要為一種特定角色使用所有的狀態和屬性。如下是一個添加ARIA 屬性 aria-activedescendant 到工具欄控件的例子: ``` <div role="toolbar" tabindex="0" aria-activedescendant="button1"> ``` [aria-activedescendant](http://www.w3.org/WAI/PF/aria/states_and_properties#aria-activedescendant)?屬性定義了當工具欄獲取焦點時，哪一個工具欄的子控件獲取了焦點。在此例中，工具欄的第一個控件（擁有id "button1"）是能獲取焦點的子控件。代碼?tabindex="0"?定義了工具欄中的子控件獲取焦點的DOM文檔順序。如下是樣例工具欄的完整定義: ``` <div role="toolbar" tabindex="0" aria-activedescendant="button1"> <img src="buttoncut.png" role="button" alt="cut" id="button1"> <img src="buttoncopy.png" role="button" alt="copy" id="button2"> <img src="buttonpaste.png" role="button" alt="paste" id="button3"> </div> ``` 一旦 ARIA 角色，狀態，屬性添加到了控件的DOM節點，Google Chrome 觸發了合適的事件到屏幕閱讀器。因為ARIA 支持還是一項正在進行中的工作，Google Chrome 可能不會觸發ARIA屬性的所有事件，而屏幕閱讀器也可能不能識別所有被觸發的事件。你可以在[Chromium Accessibility Design Document](http://www.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support) 獲取Google Chrome在ARIA支持上的信息。如想獲取添加ARIA控件到自定義控件的快速指南，請參見 [Dave Raggett's presentation from WWW2010](http://www.w3.org/2010/Talks/www2010-dsr-diy-aria/) 。 ### 自定義控件的焦點信息請確保你擴展的操作和導航控件可以接受鍵盤焦點。操作控件可能包含按鈕，樹，列表框。導航控件包含標簽和菜單欄。默認來說，能在 HTML DOM 中接受鍵盤焦點的控件是錨，按鈕和表單空間。然而，設置HTML屬性?tabIndex 為?0，把DOM 屬性放置到默認的標簽序列，使他們能接受鍵盤焦點。例如: ``` _element_.tabIndex = 0 ``` 設置?tabIndex = -1?從tab 序列中移出了元素，但是語法上仍然允許元素接受鍵盤焦點。如下是設置鍵盤焦點的實例： ``` _element_.focus(); ``` 請保證你的自定義控件包含鍵盤的支持，不僅對不使用鼠標用戶非常重要，而且屏幕閱讀器通過鍵盤來決定去描述哪個控件。 ## 鍵盤入口的支持用戶在他們不想使用鼠標的時候也應該能使用你的擴展。 ### 導航請確認用戶可以不用鼠標在你擴展的不同部分導航。也請確認任何頁面或者瀏覽器的彈出是可以通過鍵盤導航的。. 在Windows上，可以使用**Shift+Alt+T** 切換鍵盤焦點至工具欄，這樣就可以前往頁面動作和瀏覽器動作的圖標。有關于?[鍵盤和鼠標](http://www.google.com/support/chrome/bin/static.py?hl=en&page=guide.cs&guide=25799&from=25799&rd=1)?的幫助主題羅列出了Google Chrome所有的鍵盤快捷鍵，其中在 ?**Google Chrome 功能快捷鍵** 中也介紹了工具欄導航的諸多細節。 **注釋:**?Google Chrome 6 的 Windows 版本是第一個支持工具欄鍵盤導航的版本。Linux的支持也在計劃中。在 Mac OS X上，Voice Over，Apple 屏幕閱讀器提供了工具欄的接入。請確保有鍵盤焦點的用戶界面是易于辨認的。通常情況下在界面周圍有焦點的外框，但是如果CSS被重度使用，外框線將被抑制，對比度可能被減弱。下面是焦點外框的兩個例子。 ![A focus outline on a Search button](https://box.kancloud.cn/2015-12-28_5680ab10de68d.png)? ![A focus outline on one of a series of links](https://box.kancloud.cn/2015-12-28_5680ab10eeabe.png) ### 快捷鍵盡管最常見的快捷鍵導航提供了用TAB鍵在擴展界面中切換焦點的策略，然而這不是使用用戶界面最簡單高效的做法。如果提供了顯示的鍵盤快捷鍵，鍵盤導航會變得更便捷。如果要實現快捷鍵，控件上需要添加鍵盤響應。DHTML 風格指南工作組的 [鍵盤快捷鍵指南](http://dev.aol.com/dhtml_style_guide) 是一份很好的參考。一個保證鍵盤快捷鍵易察覺性的方法是把他們羅列出來。擴展的?[Options page](options.html)?很適合完成此類事物。. 比如說工具欄，簡單的JS鍵盤處理器可能如下所示。請注意為了反映當前的激活工具欄按鈕，在響應用戶輸入后ARIA aria-activedescendant 屬性是如何更新的。 ``` <head> <script> function optionKeyEvent(event) { var tb = event.target; var buttonid; ENTER_KEYCODE = 13; RIGHT_KEYCODE = 39; LEFT_KEYCODE = 37; // Partial sample code for processing arrow keys. if (event.type == "keydown") { // Implement circular keyboard navigation within the toolbar buttons if (event.keyCode == ENTER_KEYCODE) { ExecuteButtonAction(getCurrentButtonID()); _// getCurrentButtonID defined elsewhere_ } else if (event.keyCode == event.RIGHT_KEYCODE) { // Change the active toolbar button to the one to the right (circular). var buttonid = getNextButtonID(); _// getNextButtonID defined elsewhere_ tb.setAttribute("aria-activedescendant", buttonid); } else if (event.keyCode == event.LEFT_KEYCODE) { // Change the active toolbar button to the one to the left (circular). var buttonid = getPrevButtonID(); _// getPrevButtonID defined elsewhere_ tb.setAttribute("aria-activedescendant", buttonid); } else { return true; } return false; } } </script> <div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1" onkeydown="return optionKeyEvent(event);" onkeypress="return optionKeyEvent(event);"> <img src="buttoncut" role="button" alt="cut" id="button1"> <img src="buttoncopy" role="button" alt="copy" id="button1"> <img src="buttonpaste" role="button" alt="paste" id="button1"> </div> ``` ## 提供無障礙的內容以下的指引可能為大眾所熟知，因為他們反應了所有網頁內容好的經驗，不僅僅是擴展。 ### 文字評估你擴展中的文字。很多人可能發現在擴展中增加字體的大小會非常適用。如果你使用鍵盤快捷鍵，請確保他們不和Google Chrome自帶的縮放快捷鍵沖突。 [200% 測試](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-scale)可以作為你UI 靈活性的指示器。如果你增大字符大小或者放大頁面至200%，你的擴展是否還有用？請盡量避免在圖像中夾雜文字: 用戶不能改變以圖像方式顯示的文字大小，屏幕閱讀器也不能解讀圖像。考慮適用網絡字體，比如[Google Font API](http://code.google.com/apis/webfonts/) 所提供的字體。網絡字體中的文字可供搜索，能縮放自如，并對屏幕閱讀機的用戶也是無障礙的。 ### 顏色請確保背景色和你擴展中的前景色/ 文字顏色有鮮明的對比度。?[對比度測試工具](http://snook.ca/technical/colour_contrast/colour.html) 能檢測到你的背景色和前景色是否提供了合適的對比度。如果你在Windows 環境中開發，你可以使用高對比度模式來檢查你擴展的對比度。當檢測對比度時，請確認你擴展中依靠顏色、圖像來傳輸信息的部分是容易分辨的。對于一些特定的圖像，你可以使用諸如[Vischeck simulation tool](http://www.vischeck.com/vischeck/)?的實用工具來檢查在不同顏色缺陷下，圖像的顯示情況。你可以考慮提供多種顏色主題，或者給用戶自定義顏色主題來改善對比度的權利。 ### 聲音如果擴展依賴影音來傳輸信息，請確保提供相應的字幕和副本。請參見 ?[Described and Captioned Media Program guidelines](http://www.dcmp.org/ciy/) 以獲取有關于字幕的更多信息。 ### 圖像請為你的圖像提供信息化的可替代文本。如下所示: ``` <img src="img.jpg" alt="The logo for the extension"> ``` 盡量用可替代的文字表明圖像的意圖，這比繁復描述圖像內容好的多。間隔圖像或者純裝飾圖像應該用（""）的可替代問題，或者HTML 和 css中移除。如果必須在圖像中使用文字，在可替代文字中添加圖像文字。[WebAIM article on appropriate alt text](http://www.webaim.org/techniques/alttext/) 是個好的參考。 ## 示例想查看實現鍵盤導航和ARIA屬性的例子，請參見[examples/extensions/news_a11y](http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/news_a11y/)?(與?[examples/extensions/news](http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/news/) 比較）是實現鍵盤導航和ARIA屬性的好的例子。想查看源代碼中更多的例子，請參見?[Samples](samples.html)。