mcpField
F
figma-scan-code-accessibility

figma-scan-code-accessibility

github.com/southleft测试与质量94127 次安装10 周前更新
代码仓库

关于 figma-scan-code-accessibility

figma-scan-code-accessibility 使用 axe-core 和 JSDOM 扫描 HTML，面向检查 Figma 转代码产物的开发者。它聚焦结构与语义规则，并可输出供设计与代码一致性检查使用的数据。

主要功能

  1. 01扫描 HTML 结构与语义可访问性
  2. 02按 WCAG 标签筛选规则
  3. 03限定 CSS 选择器扫描范围
  4. 04输出违规节点与严重级别
  5. 05生成 codeSpecAccessibility 对象

适用场景

  1. 01检查组件 HTML 的 ARIA 与标签
  2. 02按 WCAG 级别筛查违规
  3. 03将无障碍信息传给设计一致性检查

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/southleft/figma-console-mcp-skills --skill figma-scan-code-accessibility

安装后在 Claude Code 中输入/figma-scan-code-accessibility确认已加载。

附带文件scripts/package.jsonscripts/scan.mjs

详细介绍

figma-scan-code-accessibility — 使用 axe-core + JSDOM 扫描 HTML

使用 axe-core（Deque 的无障碍引擎），通过 JSDOM 检查 HTML 字符串。这是无障碍工作中的代码侧：它会检查 Figma 到代码工作流生成的标记。它与 figma-lint-design（设计侧）配合，覆盖两端。

不是 use_figma 技能。 此工具在纯 Node 环境中运行——无需 Figma 文件，也无需 Plugin API。规则数据库由 axe-core 管理；此技能不会自行创建规则。

技能边界

  • 设计侧的视觉无障碍（对比度、焦点环、目标尺寸、仅依赖颜色）→ 使用 figma-lint-design。这里会有意禁用这些规则。
  • 单个组件的设计评分卡 → 使用 figma-audit-accessibility。
  • 设计与代码的对等性 → 使用 figma-check-design-parity（传入此扫描可以生成的 codeSpec.accessibility 数据）。
  • 此技能不使用 use_figma，因此 figma-use 约定不适用。

为什么禁用视觉规则

JSDOM 提供 DOM，但没有布局引擎，也无法计算视觉样式——没有可用于测量像素或渲染颜色的数据。因此，axe 的视觉规则总会给出“不完整”或错误的结果。扫描会明确禁用这些规则：

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

所有结构和语义规则（ARIA、角色、名称、标签、替代文本、标题、地标、语言、重复 ID、tabindex，总计约 50 条规则）都会正常运行。对于视觉部分，请在设计上运行 figma-lint-design。

用法

  1. 安装一次依赖（在此技能的 scripts/ 目录中）： 
    cd scripts && npm install
    安装 axe-core 和 jsdom。
  2. 对 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 — 包含通过／不完整／不适用规则的数量。
    • --map-to-codespec — 另外生成 codeSpecAccessibility 对象（语义元素、角色、aria-label、focusVisible、键盘交互、禁用／错误支持），可直接填入 figma-check-design-parity 的 codeSpec.accessibility。
  3. 读取 stdout 上的 JSON：按规则分组的违规项，包含 severity（根据 axe 的 impact 分为 critical/warning/info）、wcagTags、helpUrl，以及最多 10 个违规节点，并附带 summary。

纯 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 figma-lint-design.",
  "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。

评论

支持 Markdown