設計无障碍 (符合欧盟无障碍法案)培訓

法律背景與無障礙基礎

模塊 1：無障礙法及其重要性的介紹

• 新無障礙法概述（6月28日生效）
• 法律要求和截止期限
• 對公共部門、私營公司和開發人員的影響
• 為什麼無障礙很重要：社會、道德和商業角度
• 不合规的處罰
• 無障礙標準概述（WCAG 2.1/2.2、ARIA）
• 殘疾類別

模塊 2：無障礙原則與指南

• POUR 原則（可感知、可操作、可理解、穩健）
• WCAG 指南介紹
• ARIA 角色、狀態和屬性
• 語義 HTML 及其在無障礙中的作用

模塊 3：設置無障礙開發環境

• 工具：瀏覽器開發工具、屏幕閱讀器（NVDA、VoiceOver）、無障礙擴展程序
• 設置代碼檢查器和自動化無障礙測試工具
• 常見無障礙測試工具概述
• 在移動模擬器和真實設備上設置無障礙測試（使用 VoiceOver/TalkBack、Android Accessibility Scanner、Xcode Accessibility Inspector）。

模塊 4：實用編碼 – 語義 HTML 和鍵盤導航

• 為無障礙編寫語義標記
• 確保完全的鍵盤可导航性
• 焦點管理技術
• 以無障礙方式處理表和交互元素

原生移動應用中的無障礙功能（可選額外模塊，時長1.5小時）

• 主要平台指南（Google Material、Apple Human Interface）
• 使移動上的導航、按钮、表單無障礙
• 常見的移動無障礙問題和解決方案
• 使用 VoiceOver 和 TalkBack 進行實戰測試

高級編碼與輔助技術

模塊 5：無障礙 CSS 和視覺設計

• 顏色對比度和文本大小的最佳實踐
• 焦點樣式和可見焦點指示器
• 無障礙響應式設計考慮因素
• 避免動畫和過渡中的無障礙陷阱
• 移動屏幕的顏色對比度和尺寸指南。

模塊 6：用於動態內容和豐富互聯網應用程序的 ARIA

• 何時以及如何使用 ARIA 屬性
• 管理屏幕閱讀器的實時區域
• 創建無障礙小部件和自定義組件
• ARIA 在 SPA（單頁應用程序）中的作用
• 對於移動端，討論原生平台中的無障礙角色和標籤（例如 Android 中的 contentDescription、iOS 中的 accessibilityLabel）。

模塊 7：實戰編碼實驗室：構建無障礙組件

• 創建無障礙按鈕、模態框、下拉菜單、標籤頁
• 實現無障礙表單驗證和錯誤處理
• 使用 ARIA 和語義 HTML 用於現實世界的 UI 組件

測試、合規與持續無障礙

模塊 8：無障礙測試與審計

• 使用屏幕閱讀器和僅鍵盤的手動測試技術
• 使用 axe、Lighthouse、pa11y 等工具的自動化測試
• 為 QA 團隊編寫無障礙測試用例
• 在 CI/CD 管道中集成無障礙測試
• 如何在原生移動應用上運行無障礙審計（手動測試、自動化工具如 Accessibility Scanner、Espresso for Android、XCTest for iOS）

模塊 9：修復與持續無障礙

• 常見的無障礙問題及其修復方法
• 在舊代碼庫中管理無障礙
• 在功能更新和重構期間維持無障礙
• 多平台應用（移動、桌面、Web）中的無障礙

模塊 10：最終實踐練習與總結

• 構建或重構小型應用/模塊以符合無障礙標準
• 同行評審和小組討論
• Q&A 和反饋環節
• 持續學習和合規更新的資源