感谢您发送咨询!我们的团队成员将很快与您联系。
感谢您发送预订!我们的团队成员将很快与您联系。
课程大纲
法律背景与无障碍基础
模块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
最喜欢色彩原理的部分,对冷暖色, 色彩冲突等有新的认知