SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场accessibility_testing

accessibility_testing

测试与质量

查看项目

更新于 10-16 04:36

技能介绍

用途

该技能定位为“无障碍审计技能”，扮演一名精通 WCAG 标准与包容性设计的无障碍扫描器。其目标是分析所提供的上下文（代码库、截图、无障碍树、HTML），并按照严格的格式要求产出全面的无障碍审计结果。

何时使用

资料列出以下适用场景：

  • 审计应用是否符合 WCAG 2.1 或 2.2（代码库或 URL）
  • 评审新功能的无障碍需求
  • 排查用户报告的无障碍问题
  • 准备无障碍合规认证
  • 评估键盘导航与焦点管理
  • 评估屏幕阅读器兼容性
  • 分析颜色对比度与视觉无障碍
  • 评审自定义组件中的 ARIA 实现
  • 进行表单无障碍审计
  • 评估响应式与移动端无障碍
  • 使用 Playwright MCP 对线上网站进行可视化无障碍测试

主要能力

技能围绕以下核心无障碍专业领域展开：

  1. 语义 HTML 与文档结构：检查标题层级（h1-h6）是否正确嵌套且不跳级、语义元素（nav、main、footer、article、section、aside）与通用 div/span 的对比、地标区域、DOM 阅读顺序与视觉顺序是否一致。规则包括每页恰好一个 h1、标题不跳级、语义元素按其用途使用、地标区域唯一且正确标注、DOM 顺序匹配视觉/逻辑阅读顺序。

  2. ARIA 实现：验证 ARIA 角色、状态与属性（aria-expanded、aria-checked、aria-selected）、地标角色、控件角色、动态内容的实时区域（aria-live、aria-atomic、aria-relevant）、ARIA 标签与描述、属性值与元素关联。规则包括 ARIA 第一原则（存在原生 HTML 语义元素时不使用 ARIA）、所有交互式 ARIA 控件必须可键盘访问、ARIA 角色会覆盖原生元素语义、特定角色必须包含必需属性、ARIA 状态须准确反映当前 UI 状态。

  3. 键盘导航与焦点管理：验证所有交互元素可键盘访问（tab、enter、space、方向键）、Tab 顺序符合逻辑/视觉流、无键盘陷阱、可见焦点指示器对比度足够（AA 级最低 3:1）、跳过导航链接、模态/对话框中的焦点管理（焦点陷阱、关闭时返回焦点）、键盘快捷键不与辅助技术冲突、ESC 键关闭模态并取消操作。

  4. 颜色对比度与视觉无障碍：测量普通文本对比度（AA 最低 4.5:1，AAA 7:1）、大文本对比度（AA 最低 3:1，AAA 4.5:1；大文本为 18pt+/24px+ 或 14pt+/18.66px+ 加粗）、UI 组件对比度（AA 最低 3:1）、非文本对比度（图标、按钮、表单输入最低 3:1）、信息不仅靠颜色传达、色盲（尤其红绿色）区分度。

  5. 表单与输入无障碍：标签关联（显式标签、隐式标签、aria-label 或 aria-labelledby）、分组控件的 fieldset/legend、必填字段指示（不仅靠星号或颜色）、错误识别与建议（SC 3.3.1、3.3.3）、可访问的错误消息（aria-describedby、aria-invalid、role="alert"）、autocomplete 属性（SC 1.3.5）、输入说明与控件的程序化关联。

  6. 替代文本与文本替代：信息性图片有描述性 alt 文本、装饰性图片使用空 alt（alt=""）、复杂图片有扩展描述、图标按钮有可访问名称、SVG 无障碍（title 元素、role="img"、aria-label）、图像映射的 alt 文本、视频字幕、音频转录或字幕。

  7. 交互组件与自定义控件：所有交互元素的可访问名称、正确的语义角色（按钮用于操作、链接用于导航）、模态/对话框无障碍（焦点陷阱、ESC 关闭、aria-modal="true"、关闭时焦点返回触发元素、可访问名称与描述）、工具提示无障碍、下拉/选择无障碍、选项卡面板、自定义控件遵循 ARIA Authoring Practices 模式。

  8. 响应式与移动端无障碍：触摸目标尺寸最小 44×44 CSS 像素（AA - SC 2.5.5）、触摸目标间距最小 24×24px 且间距充足（AAA - SC 2.5.8）、320px 视口宽度下无水平滚动（SC 1.4.10）、文本可缩放至 200% 而不丢失功能（SC 1.4.4）、400% 缩放内容重排无水平滚动（SC 1.4.10）、方向未锁定（SC 1.3.4）、触摸手势有键盘替代（SC 2.5.1）、指针取消防止误激活（SC 2.5.2）。

  9. Playwright MCP 可视化无障碍测试：当具备 Playwright MCP 工具时，可进行基于 URL 的可视化无障碍测试以补充代码分析。可用工具包括：浏览器导航（mcp__playwright__browser_navigate）、无障碍树快照（mcp__playwright__browser_snapshot）、视觉截图（mcp__playwright__browser_take_screenshot）、键盘导航测试（mcp__playwright__browser_press_key）、交互元素测试（browser_click、browser_type、browser_fill_form）、动态内容测试（browser_wait_for）。审计工作流为：导航到目标 URL、捕获初始无障碍快照、截取整页截图、测试键盘导航、测试表单交互、捕获焦点状态截图、分析控制台无障碍错误、用视觉证据记录发现。

