感謝您提交詢問!我們的一位團隊成員將在短時間內與您聯繫。
感謝您提交預訂!我們的一位團隊成員將在短時間內與您聯繫。
課程簡介
法律背景與無障礙基礎
模塊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:實踐編碼實驗室:構建無障礙組件
- 創建無障礙按鈕、模態框、下拉菜單、標籤頁
- 實現無障礙表單驗證和錯誤處理
- 爲實際UI組件使用ARIA和語義化HTML
測試、合規性與持續無障礙
模塊8:無障礙測試與審計
- 使用屏幕閱讀器和僅鍵盤進行手動測試技術
- 使用axe、Lighthouse、pa11y等工具進行自動化測試
- 爲QA團隊編寫無障礙測試用例
- 在CI/CD管道中集成無障礙測試
- 如何在原生移動應用上進行無障礙審計(手動測試、自動化工具如Accessibility Scanner、Android的Espresso、iOS的XCTest)
模塊9:修復與持續無障礙
- 常見無障礙問題及如何修復
- 管理遺留代碼庫中的無障礙
- 在功能更新和重構期間保持無障礙
- 多平臺應用(移動、桌面、Web)中的無障礙
模塊10:最終實踐練習與總結
- 構建或重構一個小型應用/模塊以符合無障礙標準
- 同行評審和小組討論
- 問答與反饋環節
- 持續學習和合規更新的資源
最低要求
- 具備HTML、CSS、JavaScript的基礎到中級知識
- 具備移動應用技術(Android、IOS)的基礎到中級知識
- 熟悉前端框架(React、Angular、Vue等)者優先
- 熟悉移動應用開發者優先
- 基本瞭解Web/移動開發生命週期
- 配備開發環境設置的筆記本電腦(代碼編輯器、瀏覽器開發工具)
受衆
- 前端/後端/移動開發者
- 具備編碼知識的UI/UX設計師
- 專注於無障礙測試的QA工程師
- 參與無障礙合規的產品負責人和項目經理
21 時間:
客戶評論 (5)
“我非常讚賞培訓師採用的即時方法,向我們展示瞭如何將人本設計(HCD)應用到我們的項目中。培訓師還花時間從高層次瞭解我們的項目,這爲我們提供了清晰且實用的指導,幫助我們更好地處理用戶體驗(UX)和用戶界面(UI)。”
Nichole Bryant Joven - Grundfos
課程 - Human-Centered Design (HCD)
機器翻譯
The fact that there were practical examples with the content
Smita Hanuman - Standard Bank of SA Ltd
課程 - Basel III – Certified Basel Professional
I did like how the instructor seemed very knowledgeable with Figma.
January Oliva - Eko Health
課程 - User Experience Design with Figma
- exercises are practical - trainer is helpful in answering our specific questions
Germaine Choi - The Hong Kong Jockey Club
課程 - User Experience (UX) Design
Atmosphere, approach to the exercises and comments about the tasks. It was so nice and relaxed way of relay the knowledge