mcpField
F
figma-scan-code-accessibility

figma-scan-code-accessibility

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

figma-scan-code-accessibility について

figma-scan-code-accessibilityは、Figmaから生成したコードを確認する開発者向けに、axe-coreとJSDOMでHTMLをスキャンします。構造・意味のルールを調べ、デザインとコードの整合性確認に使うデータも出力できます。

主な機能

  1. 01HTMLの構造・意味的なアクセシビリティ検査
  2. 02WCAGタグによるルール絞り込み
  3. 03CSSセレクターでの範囲指定
  4. 04違反項目と重大度の出力
  5. 05codeSpecAccessibilityオブジェクトの生成

活用シーン

  1. 01コンポーネントHTMLのARIAやラベル確認
  2. 02WCAGレベル別の違反抽出
  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 のスキャン

JSDOM を使用して、HTML 文字列に対して axe-core（Deque のアクセシビリティエンジン）を実行します。これはアクセシビリティ対応のコード側を担い、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、ロール、名前、ラベル、代替テキスト、見出し、ランドマーク、lang、重複 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 — figma-check-design-parity の 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 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 対応