|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "e6d0f456dfc22afb41bbdefeb5ec179d",
|
|
|
"translation_date": "2025-10-22T22:39:54+00:00",
|
|
|
"source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
|
|
|
"language_code": "mo"
|
|
|
}
|
|
|
-->
|
|
|
# 全面網站無障礙性審核
|
|
|
|
|
|
## 指導說明
|
|
|
|
|
|
在這項作業中，您將對一個真實網站進行專業級的無障礙性審核，應用您所學到的原則和技術。這種實作經驗將加深您對無障礙性障礙和解決方案的理解。
|
|
|
|
|
|
選擇一個看似存在無障礙性問題的網站——分析一個尚未完美的網站比分析一個已經完美的網站更能提供學習機會。理想的候選網站包括較舊的網站、複雜的網頁應用程式或擁有豐富多媒體內容的網站。
|
|
|
|
|
|
### 第一階段：策略性手動評估
|
|
|
|
|
|
在使用自動化工具之前，請進行全面的手動評估。這種以人為中心的方法通常能揭示工具無法檢測到的問題，並幫助您理解真實的使用者體驗。
|
|
|
|
|
|
**🔍 基本評估標準：**
|
|
|
|
|
|
**導航和結構：**
|
|
|
- 您是否能僅使用鍵盤（Tab、Shift+Tab、Enter、Space、方向鍵）導航整個網站？
|
|
|
- 所有互動元素的焦點指示是否清晰可見？
|
|
|
- 標題結構（H1-H6）是否創建了邏輯的內容大綱？
|
|
|
- 是否有跳過連結以直接跳到主要內容？
|
|
|
|
|
|
**視覺無障礙性：**
|
|
|
- 網站整體是否有足夠的色彩對比（普通文字至少4.5:1）？
|
|
|
- 網站是否僅依賴顏色來傳達重要信息？
|
|
|
- 所有圖片是否有適當的替代文字？
|
|
|
- 當放大到200%時，佈局是否仍然功能正常？
|
|
|
|
|
|
**內容和溝通：**
|
|
|
- 是否有“點擊這裡”或模糊的連結文字？
|
|
|
- 您是否能在沒有視覺提示的情況下理解內容和功能？
|
|
|
- 表單欄位是否正確標籤和分組？
|
|
|
- 錯誤訊息是否清晰且有幫助？
|
|
|
|
|
|
**互動元素：**
|
|
|
- 所有按鈕和表單控制項是否僅使用鍵盤即可操作？
|
|
|
- 動態內容更改是否會向螢幕閱讀器宣布？
|
|
|
- 模態對話框和複雜的元件是否遵循正確的無障礙性模式？
|
|
|
|
|
|
📝 **記錄您的發現**，包括具體示例、截圖和頁面URL。記錄問題和做得好的地方。
|
|
|
|
|
|
### 第二階段：全面自動化測試
|
|
|
|
|
|
現在使用業界標準的無障礙性測試工具驗證並擴展您的手動發現。每個工具都有不同的優勢，因此使用多個工具可以提供全面的覆蓋。
|
|
|
|
|
|
**🛠️ 必需的測試工具：**
|
|
|
|
|
|
1. **Lighthouse無障礙性審核**（內建於Chrome/Edge開發者工具）
|
|
|
- 在多個頁面上運行審核
|
|
|
- 專注於具體指標和建議
|
|
|
- 記錄您的無障礙性得分和具體違規情況
|
|
|
|
|
|
2. **axe DevTools**（瀏覽器擴展 - 業界標準）
|
|
|
- 比Lighthouse檢測更詳細的問題
|
|
|
- 提供具體的代碼修復示例
|
|
|
- 根據WCAG 2.1標準進行測試
|
|
|
|
|
|
3. **WAVE網頁無障礙性評估工具**（瀏覽器擴展）
|
|
|
- 無障礙性功能的視覺化表示
|
|
|
- 突出顯示錯誤和正面特徵
|
|
|
- 非常適合理解頁面結構
|
|
|
|
|
|
4. **色彩對比分析工具**
|
|
|
- 使用WebAIM對比檢查器檢測特定顏色對
|
|
|
- 瀏覽器擴展進行整頁分析
|
|
|
- 根據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
|
|
|
```
|
|
|
|
|
|
**📈 策略性實施階段：**
|
|
|
|
|
|
- **第一階段（0-2週）**：阻礙基本功能的關鍵問題
|
|
|
- **第二階段（1-2個月）**：提高使用者體驗的高優先級改進
|
|
|
- **第三階段（3-6個月）**：中等優先級的增強和流程改進
|
|
|
- **第四階段（持續進行）**：持續監控和改進
|
|
|
|
|
|
## 評估標準
|
|
|
|
|
|
您的無障礙性審核將根據技術準確性和專業呈現進行評估：
|
|
|
|
|
|
| 評估標準 | 優秀 (90-100%) | 良好 (80-89%) | 合格 (70-79%) | 需改進 (<70%) |
|
|
|
|----------|----------------|---------------|---------------|---------------|
|
|
|
| **手動測試深度** | 全面評估涵蓋所有POUR原則，並提供詳細觀察和使用者場景 | 涵蓋大多數無障礙性領域，發現清晰，並有部分使用者影響分析 | 基本評估涵蓋主要領域，觀察適當 | 測試有限，觀察表面化，使用者影響考量不足 |
|
|
|
| **工具使用及分析** | 有效使用所有必需工具，交叉參考發現，包含清晰證據，分析工具限制 | 使用大多數工具，文檔良好，有些交叉參考，證據充分 | 使用必需工具，文檔基本，證據有限 | 工具使用有限，文檔差或缺乏證據 |
|
|
|
| **問題識別及分類** | 識別15+具體問題，涵蓋所有WCAG原則，準確分類，展現深刻理解 | 識別10-14問題，涵蓋大多數WCAG原則，分類良好，理解扎實 | 識別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應用**：在真實場景中應用網頁內容無障礙性指南的實踐經驗
|
|
|
- **輔助技術理解**：使用螢幕閱讀器和鍵盤導航的實作經驗
|
|
|
- **問題-解決映射**：能夠識別無障礙性障礙並制定具體、可行的修復策略
|
|
|
|
|
|
**💼 專業技能：**
|
|
|
- **技術溝通**：撰寫面向多元利益相關者的專業無障礙性報告的經驗
|
|
|
- **策略規劃**：根據使用者影響和實施可行性來優先考量無障礙性改進
|
|
|
- **品質保證**：理解無障礙性測試作為開發生命周期的一部分
|
|
|
- **風險評估**：認識無障礙性合規的法律、商業及道德影響
|
|
|
|
|
|
**🌍 包容性設計思維：**
|
|
|
- **使用者同理心**：深入理解多元使用者需求及輔助技術交互
|
|
|
- **通用設計原則**：認識到無障礙性設計不僅惠及殘障人士，也惠及所有使用者
|
|
|
- **持續改進**：建立持續進行無障礙性評估及增強的框架
|
|
|
- **倡導技能**：有信心在未來的項目和團隊中推廣無障礙性最佳實踐
|
|
|
|
|
|
**🚀 職業準備：**
|
|
|
這項作業模擬了真實世界的無障礙性諮詢項目，為您提供值得納入作品集的經驗，展示：
|
|
|
- 系統化的問題解決方法
|
|
|
- 對技術細節及商業影響的關注
|
|
|
- 清晰地傳達複雜技術概念的能力
|
|
|
- 理解網頁開發中法律及道德責任的能力
|
|
|
|
|
|
完成後，您將準備好在任何網頁開發角色中為無障礙性倡議做出有意義的貢獻，並在未來的項目和團隊中推廣包容性設計實踐。
|
|
|
|
|
|
---
|
|
|
|
|
|
**免責聲明**：
|
|
|
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們努力確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或誤釋不承擔責任。 |
