用途:该技能围绕网页与应用无障碍,提供 WCAG 2.1 指南、屏幕阅读器兼容、键盘导航、颜色对比度、语义化 HTML 和 ARIA 属性的实践参考,帮助开发者按标准构建和检查界面。
主要能力:
- WCAG 2.1 原则(POUR:可感知、可操作、可理解、健壮)与 A/AA/AAA 合规等级,以及 1.1 至 4.1 各项成功标准。
- 屏幕阅读器兼容:NVDA、JAWS、VoiceOver、TalkBack;跳转链接、地标、标题层级、列表、表单标签、图片替代文本、描述性链接文本等最佳实践。
- 键盘导航:Tab 顺序、可见焦点指示、跳过导航、快捷键、焦点管理(初始焦点、焦点恢复、模态内焦点陷阱、Esc 关闭、Enter/Space 激活、方向键导航)。
- 颜色对比度:普通文本 4.5:1、大文本 3:1、图形对象 3:1(AA);AAA 为 7:1 与 4.5:1;不单靠颜色传达信息,兼顾色盲与深色模式。
- 语义化 HTML:h1-h6、nav、main、article、section、aside、header、footer、figure/figcaption;链接用于导航、按钮用于操作。
- 表单无障碍:for/id 或 aria-label 关联标签、aria-required、aria-describedby 关联错误信息、实时校验与成功提示。
- ARIA:role(button、link、dialog、alert、status、progressbar、tablist、tab、tabpanel 等)与状态属性(aria-label、aria-labelledby、aria-describedby、aria-expanded、aria-selected、aria-checked、aria-disabled、aria-hidden、aria-live、aria-atomic);优先使用语义化 HTML,避免过度使用。
- 测试工具与方法:axe DevTools、WAVE、Lighthouse、Pa11y、Siteimprove;手动键盘测试、屏幕阅读器测试、200% 缩放、对比度检查、语音控制,以及包含残障用户的用户测试。
- 提供无障碍检查清单,覆盖替代文本、对比度、键盘可达、焦点可见、表单标签、错误信息、标题层级、链接文本、表格表头、动态内容播报、跳转链接、ARIA 地标、动效偏好、文本缩放与触控目标(至少 44x44 像素)。
使用方式:资料未提供具体安装命令或调用步骤,暂未提供。
适用场景:前端开发、设计评审、质量测试与合规检查等需要落实无障碍标准的环节。
限制:资料未说明收费、价格、平台支持范围或实际效果,暂未提供。