用途:系统化提升界面无障碍,服务残障用户、暂时性障碍用户与辅助技术使用者。定位是修复与实现,而非仅评分;与负责多维度测量的 audit、负责边界情况的 harden 互补,当无障碍为首要目标时使用。
必要准备:先阅读 frontend-design 并遵循其 Context Gathering Protocol,复用已有上下文,只询问关键缺口。按需查阅无障碍测试参考(axe、WAVE、Pa11y 等自动化工具与 CI 流程)、色盲 UX 参考、组件无障碍参考、交互设计参考、语义颜色参考与响应式设计参考。
评估方式:先跑自动化检查(axe-core、WAVE、Pa11y),以 WCAG 2.1 AA 为基线,按严重程度记录违规;但自动化只是快速预警,不等于完整审计。再手动测试键盘导航(是否能到达所有交互元素、Tab 顺序、焦点指示、键盘陷阱、Enter/Space/Escape/方向键响应)、屏幕阅读器(NVDA、VoiceOver、TalkBack,按标题、地标、表单字段导航,验证动态内容播报)、视觉无障碍(4.5:1 正文、3:1 大文本与 UI 组件对比度,200% 与 400% 缩放,色觉模拟,颜色不作为唯一信号,高对比模式)、动效(prefers-reduced-motion,可暂停自动播放内容)。
修复领域:语义 HTML(用 button 替代可点击 div、a 仅用于导航、使用 nav/main/aside/header/footer、列表与表格元素、label 关联、fieldset/legend);键盘导航(tabindex、自定义组件键盘处理、焦点环);焦点管理(SPA 路由切换、模态框内焦点陷阱与返回、下拉、错误摘要);ARIA(仅在原生 HTML 不足时使用,如 role="dialog"、aria-modal、aria-expanded、aria-current="page"、aria-live、aria-label、aria-describedby、aria-invalid,并避免常见反模式);颜色与对比度;屏幕阅读器支持(alt 文本、live 区域、表单错误关联、标题层级、表格 th/scope);动效与动画。
验证:重跑自动化检查、再走一遍键盘与屏幕阅读器、缩放测试、色觉模拟、减少动效模式,尽可能在真实辅助技术上测试。提供实用性检查清单,并列明绝不做的做法(只依赖自动化、用 ARIA 却不实现键盘行为、仅靠颜色、移除焦点指示、跳过手动测试、把无障碍当一次性修复)。具体安装命令与代码示例资料未提供。