擴充功能可讓使用者根據個人能力和偏好,打造理想的瀏覽體驗。擴充功能應包含無障礙元件,鼓勵視障、聽力受損、精細動作和其他身心障礙者存取擴充功能,藉此鼓勵多元包容的使用者體驗。
如此一來,不只是有特殊需求的使用者,也能享有無障礙功能。無論是視力不佳、低精細動作或進階使用者,都能使用鍵盤快速鍵。字幕和轉錄稿對於失聰使用者來說不可或缺,但也能幫助語言學習者。
使用者可能會透過各種方式與擴充功能互動。部分使用者是使用標準螢幕、鍵盤和滑鼠,也可能使用放大鏡和螢幕閱讀器。雖然無法預測使用者會使用哪些工具存取擴充功能,但開發人員可採取幾個步驟,盡可能讓擴充功能更易於存取。
整合無障礙 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 無障礙功能技術說明文件。