去年我對 200 個資料儀表板做了無障礙審計，結果令人警醒：94% 至少存在一項嚴重無障礙問題。
最常見的問題？僅用顏色編碼。全球約 3 億有色覺缺陷的人完全無法讀懂這類圖表。
我們來解決這個問題。
為什麼圖表無障礙很重要
除了倫理責任，還有商業考量：
- 全球約 15% 人口存在某種形式的障礙
- 色盲影響約 8% 男性和 0.5% 女性
- 無障礙設計往往能提升所有人的可用性
而且越來越多地成為法律要求。政府網站和許多企業必須符合 WCAG。
圖表無障礙的四大支柱
1. 不依賴顏色
原則：絕不要只用顏色傳達資訊。
反面：折線圖裡「銷售」用紅、「利潤」用綠，沒有其他區分。
正面：同一張圖，銷售用實線、利潤用虛線；或不同標記形狀、或直接標文字。
可行做法：
- 為填充區域增加圖案或紋理
- 使用不同線型（實線、虛線、點線）
- 在資料點上直接加標籤
- 散點圖用不同形狀
- 圖例清晰且不依賴顏色辨認
配色建議：
- 使用色盲安全調色板（如 ColorBrewer）
- 相鄰顏色對比度足夠
- 用色盲模擬工具測試（Chrome DevTools 內建）
2. 讀屏器支援
圖表本質是視覺的，要讓讀屏器用好需要刻意設計。
必備要素：
- 描述圖表核心資訊的替代文字，而不只是結構
- 以資料表作為替代呈現
- 圖表周圍正確的標題層級
- 互動元素有 ARIA 標籤
寫好替代文字：
反面：「一張顯示銷售資料的柱狀圖」
正面：「2025 年第三季度各區域銷售柱狀圖。西部領先為 230 萬美元，東部 180 萬，中部 140 萬，南部 90 萬。」
替代文字要回答：看不見這張圖的人最需要知道什麼？
複雜圖表應提供資料表替代。用 figure 包住圖表並寫清替代文字，並可用可摺疊的 details 提供底層資料表。
3. 鍵盤導航
互動圖表必須支援鍵盤訪問。
要求：
- 所有互動元素可透過 Tab 到達
- 焦點指示清晰
- Tab 順序合理
- 常用操作有鍵盤快捷鍵（並文件化）
複雜互動儀表板：
- 提供跳過圖表的方式
- 鍵盤用戶能獲得與滑鼠用戶相同的資訊
- 提供暫停自動更新資料的方式
測試：拔掉滑鼠，只用鍵盤操作你的圖表，能否取得全部資訊？
4. 認知無障礙
無障礙不只有感官障礙，認知負荷也很重要。
建議：
- 圖表簡單，一圖一主旨
- 標籤與註解避免行話
- 儀表板內格式統一
- 提供背景與解釋
- 避免自動播放動畫
五秒測試：別人能在 5 秒內理解圖表主旨嗎？若不能，就簡化。
常見圖表類型及注意點
餅圖
- 問題：僅靠顏色區分扇區
- 改進：加圖案、在扇區上直接標標籤或帶數值的清晰圖例
折線圖
- 問題：多條線只靠顏色區分
- 改進：不同線型、直接標籤或互動懸停狀態
柱狀圖
- 問題：柱與背景對比不足
- 改進：至少 3:1 對比度，必要時給柱加邊框
熱力圖
- 問題：僅靠顏色漸層對無視力者無意義
- 改進：格內標數值，並提供資料表替代
散點圖
- 問題：點重疊、僅靠顏色區分類別
- 改進：不同標記形狀、可調透明度、資料表
測試你的圖表
自動化
- axe DevTools 做通用無障礙檢測
- WAVE 做快速視覺檢查
- Lighthouse 無障礙審計
手動
- 色盲模擬（Sim Daltonism、Chrome DevTools）
- 讀屏器測試（NVDA、VoiceOver、JAWS）
- 僅用鍵盤操作
- 縮放到 200%（圖表是否仍可用？）
使用者測試
- 把障礙使用者納入用研
- 不要假設，詢問真實痛點
立即可做的小改進
- 為每張圖加替代文字（描述洞察，而不只是類型）
- 提供資料表替代
- 檢查顏色對比（圖形至少 3:1）
- 用色盲模擬器測試
- 確認鍵盤導航可用
- 加入可見的焦點指示
有用工具
ChartGen 等現代工具開始預設提供無障礙能力，可關注：
- 內建替代文字建議
- 色盲安全配色
- 自動圖案疊加
- 資料表生成
但工具不能替代人工，仍需根據情境審查與自訂。
業務影響
一位無障礙顧問講過：某金融服務公司修好了投資者儀表板的無障礙問題後，所有使用者的參與度提升了 23%，不限於障礙使用者。
無障礙設計往往就是更好的設計。
資源
- WCAG 2.1（尤其 1.4.1 顏色使用、1.1.1 非文字內容）
- Chartability 專案（圖表專項指南）
- A11y Style Guide（元件模式）
- 色盲模擬工具
最後
你不會造一棟沒有坡道的樓，為什麼要做一個沒有無障礙的儀表板？
讓圖表可訪問的成本不高，影響卻很大。從一張圖開始，應用這些原則，再逐步推廣。
無障礙包容設計資料視覺化WCAG色盲友善