用途:对 Figma 转代码流程生成的 HTML 做代码侧可访问性扫描,使用 Deque 的 axe-core 引擎在 JSDOM 中运行,检查标记的结构与语义问题。它不依赖 Figma 文件或 Plugin API,在普通 Node 环境运行,规则库由 axe-core 提供。
主要能力:覆盖 ARIA 属性与角色、可访问名称、标签、alt、标题层级、地标、lang、重复 ID、tabindex 等约 50 条结构语义规则。输出 JSON,按规则分组,含严重级别(axe impact 映射:critical/serious→critical,moderate→warning,minor→info)、wcagTags、helpUrl 及最多 10 个问题节点,并附汇总。
使用方式:先在 scripts/ 目录安装依赖:cd scripts && npm install(安装 axe-core 与 jsdom)。然后运行: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 输出通过/不完整/不适用规则计数;--map-to-codespec 额外输出 codeSpecAccessibility 对象,供 figma-check-design-parity 的 codeSpec.accessibility 使用。裸 HTML 片段会自动包裹为完整文档后扫描。
适用场景:Figma 转代码后的代码侧可访问性检查,与设计侧技能 figma-lint-design 配合覆盖两端。
限制:JSDOM 无布局引擎与计算样式,视觉规则被显式禁用,包括 color-contrast、color-contrast-enhanced、link-in-text-block、target-size;视觉可访问性请用 figma-lint-design,组件级设计评分用 figma-audit-accessibility,设计-代码一致性用 figma-check-design-parity。本技能不使用 use_figma,figma-use 约定不适用。