無障礙設計 (a11y)

擴充功能可讓使用者根據個人能力和偏好，打造理想的瀏覽體驗。擴充功能應包含無障礙元件，讓視障、聽障、手部靈活度受限和其他障礙人士使用擴充功能，進而吸引更多使用者。

無障礙功能可讓所有使用者 (不限於特殊需求使用者) 受益。無論是視障人士、手指不靈活的使用者，還是進階使用者，都能從鍵盤快速鍵中受益。字幕和逐字稿對失聰使用者來說至關重要，但也能協助語言學習者。

使用者可以透過多種方式與擴充功能互動，有些使用者使用標準螢幕、鍵盤和滑鼠，或是需要使用放大鏡和螢幕閱讀器。雖然我們無法預測使用者會使用哪些工具存取擴充功能，但任何開發人員都可以採取一些步驟，盡可能讓擴充功能更容易存取。

整合無障礙 UI 控制項

如果使用者無法存取使用者介面控制項，就無法使用擴充功能。如要建立無障礙的 UI，最簡單的方法就是使用標準 HTML 控制項。

標準控制項

請盡可能使用 標準 HTML UI 控制項。標準 HTML 控制項可透過鍵盤存取，且可輕鬆縮放，螢幕閱讀器通常也能理解。

按鈕、核取方塊、圓形按鈕、文字、選取/選項和連結的螢幕截圖和程式碼

自訂控制項中的 WAI-ARIA

Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) 是一種規格，可透過一組標準 DOM 屬性，讓螢幕閱讀器存取 UI 控制項。這些屬性會向螢幕閱讀器提供網頁上控制項的功能和目前狀態相關資訊。

如要在自訂控制項中加入 WAI-ARIA 支援功能，您需修改擴充功能的 DOM 元素，納入 Chrome 用來在使用者互動期間引發事件的屬性。螢幕閱讀器會回應這些事件，並說明控制項的功能。WAI-ARIA 指定的 DOM 屬性可分為角色、狀態和屬性。

<div role="toolbar">

aria-activedescendant 屬性可指定在工具列接收焦點時，哪個子項會接收焦點。程式碼 tabindex="0" 會指定工具列會依文件順序接收焦點。

請參考下方範例工具列的完整規格：

<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>

將 WAI-ARIA 角色、狀態和屬性新增至控制項的 DOM 後，Google Chrome 就會向螢幕閱讀器發出適當的事件。由於 WAI-ARIA 支援功能仍在開發中，因此 Google Chrome 可能無法為每個 WAI-ARIA 屬性引發事件，而螢幕閱讀器可能無法識別所有引發的事件。

如需有關將 WAI-ARIA 控制項新增至自訂控制項的快速教學課程，請參閱 Dave Raggett 在 WWW2010 的簡報。

將焦點置於自訂控制項

對於不使用滑鼠瀏覽網頁的使用者而言，鍵盤焦點是必備的功能。請確認操作和導覽控制項 (例如按鈕、清單方塊和選單列) 可接收鍵盤焦點。

根據預設，HTML DOM 中只有錨點、按鈕和表單控制項可接收鍵盤焦點。不過，將 HTML 屬性 tabIndex 設為 0 會將 DOM 元素放入預設分頁序列，讓這些元素接收鍵盤焦點。

element.tabIndex = 0

element.focus();

設定 tabIndex = -1 會將元素從分頁順序中移除，但仍允許元素透過程式輔助方式接收鍵盤焦點。

支援鍵盤存取權

擴充功能應只需使用鍵盤即可操作，讓無法使用滑鼠的使用者，以及不想使用滑鼠的進階使用者都能存取。

檢查使用者是否不必使用滑鼠，就能切換擴充功能的不同部分。請確認任何使用彈出式視窗的情況都能透過鍵盤操作。使用 Chrome 鍵盤快速鍵，判斷擴充功能是否可供瀏覽。

請務必讓使用者輕鬆看出介面哪些部分有鍵盤焦點。通常焦點邊框會在介面中移動，但如果使用過多 CSS，系統可能會抑制邊框或降低對比度。

搜尋按鈕的焦點大綱

一系列連結中某個連結的聚焦輪廓

捷徑

雖然最常見的鍵盤瀏覽策略是使用 Tab 鍵透過擴充功能介面旋轉焦點，但這不一定是最簡單或最有效率的做法。

簡單的 JavaScript 鍵盤處理常式可能如下所示。請注意，WAI-ARIA 屬性 aria-activedescendant 會如何根據使用者輸入內容更新，以反映目前的活動工具列按鈕。

 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;
  }
}

<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="button2">
  <img src="buttonpaste" role="button" alt="paste" id="button3">
</div>

擴充功能可以為重要的擴充功能 UI 元素建立明確的鍵盤快速鍵。如要實作這些快速鍵，請將鍵盤事件監聽器連結至控制項。在選項頁面中提供可用的捷徑，讓使用者瞭解這些捷徑。

提供可存取的內容

提供無障礙內容對所有使用者都很重要。以下許多規範可能聽起來很熟悉，因為這些規範反映了所有網路內容的最佳做法。

文字

字型選擇和文字大小會影響擴充功能內容的可讀性。視力有問題的使用者可能需要調高擴充功能的文字大小。如果使用鍵盤快速鍵，請確認這些鍵盤快速鍵不會干擾 Chrome 內建的縮放快速鍵。

做為擴充功能 UI 彈性的指標，請套用 200% 測試；如果文字大小或頁面縮放比例增加 200%，是否仍可使用？

避免將文字嵌入圖片。使用者無法修改大小，螢幕閱讀器也無法解讀圖片。請改用樣式化的網頁字型，例如 Google Font API 中的其中一個字型。網頁字型可縮放至不同大小，並可供使用螢幕閱讀器的使用者存取。

顏色

擴充功能中的背景顏色與文字色彩之間應具有充分的對比。使用對比度檢查工具測試背景和前景顏色是否提供適當的對比度。

評估對比時，請確認擴充功能中所有依靠圖像傳達資訊的部分都清晰可見。針對特定圖片，您可以使用 Coblis - 色盲模擬器等工具，查看圖片在各種色覺辨認障礙下的樣貌。

建議您提供不同的色彩主題，或允許使用者自訂色彩配置，以產生更佳的對比度。

音效

如果擴充功能是透過聲音或影片傳達資訊，請務必提供字幕或逐字稿。如要進一步瞭解字幕，請參閱有聲描述和字幕媒體計畫規範。

圖片

為圖片提供實用的替代文字。

<img src="img.jpg" alt="The logo for the extension">

使用替代文字指出圖片的用途，而非圖片內容的常值說明。空格字元或純裝飾圖片應使用空白的 "" 替代文字，或是從 HTML 中完全移除並放置在 CSS 中。

如果額外資訊必須在圖片中使用文字，請在替代文字中加入圖片文字。建議您參考適當替代文字的 WebAIM 文章。

瞭解詳情

如要進一步瞭解 Chrome 的無障礙功能，請前往 A11ycasts 頻道並閱讀 Chromium 無障礙功能技術說明文件。