無障礙測試

基本方法和工具

 

 

 

Tommy

先說結論

今天內容有點像是之前大家報告的總複習

大綱

  • 測試責任
  • 檢查清單和設計要求
  • 測試範圍
  • 基本測試程序
  • 錯誤與問題管理
  • 自動化測試

測試責任

測試應該是開發生命週期中不可或缺的一部份

測試責任

  • 規劃與設計階段
  • 建立與開發階段
  • 測試階段

規劃設計階段

  • 設計前須標示無障礙包含哪些範圍(避免無限制追加需求、生命有限需求無限)
  • 考慮這些功能(顏色選擇、圖像的替代文字、標題級別、連結文字、表單標籤和錯誤訊息、視覺焦點顏色、用戶交互和鍵盤功能)
  • 考慮無障礙的測試
    • 定義測試範圍、編寫測試程式
    • 盡早開發測試更容易發現問題的機會

建立與開發階段

  • 使用自動化測試檢查
  • 手動測試涵蓋不適合自動化測試的部分
  • 開發過程中至少手動測試鍵盤操作、螢幕閱讀器、自定義組件
  • 有任何問題可在開發階段快速解決
  • 避免累積太多問題未來難以修正

測試階段

  • 驗證是否符合無障礙需求
  • 自動化測試與手動測試都需產生報告
  • 報告以利解決缺陷並改善問題

檢查清單和設計要求

檢查清單和設計要求

  • 腳色為基礎的檢查清單
    • 設計師
    • 開發人員
  • 內容為基礎的檢查清單
  • 設計注意事項

腳色為基礎的檢查清單

設計師

設計師

  • 頁面標題<title>
    • 描述頁面的主題或目的(非<h1>標籤)
  • 標題
    • 一般文案請不要設計的像標題那樣
    • 結構 > 視覺 (h1, h2, h3)
  • 導航
    • 能跳過重複導航
    • 閱讀順序和焦點順序是否合理直觀
  • 連結
    • 清楚描述連結目的和目的地
  • 顏色和對比度
    • 勿以顏色作為主要分辨方式
    • 對比至少4.5:1(大文字3:1)
    • 超連結不能只用顏色做區分(加底線)
    • 使用鍵盤操作要能清楚可見焦點

設計師

  • 圖片
    • 替代文字與圖片內容相符
    • 圖片連結、按鈕、影像地圖須標示清楚目標或用途
    • 複雜圖像或圖表需有簡短的替代文字說明
    • 裝飾性圖像不需要有替代文字
  • 表格
    • 數據資料標記行跟列
    • 簡化複雜表格內容
    • 避免複合列或行標題
  • 表單
    • 始終可見
    • 描述和指導填寫表單內容和方式的訊息是否足夠
    • 表單和說明緊靠在一起
    • 控制功能與內容應非常接近(舉例：修改內容後旁邊應該有編輯或刪除按鈕)
    • 錯誤訊息糾正其錯誤
  • 動態內容
    • 使用者是否知道動態插入的位置(標籤順序緊接在後)

開發人員

開發人員

  • 語意與結構
    • HTML語意標籤正確使用
    • 閱讀順序和html結構相符
  • 可讀性
    • 閱讀順序 & 邏輯順序
  • 圖片
    • 替代文字(alt屬性)
    • 圖片內容過於複雜時，是否有替代文字敘述說明
  • 鍵盤和觸控
    • 焦點始終可見(邏輯順序)
    • 可僅鍵盤操作所有功能
  • 表格
    • 行列是否有無障礙aria標籤
    • 是否有th和caption標籤
  • 表單標籤<label>
    • 是否為可見標籤
    • 是否和表單產生關聯

