|
|
# 全面網站無障礙測試報告
|
|
|
|
|
|
## 指引
|
|
|
|
|
|
在此作業中，你將運用所學原則與技術，對一個真實網站進行專業級的無障礙測試。這個實作經驗將加深你對無障礙障礙及解決方案的理解。
|
|
|
|
|
|
選擇一個看似存在無障礙問題的網站──這比分析已完美無瑕的網站更有學習價值。合適的對象包括較舊的網站、複雜的網頁應用程式或包含豐富多媒體內容的網站。
|
|
|
|
|
|
### 階段一：策略性人工評估
|
|
|
|
|
|
在使用自動化工具之前，先進行全面的人工評估。此以使用者為中心的方法常能揭露工具遺漏的問題，並幫助你理解真實使用者體驗。
|
|
|
|
|
|
**🔍 重要評估標準：**
|
|
|
|
|
|
**導覽與結構：**
|
|
|
- 能否僅使用鍵盤（Tab、Shift+Tab、Enter、空格、方向鍵）瀏覽整個網站？
|
|
|
- 所有互動元素是否有清晰焦點指示？
|
|
|
- 標題結構（H1-H6）是否形成邏輯的內容大綱？
|
|
|
- 是否有跳過連結可迅速跳轉至主要內容？
|
|
|
|
|
|
**視覺無障礙：**
|
|
|
- 全站色彩對比是否足夠（普通文字最低 4.5:1）？
|
|
|
- 網站是否僅用顏色傳達重要資訊？
|
|
|
- 所有圖片是否有適當替代文字？
|
|
|
- 放大至 200% 時版面是否仍維持功能性？
|
|
|
|
|
|
**內容與溝通：**
|
|
|
- 是否有「點此」或含糊的連結文字？
|
|
|
- 不依賴視覺提示是否能理解內容與功能？
|
|
|
- 表格欄位是否有適當標籤和分組？
|
|
|
- 錯誤訊息是否清楚且有幫助？
|
|
|
|
|
|
**互動元素：**
|
|
|
- 所有按鈕和表格控制項是否能只用鍵盤操作？
|
|
|
- 動態內容變化是否有向螢幕閱讀器宣告？
|
|
|
- 模態對話框和複雜元件是否遵循正確無障礙模式？
|
|
|
|
|
|
📝 **紀錄你的發現**，並附具體範例、截圖與頁面 URL。記下問題與做得好的地方。
|
|
|
|
|
|
### 階段二：全面自動化測試
|
|
|
|
|
|
接著使用業界標準的無障礙測試工具，驗證並擴充你的人工評估結果。不同工具有不同強項，結合多種工具可以覆蓋更全面。
|
|
|
|
|
|
**🛠️ 必要測試工具：**
|
|
|
|
|
|
1. **Lighthouse 無障礙審查**（Chrome/Edge 開發者工具內建）
|
|
|
- 多頁面測試
|
|
|
- 聚焦特定指標和改進建議
|
|
|
- 紀錄無障礙分數及違規項目
|
|
|
|
|
|
2. **axe DevTools**（瀏覽器擴充套件，業界標準）
|
|
|
- 比 Lighthouse 更細緻的問題偵測
|
|
|
- 提供具體修正程式碼示例
|
|
|
- 依 WCAG 2.1 標準測試
|
|
|
|
|
|
3. **WAVE 無障礙評估工具**（瀏覽器擴充）
|
|
|
- 以視覺方式展示無障礙特性
|
|
|
- 標示錯誤與正面特點
|
|
|
- 有助於了解頁面結構
|
|
|
|
|
|
4. **色彩對比分析工具**
|
|
|
- WebAIM Contrast Checker 用於特定色彩組合
|
|
|
- 瀏覽器擴充可做全頁分析
|
|
|
- 依 WCAG AA 與 AAA 標準測試
|
|
|
|
|
|
**🎧 實際輔助技術測試：**
|
|
|
- **螢幕閱讀器測試**：使用 NVDA（Windows）、VoiceOver（Mac）、TalkBack（Android）
|
|
|
- **僅鍵盤導覽**：拔掉滑鼠，完全鍵盤操作
|
|
|
- **縮放測試**：200% 及 400% 縮放層級下測試功能
|
|
|
- **語音控制測試**：若有，嘗試語音導覽工具
|
|
|
|
|
|
**📊 系統化結果紀錄**，建立主控試算表包含：
|
|
|
- 問題描述與位置
|
|
|
- 嚴重程度（關鍵/高/中/低）
|
|
|
- 違反的 WCAG 成功準則
|
|
|
- 偵測工具
|
|
|
- 截圖與證據
|
|
|
|
|
|
### 階段三：詳細發現文件
|
|
|
|
|
|
撰寫專業無障礙測試報告，展現你對技術問題及其對人的影響的理解。
|
|
|
|
|
|
**📋 必需報告章節：**
|
|
|
|
|
|
1. **執行摘要**（1 頁）
|
|
|
- 網站 URL 及簡介
|
|
|
- 整體無障礙成熟度
|
|
|
- 三大關鍵問題
|
|
|
- 對障礙者影響預估
|
|
|
|
|
|
2. **方法論**（½ 頁）
|
|
|
- 測試方法與工具
|
|
|
- 評估頁面與裝置/瀏覽器組合
|
|
|
- 依據標準（WCAG 2.1 AA）
|
|
|
|
|
|
3. **詳細發現**（2-3 頁）
|
|
|
- 依 WCAG 原則分類問題（可感知、可操作、可理解、穩健）
|
|
|
- 附截圖及具體範例
|
|
|
- 記錄正向無障礙特性
|
|
|
- 與自動化工具結果交叉參照
|
|
|
|
|
|
4. **用戶影響評估**（1 頁）
|
|
|
- 發現問題對不同障礙者影響
|
|
|
- 描述實際使用場景
|
|
|
- 商業影響（法律風險、SEO、用戶擴展）
|
|
|
|
|
|
**📸 證據蒐集：**
|
|
|
- 無障礙違規截圖
|
|
|
- 問題操作流程螢幕錄影
|
|
|
- 工具報告（PDF 存檔）
|
|
|
- 展示問題的程式碼示例
|
|
|
|
|
|
### 階段四：專業修正方案
|
|
|
|
|
|
擬訂策略性且有優先順序的無障礙修正計畫，展示你具備作為專業網頁開發者處理真實商務限制的能力。
|
|
|
|
|
|
**🎯 提出具體改善建議（至少 10 項問題）：**
|
|
|
|
|
|
**針對每項問題提供：**
|
|
|
|
|
|
- **問題描述**：清楚說明問題及影響
|
|
|
- **WCAG 參考**：違反的具體成功準則（例如「2.4.4 連結目的（上下文）- A 級」）
|
|
|
- **用戶影響**：對不同障礙者的影響
|
|
|
- **解決方案**：具體程式碼修改、設計調整或流程改善
|
|
|
- **優先級**：關鍵（阻礙基本使用）／高（重大障礙）／中（使用度問題）／低（優化）
|
|
|
- **實施難度**：時間/複雜度評估（快速完成／中等努力／重大重構）
|
|
|
- **測試驗證**：如何驗證修復有效
|
|
|
|
|
|
**改善範例條目：**
|
|
|
|
|
|
```
|
|
|
Issue: Generic "Read more" link text appears 8 times on homepage
|
|
|
WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A
|
|
|
User Impact: Screen reader users cannot distinguish between links when viewed in link list
|
|
|
Solution: Replace with descriptive text like "Read more about sustainability initiatives"
|
|
|
Priority: High (major navigation barrier)
|
|
|
Effort: Low (30 minutes to update content)
|
|
|
Testing: Generate link list with screen reader - each link should be meaningful standalone
|
|
|
```
|
|
|
|
|
|
**📈 策略實施階段：**
|
|
|
|
|
|
- **階段 1（0-2 週）**：修復阻礙基本功能的關鍵問題
|
|
|
- **階段 2（1-2 個月）**：高優先改善，提升使用體驗
|
|
|
- **階段 3（3-6 個月）**：中優先優化與流程改進
|
|
|
- **階段 4（持續進行）**：持續監控與改進
|
|
|
|
|
|
## 評分標準
|
|
|
|
|
|
你的無障礙測試將以技術準確度與專業呈現度評分：
|
|
|
|
|
|
| 項目 | 優秀 (90-100%) | 良好 (80-89%) | 滿意 (70-79%) | 需要改進 (<70%) |
|
|
|
|----------|-------------------|---------------|---------------------|------------------------|
|
|
|
| **人工測試深度** | 全面涵蓋所有 POUR 原則，細節觀察與真實使用者場景完整 | 大部分無障礙區域覆蓋，明確發現並含部分用戶影響分析 | 基本關鍵區域評估，觀察適中 | 測試有限，觀察膚淺且用戶影響不足 |
|
|
|
| **工具使用與分析** | 有效運用全部必需工具，交叉參照、清晰證據、並分析限制 | 多數工具使用良好，含文檔與交叉參考，證據適當 | 必需工具使用，基本文檔與證據 | 工具運用不足、文檔不佳或無證據 |
|
|
|
| **問題識別與分類** | 識別超過 15 個問題，依嚴重度正確分類，展現深厚理解 | 識別 10-14 問題，多數準則涵蓋且分類良好 | 識別 7-9 問題，基本 WCAG 涵蓋與分類 | 識別少於 7 問題，範圍有限或分類不良 |
|
|
|
| **解決方案品質與可行性** | 超過 10 項具體可行方案，準確 WCAG 引用，實施評估與驗證方法完善 | 8-9 項較完善方案，引用大致準確，實施詳情良好 | 6-7 項基本方案，細節一般，實施方法合理 | 少於 6 項方案或細節不足，實施不切實際 |
|
|
|
| **專業溝通** | 報告組織優良、文字清楚、含摘要，專業用語適當，符合作業標準 | 組織良好、文筆尚佳，含大部分必要章節、更適用口吻 | 組織可接受、文筆合格，含基本必需章節 | 組織不佳、文字不清或缺少關鍵章節 |
|
|
|
| **實務應用** | 展現商業影響、法律考量、用戶多元及實際挑戰理解 | 具有實務應用良好理解及商業脈絡 | 基本實務應用認識 | 實務應用連結有限 |
|
|
|
|
|
|
## 進階挑戰選項
|
|
|
|
|
|
**🚀 針對想挑戰更多的學生：**
|
|
|
|
|
|
- **比較分析**：針對 2-3 個競爭網站做無障礙成熟度比較
|
|
|
- **行動無障礙聚焦**：使用 Android TalkBack 或 iOS VoiceOver 深入探討行動特定無障礙問題
|
|
|
- **國際視角**：研究並運用不同國家之無障礙標準（EN 301 549、Section 508、ADA）
|
|
|
- **無障礙聲明審核**：評估網站現有無障礙聲明（若有）與你的檢測結果相符度
|
|
|
|
|
|
## 提交項目
|
|
|
|
|
|
提交一份專業全面的無障礙測試報告，展現完整分析及實務實施規劃：
|
|
|
|
|
|
**📄 最終報告需求：**
|
|
|
|
|
|
1. **執行摘要**（1 頁）
|
|
|
- 網站概覽與無障礙成熟度評估
|
|
|
- 主要發現摘要及商業影響
|
|
|
- 推薦優先行動
|
|
|
|
|
|
2. **方法論與範圍**（1 頁）
|
|
|
- 測試方法、使用工具與評估標準
|
|
|
- 評測頁面／區段與限制說明
|
|
|
- 遵循標準框架（WCAG 2.1 AA）
|
|
|
|
|
|
3. **詳細發現報告**（3-4 頁）
|
|
|
- 人工測試觀察與用戶場景
|
|
|
- 自動工具結果與交叉參考
|
|
|
- 按 WCAG 原則分組問題及證據
|
|
|
- 發現的正面無障礙特質
|
|
|
|
|
|
4. **策略修正計畫**（3-4 頁）
|
|
|
- 優先改善建議（至少 10 項）
|
|
|
- 實施時間表與努力評估
|
|
|
- 成功度量與驗證方法
|
|
|
- 長期無障礙維護策略
|
|
|
|
|
|
5. **輔助證據**（附錄）
|
|
|
- 無障礙違規與測試工具截圖
|
|
|
- 展示問題與解決方案的程式碼範例
|
|
|
- 工具報告與審查摘要
|
|
|
- 螢幕閱讀器測試筆記或錄音
|
|
|
|
|
|
**📊 格式需求：**
|
|
|
- **文件格式**：PDF（專業呈現）
|
|
|
- **字數**：2,500-3,500 字（不含附錄與截圖）
|
|
|
- **視覺元素**：全篇包含截圖、圖表與範例
|
|
|
- **引用**：適當引述 WCAG 指南與無障礙資源
|
|
|
|
|
|
**💡 卓越提點：**
|
|
|
- 使用專業報告格式，標題與樣式一致
|
|
|
- 含目錄方便導覽
|
|
|
- 技術準確與商業語言平衡
|
|
|
- 展現技術實施與用戶影響雙重理解
|
|
|
|
|
|
## 學習成果
|
|
|
|
|
|
完成本全面無障礙測試後，你將具備重要專業技能：
|
|
|
|
|
|
**🎯 技術能力：**
|
|
|
- **無障礙測試精通**：熟練業界標準人工與自動測試方法
|
|
|
- **WCAG 應用**：實務應用網頁內容無障礙指引於真實案例
|
|
|
- **輔助技術理解**：實戰螢幕閱讀器與鍵盤導航體驗
|
|
|
- **問題-解決映射**：識別障礙並制定具體可行的改善策略
|
|
|
|
|
|
**💼 專業技能：**
|
|
|
- **技術溝通**：撰寫專業無障礙報告，面向多元利害關係人
|
|
|
- **策略規劃**：基於用戶影響和實施可行性，優先排序無障礙改善
|
|
|
- **品質保證**：理解作為開發流程一環的無障礙測試
|
|
|
- **風險評估**：認識法律、商業與倫理面向的無障礙合規
|
|
|
|
|
|
**🌍 包容性設計心態：**
|
|
|
- **用戶同理心**：深入理解多元用戶需求與輔助技術互動
|
|
|
- **普及設計原則**：明白無障礙設計惠及所有用戶，不僅限於殘障者
|
|
|
- **持續改進**：建立無障礙持續評估與優化架構
|
|
|
- **倡導能力**：未來專案與團隊推廣無障礙最佳實踐的自信
|
|
|
|
|
|
**🚀 職涯準備：**
|
|
|
本作業模擬真實無障礙顧問案，提供呈現作品集的經驗，彰顯：
|
|
|
- 系統性問題解決流程
|
|
|
- 注重技術細節與商業影響
|
|
|
- 清晰傳達複雜技術概念
|
|
|
- 理解網頁開發法律與倫理責任
|
|
|
|
|
|
完成後，你將能在任何網頁開發職務中，有意義地參與無障礙推動，成為包容設計實踐的積極倡議者。
|
|
|
|
|
|
---
|
|
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
|
**免責聲明**：
|
|
|
本文件是使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們力求準確，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議尋求專業人工翻譯。本公司不對因使用本翻譯而產生的任何誤解或錯誤詮釋承擔責任。
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |
