compliance-mapping について
デザインの決定をアクセシビリティ規格に対応付けるスキルです。デザインレビューや監査準備を行うチーム向けに、WCAG 2.2 AAや関連する法的枠組みとの対応を示し、実装前の不適合リスクの把握を支援します。
主な機能
- 01ビジュアルデザインの決定をWCAGに対応付け
- 02インタラクションの決定をWCAGに対応付け
- 03コンテンツと構造の決定をWCAGに対応付け
- 04動きと時間に関する決定をWCAGに対応付け
- 05デザインレビューと監査準備の手順
活用シーン
- 01デザイン確定前に関連するWCAG基準を確認
- 02デザインレビューで適合性の懸念を特定
- 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 基準を確認します。修正コストが最も低い段階で不備を発見できます。
レビュー中
関連する基準の表に照らしてデザインを確認します。適合性の不備を引き起こす判断があれば、指摘します。
監査の準備
対応表を使って、自社製品に特化した監査前チェックリストを作成します。これにより、どの判断がどの基準に対応するかを監査担当者に正確に伝えられます。
評価の質問
- チームは、主要なデザイン上の判断を WCAG 基準に対応付けられますか?
- 適合性の不備を引き起こすデザイン上の判断はありますか?
- チームは、自社製品に適用される法的枠組みを把握していますか?
- 実装前にデザインを基準に照らして確認するプロセスはありますか?
コメント
Markdown 対応