開發人員

  • 表單錯誤
    • 錯誤描述和表單關聯
    • 送出才產生錯誤，閱讀器是否能意識到這一點
    • 「輸入表單時」和「移動焦點時發生錯誤」閱讀器是否會顯示該錯誤訊息
  • 自訂組件
    • 是否有類似HTML的name或roles標籤
  • 內文變化
    • 元素獲得焦點時避免上下文有重大更改
    • 更改介面配置時(有事先通知除外)避免上下文有重大更改
  • 定時
    • 滾動、移動、閃爍、動態和自動更新內容，是否能停止、暫停、隱藏、控制機制
    • 是否有關閉、調整或延長完成任務的時間機制

內容為基礎的檢查清單

內容為基礎的檢查清單

  • 語意結構和導航
  • 圖像, 畫布, SVG, 其他非文字內容
  • 視覺設計, CSS, 顏色, 排版, 縮放
  • 聲音, 影片, 動畫, 運動
  • 與設備無關的輸入方法
  • 表格標籤, 說明, 驗證
  • 動態更新, AJAX, 單頁應用程式

語意結構和導航

語意結構和導航

  • 頁面標題<title>
    • 必須要有
    • 包含網頁其中的內容
    • 網址變換也必須更新
    • 必須是準確且內容豐富
    • 如果是操作結果頁，應向用戶描述結果
    • 要少而精
    • 頁面應該是唯一的
    • <title>應該類似於主要內容頂部的標題
  • 語言
    • 必須要在<html>標籤上
    • 要使用有效的語言代碼
    • 部分內容改變語言可在標籤上使用lang屬性標示
  • 標籤
    • 盡量使用HTML5語意標籤
    • 所有文字都應在標籤內
    • 同類型標籤可透過aria-label或aria-labelledby區分

語意結構和導航

  • 標題
    • 非視覺上的標題
    • 標題必須精準且內容豐富
    • 應簡明扼要且簡短
    • 每個網頁中<h1>只能一個
  • 連結
    • 必須正確指定連結，要與按鈕在語意上區分
    • 連結不用重複連結這文字
    • 會另開新頁應表明在連結上會在新視窗打開
    • 和文字視覺區隔(加底線)

         使用鍵盤操作要有焦點樣式

  • 頁面間導航
    • 應使用<nav>或role="navigation"屬性
    • 應區別當前或可見頁面
    • 要讓盲人知道哪一個是當前或可見頁面的方法
    • 保持一致性，應以相同順序顯示，在瀏覽時不得更改順序

語意結構和導航

  • 導航
    • 要能夠用鍵盤跳過，讓用戶直接到主要內容
    • 跳過連結應該是頁面的第一個用鍵盤移到焦點元素
    • 跳過連結必須始終可見或鍵盤可移到的焦點
    • 分頁要讓盲人知道哪個是目前或可見分頁的方法
  • 表格
    • 應用<table>盡量不用<div>
    • 要有表格名稱和標題
    • 表格頭要用<th>
    • 不要嵌套表格
    • 數據表格要提供摘要
    • 表格不應用於視覺表示
  • 清單
    • 使用適當的語意標籤，有序<ul>、無序<ol>、定義<dl>

語意結構和導航

  • iframe
    • 必須包含<title>
    • 標題必須準確描述
    • 框架需具有唯一性標題
    • 隱藏無異議內容的iframe可用aria-hidden="true"
  • 其他語意標籤
    • <strong><em>視覺呈現
    • <blockquote>不應僅用於視覺樣式
    • <code>程式碼
    • <pre>程式碼塊
  • 解析和有效性
    • ID必須唯一
    • 元素名稱name應該是唯一
    • 標籤和屬性應遵守必要的父子關係 Ex: <ul><li>
    • 不使用棄用的標籤

圖像, 畫布, SVG, 其他非文字內容

圖像, 畫布, SVG, 其他非文字內容

  • 圖片替代文字
    • 必須是要有意義的(對於看不見的人準確傳達目的)
    • 不要超過150個字
    • 裝飾性圖像必須使用空直alt=""
    • 可操作的圖像都必須要有替代文字
  • SVG
    • 所有SVG的<img>標籤都應設置role="img"
    • 必須要有替代文字alt, aria-label, aria-labelledby
    • 不使用<object>和<iframe>嵌入SVG
  • 圖形文字
    • 應設置role="img"
    • 要有替代文字
    • 裝飾性圖形文字應設置aria-hidden="true"

