mcpField
S
scan-code-accessibility-figma

scan-code-accessibility-figma

github.com/southleftテスト・品質2068 回インストール21 週間前に更新
リポジトリ

scan-code-accessibility-figma について

scan-code-accessibility-figmaは、axe-coreとJSDOMでHTMLの構造・セマンティクスに関するアクセシビリティ問題を調べるスキルです。Figmaからコードへのワークフロー向けで、デザインとの整合性確認用データも出力できます。JSDOMにレイアウトエンジンがないため、視覚ルールは対象外です。

主な機能

  1. 01axe-coreによるHTMLスキャン
  2. 02WCAGタグによる絞り込み
  3. 03CSSセレクターで範囲指定
  4. 04違反項目をJSONで報告
  5. 05codeSpecアクセシビリティデータの出力

活用シーン

  1. 01生成したコンポーネントHTMLの検査
  2. 02ラベル、ロール、代替テキストの不足確認
  3. 03指定コンポーネントに絞った検査
  4. 04整合性確認用のアクセシビリティデータ作成

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/scan-code-accessibility-figmaを入力して読み込まれたか確認します。

同梱ファイルscripts/package.jsonscripts/scan.mjs

詳細

scan-code-accessibility-figma — axe-core + JSDOM による HTML のスキャン

JSDOM を使い、HTML 文字列に対して axe-core（Deque のアクセシビリティエンジン）を実行します。これはアクセシビリティ対応のコード側を担い、Figma からコードへのワークフローで生成されたマークアップをチェックします。両端をカバーするため、lint-design-figma（デザイン側）と組み合わせて使います。

use_figma スキルではありません。 通常の Node で実行されるため、Figma ファイルも Plugin API も必要ありません。ルールデータベースは axe が管理しており、このスキルがルールを独自に作成することはありません。

スキルの対象範囲

  • デザイン側の視覚的なアクセシビリティ（コントラスト、フォーカスリング、ターゲットサイズ、色のみでの区別）→ lint-design-figma を使います。これらのルールは意図的に無効にしています。
  • コンポーネントごとのデザインスコアカード → audit-accessibility-figma を使います。
  • デザインとコードの同等性 → check-design-parity-figma を使います（このスキャンで出力できる codeSpec.accessibility を渡します）。
  • このスキルは use_figma を使用しないため、figma-use の規約は適用されません。

視覚的なルールを無効にしている理由

JSDOM は DOM を提供しますが、レイアウトエンジンも、計算済みの視覚スタイルもありません。つまり、ピクセルやレンダリングされた色を基準に測定できません。そのため、axe の視覚的なルールは常に「不完全」になるか、誤った結果になります。このスキャンでは、次のルールを明示的に無効にしています。

  • color-contrast と color-contrast-enhanced — レンダリングされた色が必要です。
  • link-in-text-block — 周囲のテキストのレイアウトが必要です。
  • target-size — レンダリングされたボックスの寸法が必要です。

構造やセマンティクスに関するルール（ARIA、ロール、名前、ラベル、代替テキスト、見出し、ランドマーク、言語、重複 ID、tabindex など、合計約 50 個）は通常どおり実行されます。視覚面については、デザインに対して lint-design-figma を実行してください。

使用方法

  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 — check-design-parity-figma の codeSpec.accessibility にそのまま追加できる codeSpecAccessibility オブジェクト（セマンティック要素、ロール、aria-label、focusVisible、キーボード操作、無効化／エラーへの対応）も出力します。
  3. 標準出力の 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 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。

コメント

Markdown 対応