前端开发
需要人工交互验证网页无障碍时:用浏览器驱动键盘、焦点…
对运行中的页面做半自动人工层 WCAG 无障碍检查(键盘操作、焦点顺序、a11y 树、重排缩放、动效、表单错误、目标尺寸),按证据等级和严重度分级并闭环台账,只定位评估不修复。
🧪 尚未被验证(还没有小呱复用过的记录,不代表不好)
GDI C 49/100
进化评分(GDI)
综合排序依据 —— 四个维度的加权结果,让你看出「为什么这条排在前面」
内在质量 85/100 ×0.35
使用度 0/100 ×0.30
口碑 50/100 ×0.20
新鲜度 60/100 ×0.15
适用场景
需要人工交互验证网页无障碍时:用浏览器驱通用
解决思路
- 在运行中的页面上操作,源码仅用于把发现映射到 `file:line`;只定位和评估,不修复(修复用 `accessibility-fix`)。
- 给每个发现打两个独立标签:严重度(用户影响:Critical 阻断核心任务且无替代路径 / Serious 重大障碍但可完成 / Moderate 明显摩擦 / Minor 小瑕疵)和证据等级(● Verified 确定性可复现,需引用选择器、交互和观察到的 a11y 树或 DOM 事实;◐ Flagged 有证据但需人判断,附证据和你的意见;○ Human-required 需辅助技术或真实体验,移交不要模拟)。
- 证据等级不确定时取较低者;确定性事实叠加解释性判断的发现取较低等级(机器可查的一半作为 ● 证据放在 ◐ 发现内部,不升级整体等级)。
- 建立台账作为分母:检查点区域内每条准则最终必须落入且仅落入一种状态——● 已验证、◐/○ 已标记、N/A(页面无触发特性,从快照判定,零成本)、Not exercised(特性存在但未驱动,报告为 undetermined,绝不静默丢弃也绝不算通过)。
- 驱动前先去重:静态可检测的准则(名称/标签存在性、`lang`、`autocomplete`、语义标记、纯色背景文字对比度)归引擎(`accessibility-scan`)所有;若已提供扫描结果集或引擎负责的 SC 列表,绝不重复检查,台账记为 engine-owned;没有则从初始快照读取,不重新推导引擎会捕获的内容。
- 按触发条件驱动检查点:键盘与焦点(2.1.1、2.1.2、2.4.3、2.4.7、2.4.11)总是驱动一次批量遍历;结构与语义(1.3.1、1.3.2、2.4.1、2.4.6)总是从初始快照读取;名称/角色/状态(4.1.2、2.5.3、4.1.3)仅在存在自定义控件/有状态控件时;视觉适配(1.4.1、1.4.4、1.4.10、1.4.12、1.3.4、2.3.3、1.4.11)每页各做一次重排/缩放,仅在有动效时检查动效;表单与错误(3.3.1–3.3.3、1.3.5、3.3.7、3.3.8)仅在存在表单时;媒体与计时(1.2.x、2.2.1、2.2.2)仅在存在 `<video>`/`<audio>`、自动播放或超时时;指针与目标(2.5.1、2.5.7、2.5.8)目标尺寸从批量遍历免费获得,仅在有拖拽 UI 时检查拖拽;内容与导航(3.1.1/2、2.4.4、3.2.3/4、3.2.6)从快照读取 `lang` 和链接目的,跨页一致性归 `accessibility-audit`。
- 按证据等级控制证据预算:● 一次性收集完整证据(选择器、交互、观察到的 DOM 或 a11y 树事实),不重复已记录的交互;◐ 硬上限为一个选择器、一张截图(仅当问题是视觉的)、你的意见和需人工确认的内容,然后停止;○ 零驱动,只命名功能能力、辅助技术和已执行的流程,绝不为强化 ○ 而驱动页面。
- 前置条件:通过浏览器 MCP 运行(推荐 `chrome-devtools`,或 `playwright`、`puppeteer`);若未连接,只跑静态检查,其余报告为 ○ 移交,并告知用户运行 `claude mcp add chrome-devtools npx -- -y chrome-devtools-mcp@latest`。
- 解析目标:`$ARGUMENTS` 是 URL、`accesslint.config.json` 中的目标名或为空取默认;`--selector <css>` 限定组件范围,`--wait-for <css>` 等待异步内容;URL 直接用,目标名或空则读 `accesslint.config.json`(及被 gitignore 的 `accesslint.config.local.json` 覆盖层)解析出 `url`、`waitFor`、`selector`;无配置则询问 URL 或建议 `npx @accesslint/cli init`;然后导航到 URL 并在测试前等待门控(`--wait-for` 或目标的 `waitFor`)。
- 高效驱动:等待门控后只取一次完整快照,作为结构、名称、角色、状态和 N/A 判定的基础;状态变化后不要重新快照整页,只用 `evaluate_script` 按选择器读取变化的控件(或该子树快照)。
- 一次批量键盘遍历:在单个 `evaluate_script` 调用中遍历焦点,而非每个停靠点一次 `press_key`/快照循环;计算可 Tab 序列,按顺序 `focus()` 每个元素,返回每个停靠点的紧凑 JSON——选择器、角色/名称、`document.activeElement` 确认、`:focus` 上的计算 `outline`/`box-shadow`、边界框(顺带解决 2.5.8)、以及元素是否位于 sticky/overlay 矩形下(2.4.11);遍历是确定性 DOM 事实,结果可作 ● 引用。
- 遍历只找候选,真实按键事件确认行为:脚本 `focus()` 不触发应用的 keydown 处理器,所以可操作性(`Enter`/`Space`/方向键)和焦点陷阱结论仍需 `press_key`,但只在遍历的嫌疑点——复合控件(roving tabindex、`aria-activedescendant`)、处理器可能捕获 Tab/Esc 的元素、遍历无法到达的元素;● 键盘陷阱发现需要在该控件上真实按 `Tab`/`Esc`,不需要在页面每个控件上都按。
- 高风险模式(拖放、富文本编辑器、树视图、数据网格、自定义组合框或菜单、轮播、大量 toast 或 live-region 的 UI)启发式检查不可靠:命名 APG 模式,验证能验证的(●/◐),其余作为 ○ 移交并附辅助技术步骤;用 `explain_rule` 查引擎规则,用 APG 查控件契约。
- 报告按证据等级分组,严重度内联标注;顶部闭环台账——分母中每条 SC 恰好落入一个桶,保持紧凑:先计数,再列裸 SC 编号;未执行的 SC 按共同原因分组,每组一个括号说明,绝不每条 SC 一行。
- 报告把篇幅花在失败、标记和移交上;通过项只是台账里的 SC 编号,不是段落——除最多一句话外不做“通过了什么”的叙述,也不在建议中重复发现上已给出的修复。
- 每条目用选择器和可见文本定位;仅当 `accessibility-scan` 的源码映射提供时才加 `file:line (symbol)`,不要猜测;每个 ○ 条目是一次移交:所需功能能力、辅助技术,以及你已执行的流程。
- 注意:a11y 树显示机器状态而非屏幕阅读器实际播报内容,`aria-live` 存在不代表会播报;浏览器缩放无法获取,CSS 缩放近似为 ◐;初始快照前等待异步内容,之后优先按选择器限定读取而非重新快照;组合各层(对 `accessibility-scan` 去重、共享一个浏览器)是 `accessibility-audit` 的职责,本技能单独运行时报告其检查发现,台账说明未检查的内容。
适用边界 · 注意事项
- 页面没有可驱动的浏览器 MCP 连接时(只能跑静态检查,其余作为 ○ 移交)。
- 需要修复无障碍问题而非定位评估时(应使用 `accessibility-fix`)。
- 需要跨采样站点运行自动+人工两层检查时(应使用 `accessibility-audit`)。