擴充功能可讓使用者根據個人的功能和偏好，打造理想的瀏覽體驗。擴充功能應納入無障礙元件，讓視障、聽障、精細動作障礙和其他身心障礙人士存取擴充功能，藉此營造多元包容的使用者族群。
無障礙功能讓所有人受益，不侷限於有特殊需求的使用者。鍵盤快速鍵可協助視力受損、低精確度、進階使用者。字幕和轉錄稿是聽障人士不可或缺的內容，對語言學習者也有助益。
使用者可以透過多種方式與擴充功能互動，有些使用者擁有標準螢幕、鍵盤和滑鼠，也可能需要使用放大鏡，甚至必須使用螢幕閱讀器。雖然無法預測使用者會使用哪些擴充功能存取擴充功能，但任何開發人員都可採取步驟，讓擴充功能盡可能存取。
整合無障礙 UI 控制項
如果使用者無法存取使用者介面控制項，就無法使用擴充功能。如要建立無障礙 UI，最簡單的方法就是使用標準的 HTML 控制項。
標準控制項
請盡可能使用標準 HTML UI 控制項。標準 HTML 控制項可以透過鍵盤存取、可以輕鬆縮放，而且通常可由螢幕閱讀器理解。
自訂控制項中的 WAI-ARIA
Web Accessibility Initiative - 可存取性網際網路應用程式 (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="button1">
<img src="buttonpaste" role="button" alt="paste" id="button1">
</div>
擴充功能可以為重要的擴充功能 UI 元素建立明確的鍵盤快速鍵。如要實作這些快速鍵，請將鍵盤事件監聽器連結至控制項。在選項頁面中提供可用的捷徑，讓使用者知道可用的捷徑。
提供淺顯易懂的內容
提供無障礙內容對所有使用者相當重要。下列許多規範都十分熟悉，因為這些規範反映了所有網路內容的良好做法。
文字
字型選項和文字大小會影響擴充功能內容的可讀性。容易碰到問題的使用者可能需要放大擴充功能的文字大小。如果使用鍵盤快速鍵，請確保這些快速鍵不會幹擾 Chrome 內建的縮放快速鍵。
做為擴充功能使用者介面的彈性指標，您可以套用 200% 測試；如果文字大小或頁面縮放增加 200%，仍然可以使用嗎？
避免將文字嵌入圖片。使用者無法修改大小，螢幕閱讀器也無法解讀圖片。請改為選擇使用樣式化網路字型，例如 Google Font API 中提供的字型。網頁字型可縮放至不同大小，且螢幕閱讀器也能輕鬆存取。
顏色
額外資訊的背景顏色與文字顏色之間應有足夠對比。使用對比度檢查工具，測試背景和前景顏色是否提供適當的對比度。
評估對比度時，請確認擴充功能的每個使用圖像傳達資訊的部分都清晰可見。對於特定圖片，您可以使用 Coblis - Color Blindness Simulator 等工具，瞭解圖片在各種色彩缺乏度上的呈現效果。
建議您提供不同的色彩主題，或讓使用者可以自訂色彩配置，以建立更好的對比。
音效
如果擴充功能需要聲音或影片來傳達資訊，請確認有提供字幕或轉錄稿。如要進一步瞭解字幕，請參閱說明和字幕媒體計畫規範。
圖片
提供有關圖片的替代文字。
<img src="img.jpg" alt="The logo for the extension">
使用替代文字來說明圖片的用途，而非與圖片內容的實際說明。空格字元或純裝飾圖片應有空白的 "" 替代文字，或是從 HTML 中完全移除，然後放置在 CSS 中。
如果擴充功能必須在圖片中使用文字，請在替代文字中加入圖片文字。請參閱適當替代文字的 WebAIM 文章，參考這個實用資源。
瞭解詳情
如要進一步瞭解 Chrome 的無障礙功能，請參閱 A11ycasts 頻道，並參閱 Chromium 無障礙功能技術說明文件。