mcpField
C
compliance-mapping

compliance-mapping

github.com/owl-listenerデザイン・UI10874 回インストール20 週間前に更新
リポジトリ

compliance-mapping について

デザインの決定をアクセシビリティ規格に対応付けるスキルです。デザインレビューや監査準備を行うチーム向けに、WCAG 2.2 AAや関連する法的枠組みとの対応を示し、実装前の不適合リスクの把握を支援します。

主な機能

  1. 01ビジュアルデザインの決定をWCAGに対応付け
  2. 02インタラクションの決定をWCAGに対応付け
  3. 03コンテンツと構造の決定をWCAGに対応付け
  4. 04動きと時間に関する決定をWCAGに対応付け
  5. 05デザインレビューと監査準備の手順

活用シーン

  1. 01デザイン確定前に関連するWCAG基準を確認
  2. 02デザインレビューで適合性の懸念を特定
  3. 03製品固有の監査前チェックリストを作成

インストール

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

$npx skills add https://github.com/owl-listener/inclusive-design-skills --skill compliance-mapping

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

詳細

コンプライアンスマッピング

デザイン上の判断を特定のアクセシビリティ基準に対応付け、何が対応済みで、何が未対応なのか、どこにリスクがあるのかをチームが正確に把握できるようにします。

デザイナーに必要な理由

コンプライアンスマッピングは、通常、エンジニアリングの監査業務として扱われます。しかし、適合性の不備の多くは、コードを書く前に行われたデザイン上の判断に端を発します。自分の判断がどの基準に影響するかを理解しているデザイナーは、不備を発見するのではなく、未然に防ぐことができます。

主な基準

WCAG 2.2 レベル AA

世界的な基準となる最低ラインです。多くの法律がこれを参照しています。

  • レベル A:最低限(29 項目)
  • レベル AA:標準的な目標(追加で 20 項目)
  • レベル AAA:努力目標(追加で 28 項目)

ほとんどの組織はレベル AA を目標とします。レベル AAA の基準にも、必須ではなくても採用する価値があるものがあります(特に認知アクセシビリティに関する基準)。

法的枠組み
  • ADA(米国): アクセシブルなデジタルサービスを義務付けています。裁判所は WCAG 2.1 AA を参照します
  • EAA(EU): 欧州アクセシビリティ法。2025 年 6 月に施行され、WCAG 2.1 AA に準拠する EN 301 549 を参照します
  • Section 508(米国政府): WCAG 2.0 AA を参照しています。更新が予定されています
  • EN 301 549(EU): EAA の基盤となる技術規格です。WCAG 2.1 AA に準拠し、ソフトウェア、ハードウェア、ドキュメントに関する追加要件を含みます

デザイン上の判断と WCAG の対応関係

色とビジュアルデザイン
デザイン上の判断WCAG 基準
テキストのコントラスト比1.4.3 コントラスト(最低限)AA
非テキストのコントラスト1.4.11 非テキストのコントラスト AA
色だけを唯一の手がかりにしない1.4.1 色の使用 A
テキストを 200% まで拡大1.4.4 テキストのサイズ変更 AA
ズーム時のコンテンツのリフロー1.4.10 リフロー AA
テキスト間隔の上書き1.4.12 テキストの間隔 AA
インタラクションデザイン
デザイン上の判断WCAG 基準
キーボードで操作可能2.1.1 キーボード A
キーボードトラップがない2.1.2 キーボードトラップなし A
フォーカスが視認できる2.4.7 フォーカスの可視化 AA
フォーカス順序が論理的2.4.3 フォーカス順序 A
タッチターゲットのサイズ2.5.8 ターゲットサイズ(最低限)AA
動きだけを使った入力がない2.5.4 モーションによる作動 A
ジェスチャーの代替手段2.5.1 ポインタージェスチャー A
コンテンツと構造
デザイン上の判断WCAG 基準
ページタイトル2.4.2 ページタイトル A
見出しの階層1.3.1 情報と関係性 A
リンクの目的が明確2.4.4 リンクの目的(文脈内)A
ページの言語を設定3.1.1 ページの言語 A
一貫したナビゲーション3.2.3 一貫したナビゲーション AA
エラーの特定3.3.1 エラーの特定 A
入力欄のラベル3.3.2 ラベルまたは説明 A
動きと時間
デザイン上の判断WCAG 基準
動きを一時停止・停止・非表示にする2.2.2 一時停止、停止、非表示 A
点滅するコンテンツがない2.3.1 3 回の点滅 A
時間制限を調整可能2.2.1 時間調整可能 A
インタラクションによるアニメーション2.3.3 インタラクションによるアニメーション AAA

この資料の使い方

デザイン中

デザイン上の判断を確定する前に、影響を受ける WCAG 基準を確認します。修正コストが最も低い段階で不備を発見できます。

レビュー中

関連する基準の表に照らしてデザインを確認します。適合性の不備を引き起こす判断があれば、指摘します。

監査の準備

対応表を使って、自社製品に特化した監査前チェックリストを作成します。これにより、どの判断がどの基準に対応するかを監査担当者に正確に伝えられます。

評価の質問

  1. チームは、主要なデザイン上の判断を WCAG 基準に対応付けられますか?
  2. 適合性の不備を引き起こすデザイン上の判断はありますか?
  3. チームは、自社製品に適用される法的枠組みを把握していますか?
  4. 実装前にデザインを基準に照らして確認するプロセスはありますか?

コメント