無障礙設計 (a11y)

擴充功能可讓使用者根據個人能力和偏好,打造理想的瀏覽體驗。擴充功能應包含無障礙元件,鼓勵視障、聽力受損、精細動作和其他身心障礙者存取擴充功能,藉此鼓勵多元包容的使用者體驗。

如此一來,不只是有特殊需求的使用者,也能享有無障礙功能。無論是視力不佳、低精細動作或進階使用者,都能使用鍵盤快速鍵。字幕和轉錄稿對於失聰使用者來說不可或缺,但也能幫助語言學習者。

使用者可能會透過各種方式與擴充功能互動。部分使用者是使用標準螢幕、鍵盤和滑鼠,也可能使用放大鏡和螢幕閱讀器。雖然無法預測使用者會使用哪些工具存取擴充功能,但開發人員可採取幾個步驟,盡可能讓擴充功能更易於存取。

整合無障礙 UI 控制項

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

標準控制項

盡可能使用標準 HTML UI 控制項。標準 HTML 控制項支援鍵盤存取、縮放操作方便,且螢幕閱讀器通常能理解。

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

自訂控制項中的 WAI-ARIA

網頁無障礙計畫 - 可存取豐富的網際網路應用程式「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 控制項新增至自訂控制項的快速教學課程,請參閱 WWW2010 的 Dave Raggett 呈現方式

將焦點移至自訂控制項

如果使用者沒有滑鼠就能瀏覽網路,鍵盤焦點就十分重要。請確保操作和瀏覽控制項 (例如按鈕、清單方塊和選單列) 可以接收鍵盤焦點。

根據預設,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 內建的縮放快速鍵發生衝突。

如要衡量擴充功能使用者介面的彈性,請套用 200% 測試。如果文字大小或頁面縮放比例增加 200%,是否仍可使用?

避免在圖片中烘焙文字。使用者無法修改大小,螢幕閱讀器無法解讀圖片。請改為選擇樣式的網路字型,例如 Google Font API 中的其中一個字型。網頁字型可調整為不同大小,且可供螢幕閱讀器存取。

顏色

額外資訊中的背景顏色與文字色彩之間應有足夠的對比度。使用對比度檢查工具,測試背景和前景顏色是否提供適當的對比度。

評估對比時,請確認以圖片傳達資訊的擴充功能每個部分都清晰可見。針對特定圖片,您可以使用「Coblis - 色盲模擬工具」等工具,查看圖片以各種形式的色彩障礙呈現的樣貌。

建議您提供不同的顏色主題,或讓使用者自訂色彩配置,藉此打造更好的對比度。

音效

如果擴充功能依賴聲音或影片來傳達資訊,請確保能使用字幕或轉錄稿。如要進一步瞭解字幕,請參閱描述和字幕媒體計劃指南

圖片

為圖片提供資訊充足的替代文字。

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

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

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

瞭解詳情

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