圖像, 畫布, SVG, 其他非文字內容

  • canvas
    • 應設置role="img"
    • 所有<canvas>都要有替代文字
    • 圖形中需要文字，請先考慮SVG不是<canvas>
    • <canvas>滑鼠可操作的元素，鍵盤也應該可以操作
  • 多媒體
    • 預錄影片需有同步字幕
    • 預錄聲音需有同步字幕
    • 影片視覺應要有聲音描述
  • 外掛程式
    • 所有<object>都必須要有替代文字
    • 為Silverlight和Flash提供HTML替代方法
  • 文件資料
    • 非HTML文件應遵守無障礙原則
    • PDF文件必須為有標籤的PDF格式(內容不是圖片)

視覺設計, CSS, 顏色, 排版, 縮放

視覺設計, CSS, 顏色, 排版, 縮放

  • 顏色
    • 不依賴使用顏色傳達訊息
    • 用顏色表達的訊息都要有替代文字
    • 非連結對比度至少3:1，有焦點時和外區分(底線或輪廓)
    • 准許使用者自訂顏色和對比
  • 對比
    • 中文字(18pt和14pt粗體)至少4.5:1
    • 小文字(18pt和14pt粗體以下)至少7:1
    • 大文字(18pt和14pt粗體以上)至少3:1
    • 設計不得覆蓋Windows高對比度模式樣式

 

視覺設計, CSS, 顏色, 排版, 縮放

  • 視覺布局
    • 使用margin或padding呈現視覺空白
    • <label>和表單元件應視覺上相鄰
    • 應要有一個主要視覺焦點
    • 設計要能預期視覺焦點位置
  • 閱讀順序、焦點順序
    • 必須是有邏輯和值觀的
    • 可取得焦點順序必須合理
    • tabindex避免使用正值
  • 版式
    • 字體應容易被閱讀
    • 行距至少1.5倍
    • 段落至少比行距大1.5倍
    • 一列文字不要超過80個字(全形字40個字)
  • 縮放和重排
    • 縮放到200%頁面應該起作用並可讀
  • CSS生成內容和隱藏內容
    • 避免使用content
    • 裝飾性內容應設置aria-hidden="true"

聲音, 影片, 動畫, 運動

聲音, 影片, 動畫, 運動

  • 字幕和文字記錄
    • 對話內容或旁白必須要有同步字幕
    • 字幕換行應在語句結束點而不是在中間
    • 字幕一次不得超過三行
    • 字幕對比至少3:1
    • 每個字幕至少停留1秒、單詞0.3秒
  • 音頻說明
    • 預錄音頻須包含說明文字
    • 視情況提供手語解釋
  • 媒體撥放器的無障礙
    • 可透過鍵盤操作
    • 撥放器上所有控件須讓閱讀器知道功能與意義
  • 背景聲音
    • 多媒體上的背景音要比前景音量少20dB
    • 網頁上的背景音頻必須提供可停止、暫停或靜音等功能

聲音, 影片, 動畫, 運動

  • 閃爍內容
    • 不得每秒閃爍3次以上內容，避免誘發癲癇
  • 動畫和動作
    • 自動撥放的背景動畫不得超過5秒
    • 動畫中的移動盡可能減少
    • 動畫不應包含聲音
    • 必須提供暫停、停止或隱藏等功能

與設備無關的輸入方法

