網頁無障礙設計指南

顧老師數位學習平台

概覽 標準 技術 實作 測試

Accessibility

/əkˌsesəˈbɪləti/
名詞 網頁開發

基本釋義：確保網站能被所有人平等使用的設計實踐

核心原則：可感知、可操作、可理解、穩健性

📚 WCAG標準

可感知性

提供文字替代方案和適應性內容

替代文字讓屏幕閱讀器能描述圖片內容
Alt text enables screen readers to describe images
1.1.1

可操作性

確保所有功能都能通過鍵盤操作

鍵盤導航讓行動不便用戶能使用網站
Keyboard navigation allows motor-impaired users to access content
2.1.1

可理解性

讓界面和操作流程清晰易懂

表單標籤幫助認知障礙用戶理解輸入要求
Form labels assist users with cognitive disabilities
3.1.1

WCAG 2.1分為A、AA、AAA三個等級，政府網站通常要求至少達到AA級標準，包含對比度、導航邏輯等關鍵要求。

🔄 標準對照

技術要求

Text alternatives for non-text content

Keyboard accessible functionality

Content is adaptable without losing information

中文解釋

為非文字內容提供文字替代方案

所有功能都能通過鍵盤操作

內容可適應不同設備而不損失信息

🔊 關鍵技術

ARIA標籤

WAI-ARIA

增強屏幕閱讀器對動態內容的理解

語義HTML

Semantic HTML

使用正確的HTML5結構化標籤

技術要點：

常見錯誤

  • 濫用ARIA導致信息重複
  • 忽略焦點管理
  • 未測試屏幕閱讀器兼容性

🎯 實作指南

圖片無障礙

提供有意義的替代文字

<img src="chart.jpg" alt="2023年銷售增長曲線圖">
避免僅使用"圖表"等泛泛描述
1.1.1

鍵盤導航

確保完整鍵盤操作路徑

tabindex="0"使自定義組件可聚焦
禁用tabindex="-1"用於暫時不可用元素
2.1.1

色彩對比

滿足最低對比度要求

4.5:1普通文本對比度
3:1大號文本對比度
1.4.3

開發工具

檢測工具： axe DevTools, WAVE
模擬器： Color Contrast Checker

⚠️ 重要提醒

避免錯誤：

僅依靠顏色傳達信息 (錯誤)

正確：同時使用顏色和文字標識狀態

忽略表單錯誤提示 (錯誤)

正確：使用aria-live區域動態提示錯誤

✍️ 實務測試

代碼審查

找出無障礙問題：

1. <button>Submit</button>
2. <div onclick="submitForm()">提交</div>
3. <img src="icon.png" alt="icon">

1. 缺少aria-label說明具體操作

2. 應使用<button>元素而非div

3. 替代文字應描述圖標功能而非類型

情境測試

模擬以下用戶場景：

• 僅使用鍵盤操作網站導航
• 使用屏幕閱讀器閱讀內容
• 在高對比模式下檢視頁面

改進建議

為以下組件添加無障礙支持：

1. 圖片輪播
2. 動態載入的內容區域
3. 複雜數據表格

1. 添加aria-live和控制按鈕

2. 使用aria-busy和aria-live

3. 添加scope和headers屬性