audit-accessibility-figma

audit-accessibility-figma — コンポーネントごとのアクセシビリティスコアカード

単一のコンポーネントまたはコンポーネントセットを対象に詳細なアクセシビリティ監査を実行し、優先順位付きの修正項目と重み付けされた0～100のスコアカードを取得します。lint-design-figma がツリー全体を対象に多くのルール違反を検出するのに対し、このスキルは1つのコンポーネントを掘り下げて調査します。バリアント軸を理解し、コンポーネントをインタラクティブかプレゼンテーション用かに分類したうえで、各アクセシビリティ項目に応じてスコアを付けます。

すべてのプランで use_figma を使用し、実際のバリアントツリー、塗り、線、エフェクト、コンポーネントの説明を調査します。

スキルの適用範囲

• use_figma のルール — まず公式の figma-use スキルを読み込んでください。スクリプトが前提とする基本事項は、トップレベルの await と return を使うプレーンなJS（IIFEや figma.closePlugin() は使わない。console.log の内容は返されません）、各スクリプトの先頭で入力値を const としてインライン指定すること、色の値を0～1の範囲にすること、テキスト操作の前にフォントを読み込むこと、await figma.getNodeByIdAsync(...) を使うこと、そしてアトミックエラー（スクリプトが失敗すると何も適用されません。エラーを読み、修正して再試行してください）です。
• ツリー全体のWCAG + デザインシステムのLint → lint-design-figma を使用してください。
• コード側のアクセシビリティ（HTMLに対するaxe-core）→ scan-code-accessibility-figma を使用してください。
• デザインとコードの差異 → check-design-parity-figma を使用してください。

ワークフロー

1. 対象のコンポーネントを指定します。 NODE_ID にCOMPONENT_SET、COMPONENT、またはINSTANCEのIDを設定します（スクリプトがINSTANCE → メインコンポーネント → 親セットを自動的にたどります）。現在選択している単一の要素を監査する場合は null のままにします。
2. タップターゲットの最小サイズを設定します。 TARGET_SIZE のデフォルトは24（WCAG 2.5.8の最小値）です。モバイル向けにより厳しい基準にするには、44または48を指定します。
3. use_figma で scripts/audit-accessibility.js を実行します （skillNames: "audit-accessibility-figma"）。
4. スコアカードを確認します。 overallScore は、6つのカテゴリスコアを分類に応じて重み付けした値です。各カテゴリ、その重み、スコアを上げる方法については、references/audit-categories.md を参照してください。
5. 推奨事項に取り組みます。 recommendations[] は、WCAG SC名とともに priority（high／medium／low）の順に並んでいます。修正後、再実行してスコアが変化したことを確認します。

主なルール

• インタラクティブかプレゼンテーション用かは、コンポーネント名とバリアント軸から自動検出されます。これにより、スコアの対象カテゴリとその重みが変わります。バッジはフォーカス状態がなくても減点されませんが、ボタンは減点されます。
• 色の値は0～1の浮動小数点数です。 コントラストの計算にはsRGB輝度を使用します。色覚特性のシミュレーションにはBrettel／Viénotの二色覚マトリックスを使用します。
• カバレッジとは、インタラクティブコンポーネントでは操作状態を指し、プレゼンテーション用コンポーネントではバリアント軸の網羅性（実際のバリアント数 ÷ 期待される組み合わせ数）を指します。
• この監査は読み取り専用です。manage-variables-figma／figma-use を使って修正を適用してから、再度監査してください。