與設備無關的輸入法

  • 滑鼠輸入
    • 點擊目標應足夠大
    • 增強視覺懸停(hover)
  • 鍵盤輸入
    • 連結、按鈕須提供焦點
    • 焦點順序須合理且直觀
    • tabindex避免使用正值
    • 焦點不能丟失或重置(載入或重新整理除外)
    • 不得與系統或輔助技術的快速件衝突
  • 觸控輸入
    • 觸摸目標應足夠大
    • 不會誤觸相鄰連結或按鈕
  • 轉場和動畫
    • 轉場不能過度干擾閱讀
    • 避免視差效應、視覺效果應保持最小(避免產生噁心、頭暈、煩惱等)

表格標籤, 說明, 驗證

表格標籤, 說明, 驗證

  • 標籤<label>
    • 標籤應與元素相關
    • 標籤必須有意義
    • 標籤必須可見
  • 說明和其他有用信息
    • 必須與該元素相關聯
    • 元素說明必須有意義
    • 視覺上與元素相鄰
  • 動態表單和自定義組件
    • 專注於元素時不能自動觸發上下文更改

       ■ 盡可能使用HTML表單

       ■ 自定義表單應具有適當名稱

  • 表單驗證 
    • 錯誤反饋應在表單提交後立即提供
    • 若無表單提交，則在等效事件觸發之後
    • 錯誤反饋必須與適當元素相關聯
    • 錯誤反饋必須有意義且可見

動態更新, AJAX, 單頁應用程式

動態更新, AJAX, 單頁應用程式

  • 時間限制
    • 如有時間限制，必須在結束之前警告
    • 必須保留數據或延長任務時間
    • 倒數計時勿頻繁發布aria
    • 頁面不得自動刷新或重新載入
    • 建議刷新前可先通知用戶
  • AJAX
    • 延遲加載應告知閱讀器正在加載內容
    • 無限滾動必須允許用戶使用鍵盤操作所有區域
    • 當網頁載入區塊時有進度顯示，必須讓閱讀器知道
    • 當有AJAX取得結果後，該用戶若希望使用後退按鈕，則必須更新瀏覽器的歷史紀錄

設計注意事項

設計注意事項

  • 失明
  • 低視力
  • 色盲
  • 耳聾和聽力困難
  • 失聰
  • 敏捷/機能障礙
  • 語言障礙
  • 認知障礙
  • 閱讀障礙
  • 癲癇發作

失明

  • 所有內容都必須以文字或等效文字的形式呈現(閱讀器才能讀取)
  • 所有功能都能在僅鍵盤下操作使用(盲人不容易找到游標)
  • 良好的結構和語意
  • 自定義組件必須要有正確的名稱、標籤和腳色
  • 完成所有操作後，用戶必須立即收到反饋
  • 影片需要音頻描述
  • 所有功能都需單擊操作

低視力

  • 雙指縮放功能
  • 文字都必須通過對比度的規範
  • 連結、按鈕都必須有可見的focus狀態和明顯的hover狀態
  • 文字和連結要有明確的視覺區別

色盲

  • 不使用顏色作為傳達訊息的唯一方式

耳聾和聽力困難

  • 影片都必須有字幕
  • 聲音必須有文字紀錄
  • 影片若有手語翻譯會很有幫助

失聰

  • 同盲人和耳聾注意事項
  • 影片和聲音都必須提供文字記錄

敏捷/機能障礙

  • 所有功能必須僅通過鍵盤即可使用
  • 連結按鈕必須要有可見的focus狀態和明顯的hover狀態
  • 可以在時間到期之前警告用戶，並可提供延長的選項
  • 提供較大的點擊目標(連結、按鈕)

語言障礙

  • 不要依賴語音輸入

認知障礙

  • 簡化介面、簡化內容
  • 影片或聲音盡可能簡短
  • 限制選擇數量
  • 提供幫助功能
  • 易用性的設計
  • 與實際用戶一起測試界面的可用性

閱讀障礙

  • 用插圖、影片、聲音等補充文字
  • 避免最高對比度(例如：白底黑字)但又要能保持弱視者需要的對比度範圍內

癲癇發作

  • 避免每秒3次以上的速度閃爍

測試範圍

流程

