SuperAPI AI 工具集

scan-code-accessibility-figma

测试与质量

查看项目

更新于 10-16 02:12

技能介绍

scan-code-accessibility-figma 用于对 HTML 字符串运行 axe-core(Deque 的无障碍引擎)检测,依托 JSDOM 解析。它是无障碍工作中「代码侧」的一环:检查 Figma 转代码流程产出的标记是否合规。它与 lint-design-figma(设计侧)配合,覆盖两端。

该技能不是 use_figma 技能,运行在普通 Node 环境中,不需要 Figma 文件,也不涉及 Plugin API。规则数据库由 axe-core 提供,本技能不会自创规则。

技能边界

  • 设计侧视觉无障碍(对比度、焦点环、目标尺寸、仅靠颜色传达信息)→ 使用 lint-design-figma。这些规则在本技能中被有意禁用。
  • 按组件出具的设计评分卡 → 使用 audit-accessibility-figma。
  • 设计稿与代码的一致性 → 使用 check-design-parity-figma(可将本扫描输出的 codeSpec.accessibility 传入)。

本技能不使用 use_figma,因此 figma-use 的相关约定不适用。

为什么视觉规则被禁用

JSDOM 提供 DOM,但不提供布局引擎,也不提供计算后的视觉样式——没有可用于测量像素或渲染颜色的依据。因此 axe 的视觉规则会始终处于「incomplete」或错误状态。扫描会显式禁用它们:

  • color-contrast 和 color-contrast-enhanced —— 需要渲染后的颜色。
  • link-in-text-block —— 需要周边文本布局。
  • target-size —— 需要渲染后的盒子尺寸。

所有结构性/语义性规则(ARIA、角色、名称、标签、alt、标题、地标、lang、重复 ID、tabindex,约 50 条规则)正常运行。视觉那一半,请在设计稿上运行 lint-design-figma。

使用方式

先安装依赖(在本技能的 scripts/ 目录中执行一次):

cd scripts && npm install

会安装 axe-core 和 jsdom。

对 HTML 文件或内联字符串运行扫描:

node scan.mjs path/to/component.html node scan.mjs --html '<button>Save</button>'

可选参数:

  • --tags wcag22aa —— 过滤到某个 WCAG 标签集(wcag2a、wcag2aa、wcag21aa、wcag22aa、best-practice)。可重复、或逗号分隔。
  • --context '#my-component' —— 将扫描范围限定到某个 CSS 选择器。
  • --include-passing —— 纳入通过 / incomplete / 不适用规则的数量统计。
  • --map-to-codespec —— 额外输出 codeSpecAccessibility 对象(语义元素、role、aria-label、focusVisible、键盘交互、disabled/error 支持),可直接放入 check-design-parity-figma 的 codeSpec.accessibility。

读取 stdout 上的 JSON:违规项按规则分组,含严重级别(由 axe impact 映射为 critical/warning/info)、wcagTags、helpUrl,每条最多 10 个问题节点,以及汇总信息。

裸 HTML 片段会在扫描前自动包裹为 <!DOCTYPE html><html lang="en">…<body>…。

输出结构

{ "engine": "axe-core", "version": "4.x", "mode": "jsdom-structural", "note": "JSDOM mode: structural/semantic checks only. Visual rules disabled — use lint-design-figma.", "categories": [ { "rule": "button-name", "severity": "critical", "count": 1, "description": "...", "wcagTags": ["wcag2a","wcag412"], "helpUrl": "...", "nodes": [ { "html": "...", "target": ["button"], "failureSummary": "..." } ] } ], "summary": { "critical": 1, "warning": 0, "info": 0, "total": 1 } }

严重级别映射:axe 的 critical/serious → critical,moderate → warning,minor → info。