輔助功能測試功能
本文列出測試網頁的一般輔助功能層面,以及 Microsoft DevTools 中的對應功能。
影像的替換文字
要檢查的輔助功能層面 | DevTools 的功能 | 文章 |
---|---|---|
確認影像具有替換文字 | 報表的 [問題工具>輔助功能] 區段 | 確認影像在[自動測試網頁的輔助功能問題] 中有替換文字 |
確認影像具有替換文字 | Lighthouse 工具 > 關於 alt-text 的問題 | 使用 Lighthouse 測試輔助功能 |
鍵盤支援
要檢查的輔助功能層面 | DevTools 的功能 | 文章 |
---|---|---|
確認鍵盤支援 | 檢查 重疊的工具 >輔助功能 區段 | 使用檢查工具來偵測輔助功能問題,方法是將滑鼠停留在網頁上 ,並 使用檢查工具分析 HTML 頁面 |
確認鍵盤支援 | Tab、 Shift+Tab 和 Enter 鍵 | 使用索引標籤和 Enter 鍵檢查鍵盤支援 |
確認鍵盤支援:確認已指出焦點 | 檢查 工具、 樣式索引 標籤和 來源 工具 | 分析鍵盤焦點的不足指示 |
驗證鍵盤支援:確認窗體按鈕可以與鍵盤搭配使用 | 檢查工具、[元素] 工具中的 DOM 樹狀結構,以及 [事件接聽程式] 索引標籤 | 分析表單中缺少鍵盤支援 |
驗證鍵盤支援:確認 Tab 鍵順序 | 元素 工具 >輔助功能索引 標籤 >來源順序查看器 | 使用來源順序查看器測試鍵盤支援 |
確認鍵盤支援 | Lighthouse 工具 > 鍵盤支持的相關問題 | 使用 Lighthouse 測試輔助功能 |
文字對比
要檢查的輔助功能層面 | DevTools 的功能 | 文章 |
---|---|---|
確認文字對於整個頁面的 (自動有足夠的對比) | 報表的 [問題工具>輔助功能] 區段 | 確認文字色彩在自動測試網頁的輔助功能問題中有足夠的對比 |
確認文字有足夠的對比 | 元素 工具 >樣式索引 標籤 >色彩選擇器 | 使用色彩選擇器測試文字色彩對比 |
確認文字有足夠的對比 | 檢查重迭>對比度數據列的工具>輔助功能區段 | 使用檢查工具來偵測輔助功能問題,方法是將滑鼠停留在網頁上 ,並 使用檢查工具分析 HTML 頁面 |
確認文字有足夠的對比:處於暫留狀態 | 專案 工具 樣 >式 索引標籤 >切換項目狀態 (顯示 [強制元素狀態 ] 複選框) | 確認元素所有狀態的存取範圍 |
確認文字有足夠的對比:深色主題 (深色模式) 和淺色主題 | 轉譯 工具 >模擬 CSS 媒體功能偏好色彩配置 | 檢查深色主題和淺色主題的對比問題 |
確認文字對於整個頁面的 (自動有足夠的對比) | Lighthouse 工具 > 文字對比的相關問題 | 使用 Lighthouse 測試輔助功能 |
螢幕助讀程序支援
要檢查的輔助功能層面 | DevTools 的功能 | 文章 |
---|---|---|
驗證螢幕助讀程式支援:確認輸入欄位具有標籤 | 報表的 [問題工具>輔助功能] 區段 | 確認輸入欄位在自動測試網頁是否有輔助功能問題中具有標籤 |
確認螢幕助讀程序支援 | 檢查重疊>名稱和角色的工具>輔助功能區段 | 使用檢查工具來偵測輔助功能問題,方法是將滑鼠停留在網頁上 ,並 使用檢查工具分析 HTML 頁面 |
確認螢幕助讀程序支援 | 元素 工具 >輔助功能索引 標籤 >輔助功能樹狀結構 | 檢查輔助功能樹狀結構以取得鍵盤和螢幕助讀程序支援,並 使用 [輔助功能] 索引卷標測試輔助功能 |
確認螢幕助讀程序支援 | Lighthouse 工具 > 螢幕助讀程式支援的相關問題 | 使用 Lighthouse 測試輔助功能 |
視覺缺陷
要檢查的輔助功能層面 | DevTools 的功能 | 文章 |
---|---|---|
確認網頁可供色盲人士使用 | 轉譯 工具 >模擬視覺缺陷 下拉式清單 | 確認頁面可供色盲人士使用 |
確認網頁可搭配模糊視覺使用 | 轉譯 工具 >模擬視覺缺陷 下拉式清單 | 確認頁面可搭配模糊視覺使用 |
確認網頁可使用,並關閉UI動畫 (減少動作) | 轉譯 工具 >模擬 CSS 媒體功能偏好精簡動作 | 確認頁面可使用且已關閉UI動畫 |
確認具有視覺缺陷的人員可以使用網頁 | Lighthouse 工具 > 關於視覺缺陷的問題 | 使用 Lighthouse 測試輔助功能 |
可在縮小時使用
要檢查的輔助功能層面 | DevTools 的功能 | 文章 |
---|---|---|
確認網頁版面配置可在縮小時使用 | 裝置模擬 工具 | 確認網頁版面設定可在縮小時使用,並 模擬行動裝置 (裝置模擬) |
另請參閱
- 使用輔助技術流覽DevTools
- 輔助功能測試的資源
- MDN 的輔助功能原則和最佳做法
- MDN 的螢幕助讀程式