確定範圍 > 進行測試 > 錯誤報告

確定範圍

確定範圍

  • 選擇整個頁面進行評估
    • 無預算或無時間限制下的狀況
    • 大型網站中可能會超過數十頁甚至數百頁
  • 選擇模板評估
    • 預算或時間有限的狀況
    • 選擇重用性高的模板為優先
    • 使用者會看到的第一頁優先

 

整個頁面進行評估重點

整個頁面進行評估重點

  • 整個網站上發生的任何事情，例如模板。
  • 用於導航的任何內容，例如導航菜單。
  • 用於接受付款或使用戶（或組織）遵守法律合同的任何內容。
  • 與網站進行主要互動時使用的所有內容。
  • 通常會導致無障礙問題的所有內容。
  • 殘疾人通常使用的任何東西，例如站點地圖。
  • 聯繫組織所需的任何內容，例如聯繫表格和員工目錄。
  • 任何獲得大量流量的內容，例如“主頁”或接收到前80％流量的任何頁面。

模板評估重點

模板評估重點

  • 圖片
    • 閱讀器無法閱讀圖片，必須有alt屬性
  • 表格
    • 不要有複雜的表格，降低無障礙的挑戰
  • 表單
    • 與用戶互動的主要功能，清楚且直覺的操作方式
  • 多媒體
    • 存在高影像力和無障礙性的挑戰，多媒體也是測試的重點
  • 定義組件和JavaScript框架評估：
    • 組件盡量選用同個套件，會有相同的基底
    • 前端框架雖然高互動性，但可能也會產生較大的無障礙問題

基本測試程序

流程

確定範圍 > 進行測試 > 錯誤報告

基本測試程序

  • 運行自動檢查
  • 螢幕閱讀器資源
  • 測試鍵盤輔助功能
  • 測試觸摸設備的無障礙
  • 測試色彩傳達的意義
  • 測試替代文字質量
  • 測試影片音頻輔助功能
  • 測試導航
  • 測試標題
  • 測試連結文字質量
  • 測試表單標籤和說明
  • 測試表單驗證
  • 測試自訂義組件

運行自動檢查

運行自動檢查

  • 自動化測試可發現大約1/3的問題
  • 手動測試用來覆蓋哪些不適合自動化測試的項目

螢幕閱讀器資源

螢幕閱讀器資源

測試鍵盤輔助功能

測試鍵盤輔助功能

測試鍵盤輔助功能

測試鍵盤輔助功能

測試觸摸設備的無障礙

測試觸摸設備的無障礙

  • 觸摸目標尺寸
  • 至少44px

44px x 44px

9.6mm

0.38英吋

測試觸摸設備的無障礙

  • 不能僅透過鍵盤操作
  • 鍵盤事件和點擊事件都需要添加
  • 範例網頁

測試觸摸設備的無障礙

  • 移動設備上使用螢幕閱讀器
    • 觸摸功能可用
    • 自定義手勢並不是唯一的操作方法
  • 不良示例：沒有基於觸摸的替代方案的手勢 範例網頁
    • 網頁上的手勢操作被螢幕閱讀器覆蓋了
  • 很好的例子：基於觸摸的手勢手勢 範例網頁
    • 提供左右箭頭避免因螢幕閱讀器覆蓋
    • 非螢幕閱讀器也可以使用這些按鈕

測試色彩傳達的意義

測試色彩傳達的意義

  • 不要僅用色彩傳達意義

測試替代文字質量

測試替代文字質量

  • 圖片的替代文字要有意義(不要用檔案名稱)
  • 描述圖片內容
  • 不要超過150個字
  • MarsCommuter網站

測試影片音頻輔助功能

測試影片音頻輔助功能

字幕 逐字稿 口述影像 手語翻譯
預錄多媒體
預錄純影片
預錄純音訊
直播多媒體
直播純影片
直播純音訊

A, AA, AAA

A, AA, AAA

A, AA, AAA