代码上下文准确性要求

资料强调必须对代码上下文保持 100% 事实准确，绝不包含无关或占位代码。当能识别导致问题的确切 HTML 元素、代码片段直接展示问题、确信所展示代码是问题实际来源时，应包含代码上下文。当元素完全不存在（如无跳过链接、html 标签无 lang 属性）、仅从截图检测到问题但无法在 HTML 中定位对应代码、或不确定代码片段是否正确时，应完全省略代码上下文，并替换为“Code Context: N/A”说明。当元素存在但缺少属性（如 img 存在但缺 alt、input 存在但缺标签关联、元素存在但缺 ARIA 属性）时，必须展示代码上下文。禁止随机选取元素作为上下文、展示无关代码、猜测代码、用占位符填充模板。

具体性要求

当问题影响多个元素时，必须具体枚举。位置字段应写明具体元素（如“Hero image (img.hero-banner), product thumbnails (#products img)”或“src/components/Hero.tsx:45-48”），而非“页面中的图片”。代码上下文字段应展示所有受影响元素（或前 3-5 个），使用实际 src/class/id 值。修复字段应使用代码中的实际元素与基于视觉上下文的建议 alt 文本，而非通用占位符。

WCAG 合规级别

  • A 级（25 项标准）：最低无障碍要求，防止访问的关键障碍。关键标准包括 1.1.1 非文本内容、1.3.1 信息与关系、2.1.1 键盘、2.4.1 绕过区块、3.1.1 页面语言、4.1.2 名称/角色/值。
  • AA 级（共 38 项标准）：行业标准，推荐大多数网站使用，常为法律要求。额外标准包括 1.4.3 对比度（最低）、1.4.5 文本图像、2.4.7 焦点可见、3.2.3 一致的导航、3.3.3 错误建议、4.1.3 状态消息。
  • AAA 级（共 61 项标准）：增强无障碍，最高级别，适用于专门内容。额外标准包括 1.4.6 对比度（增强）、2.1.3 键盘（无例外）、2.4.8 位置、2.4.9 链接目的（仅链接）、2.5.5 目标尺寸、3.2.5 应请求更改。

审计方法

资料描述采用系统化方法进行无障碍审计，第一步为审计前配置（原文在此处截断，后续步骤暂未提供）。

限制

资料中列出的 Playwright 测试限制包括：无法替代手动屏幕阅读器测试、可能无法检测所有影响辅助技术用户的语义问题、无法测试语音控制或其他辅助输入方式、自动对比度测量可能与人类感知不同、某些动态行为可能需要手动验证。