SuperAPI AI 工具集

specsfy-specialist-web-accessibility

前端与建站

查看项目

更新于 10-16 03:49

技能介绍

用途:在实现或审计页面、组件、表单、仪表盘、媒体与关键流程时,对照 WCAG 与平台语义检查无障碍;也可用于排查键盘、焦点、可访问名称、对比度、缩放、重排、读屏器等辅助技术相关的缺陷。若只是视觉偏好且无可见障碍,则不应使用本技能,改用 $specsfy-specialist-ui-design。修复代码时应结合具体框架技能,合规责任不转移给框架。

主要能力与流程:先确认政策、WCAG 等级、浏览器、辅助技术、用户与关键流程,将合规审计与可用性测试分开;按结构、感知、键盘、焦点、表单、动态更新、媒体与认证清点障碍;优先修正原生 HTML 与行为,再考虑 ARIA 或自定义组件,并校验计算后的名称、角色、值与状态及关系;实现键盘操作、逻辑顺序、可见焦点、焦点不被遮挡,以及打开、关闭、导航与异步更新后的焦点管理;验证对比度、缩放、重排、文本间距、目标尺寸、强制颜色、方向、动效与媒体替代方案;结合自动分析与人工检查,按准则、影响、复现路径与可验证修复记录每个发现;用代表性辅助技术演练关键任务,记录覆盖范围、限制、例外与剩余风险。

标准要点:任何操作都不应仅依赖悬停、颜色、手势或精确指针;控件需具备正确的名称、角色、值与状态;模态框需捕获焦点、以可预期方式关闭并归还焦点;错误需与字段关联并按需汇总;异步更新只播报相关信息;图表需提供等价的文本或表格且不依赖颜色;ARIA 不能修复错误的原生语义。

验证:完整走查键盘流程,确认无陷阱、丢失或焦点遮挡,检查覆盖层的顺序与焦点返回;验证 200% 文本缩放与约 320 CSS px 重排、文本间距与受支持方向;测量文本、组件与焦点指示的对比度,并在适用时测试强制颜色与减弱动效;将 axe 或 linter 与无障碍树检查和读屏器结合,用于高风险流程。不得仅因自动化工具通过就声明合规;声明 WCAG 合规需映射准则、范围、证据、限制与例外。

相关技能:$specsfy-specialist-react-ui-components 与 $specsfy-specialist-shadcn-ui 提供的组件由本技能审计语义、焦点、键盘与可访问名称;$specsfy-specialist-tailwind-css 在工具类与令牌中实现对比度、强制颜色、重排与减弱动效;$specsfy-specialist-ui-design 管理层级、令牌与视觉状态;$specsfy-specialist-ux-design 研究理解与任务成功;$specsfy-specialist-react、$specsfy-specialist-astro 或 $specsfy-specialist-nextjs 在对应框架内实施修复;$specsfy-specialist-code-review 将审查扩展到无障碍范围之外。可阅读 references/standards.md 获取 WCAG 2.2 准则、组件契约、表单、动态内容与测试矩阵。