N/A

N/A

N/A

A, AA, AAA

A, AA, AAA

A, AA, AAA

N/A

N/A

N/A

N/A

N/A

A, AA, AAA

A, AA, AAA

A, AA, AAA

A, AA, AAA

A, AA, AAA

A, AA, AAA

A, AA, AAA

A, AA, AAA

A, AA, AAA

A, AA, AAA

  • 視情況提供字幕、逐字稿、口述影像、手語翻譯

測試導航

測試導航(Landmarks)

  • 確保只有一個<header> / role="banner"、<footer> / role="contentinfo" 和 <main> / role="main"
  • 避免不良結構導致生成列表難以閱讀

測試標題

測試標題

  • 至少應有一個標題
  • 確保使用標題標記<h1>, <h2>, <h3>...  勿使用視覺樣式呈現
  • 一般文本不要使用標題標記
  • 範例網站

測試連結文字質量

測試連結文字質量

  • 獨立連結文字：應描述連結的目的或目標頁面內容
  • 上下文中的連結文字：連結本身文字應說明連結目的
  • 圖片為連結：
    • 須包含替代文字 alt 屬性
    • 並充分描述連結的目的
    • 若圖片與<a>中的文字為一組，且文字已能充分描述連結目的，則alt應該設為空值 ( alt="" ) ，忽略該圖片
  • 圖示為連結：
    • 應使用aria-label、aria-labelledby或aria-describedby

測試表單標籤和說明

測試表單標籤和說明

  • 正確的使用<label>標籤，當焦點放在文字輸入框時，閱讀器將呈現該標籤文字

測試表單標籤和說明

  • 正確的使用分組標籤，當焦點放在文字輸入框時，閱讀器將呈現該完整文字

測試表單標籤和說明

  • 使用aria-describedby確保閱讀器在此欄位知道輸入的說明

測試表單標籤和說明

  • 使用aria-describedby將與相關文案關聯，當焦點放在輸入框時，閱讀器將會一並傳達

測試表單驗證

測試表單驗證

  • 輸入表單時，錯誤訊息是可見的，並且可以給閱讀器呈現

測試自定義組件

測試自定義組件

  • 組件必須具有針對性
  • 操作順序必須有邏輯且直觀
  • 自訂義快速鍵不得和螢幕閱讀器快速鍵衝突
  • 焦點必須始終可見
  • 必須在整個交互過程中管理焦點
  • 內容不得引起鍵盤操作陷阱

錯誤與問題管理

流程

確定範圍 > 進行測試 > 錯誤報告

錯誤與問題管理

  • 編寫有效的無障礙故障單
  • 優先考慮無障礙的錯誤

編寫有效的無障礙故障單

編寫有效的無障礙故障單

  • 問題描述：無障礙問題的標題
  • 問題說明：更詳細的說明無障的的問題
  • 預期結果：描述正常狀況下應該得到的結果
  • 平台和AT：發現問題的平台和任何的輔助技術(例如：閱讀器)
  • 影響/嚴重程度：確定影響的程度(危急、嚴重、中度、次要問題)決定優先級和分類
  • 重現步驟：包括如何重現問題的操作步驟
  • 截圖或影片：發生問題的畫面或操作步驟的影片
  • 建議：解決此問題的建議

優先考慮無障礙的錯誤

優先考慮無障礙的錯誤

  • 用戶影響
    • 危急：導致操作被阻止
    • 嚴重：某些內容無法訪問，用戶會感到沮喪
    • 中度：不會阻止使用，但部分操作感到中度沮喪
    • 次要問題：可能會帶來不便，但不會導致沮喪
  • 80/20法則
    • 20%的網頁上有80%的流量
  • 優先解決流量高的網頁
  • 修復重複性問題優先於單一問題

自動化測試工具

AXE

​問題說明

導致​問題的HTML代碼

建議修復的方法

嚴重性

DEMO

Thank you

Made with Slides.com