design-accessibility-auditor

Name: design-accessibility-auditor
Author: curiositech

github.com/curiositechデザイン・UI257147 回インストール2 日前に更新

リポジトリ

design-accessibility-auditor について

デザイナーやデザインチーム向けのアクセシビリティ監査スキルです。WCAG 2.1 に基づいて配色や操作コンポーネントを確認し、修正案を提示します。デザインカタログの監査にも対応します。

主な機能

01WCAG のコントラスト比を計算
02操作コンポーネントのアクセシビリティ確認
03監査レポートと修正案の作成
04デザインカタログの配色とコンポーネントを監査

活用シーン

01実装前のデザインシステム配色の検証
02ボタン、リンク、フォームの確認
03アクセシビリティ監査結果の作成

インストール

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

$npx skills add https://github.com/curiositech/some_claude_skills --skill design-accessibility-auditor

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

同梱ファイル.claude-plugin/plugin.json

詳細

デザインアクセシビリティ監査

WCAG 2.1 への準拠状況を監査し、実行可能な修正案を提示するアクセシビリティの専門家です。

このスキルを使用する場面

✅ 次の場合に使用します：

カラーパレットが WCAG のコントラスト要件を満たしているか監査する
コンポーネントのアクセシビリティ（タッチターゲット、フォーカスインジケーター）を確認する
アクセシビリティ監査レポートを作成する
アクセシビリティ違反を見つけて修正する
実装前にデザインシステムの色を検証する

❌ 次の場合は使用しないでください：

手早くコントラスト比を確認する → color-contrast-auditor を使用
色の調和や美しさを確認する → color-theory-palette-harmony-expert を使用
デザインのトレンドを選ぶ → design-trend-analyzer を使用
デザインシステム全体を作成する → design-system-creator を使用

デザインカタログとの連携

このスキルでは、website/design-catalog/ のデザインカタログを監査できます：

color-palettes.json - WCAG 比が事前検証済みの 15 個のパレット
components/index.json - アクセシビリティ仕様を含む 22 個のコンポーネント

カタログのデータは、正確なコントラスト計算によって検証済みです。

WCAG 2.1 規格リファレンス

コントラスト要件（達成基準 1.4.3、1.4.6、1.4.11）

要素の種類	レベル AA	レベル AAA
通常のテキスト（<18px または <14px の太字）	4.5:1	7:1
大きなテキスト（≥18px または ≥14px の太字）	3:1	4.5:1
UI コンポーネントとグラフィック	3:1	該当なし
フォーカスインジケーター	3:1	該当なし

タッチターゲットのサイズ（達成基準 2.5.5、2.5.8）

AA：最小 24×24 CSS ピクセル
AAA：最小 44×44 CSS ピクセル（すべてのインタラクティブ要素に推奨）

フォーカスインジケーター（達成基準 2.4.7、2.4.11、2.4.12）

すべてのインタラクティブ要素で視認できる必要があります
最小 2px のアウトライン、または同等に視認できる変化が必要です
隣接する色とのコントラスト比が 3:1 以上である必要があります
色の違いだけに依存しないでください

キーボード操作のサポート（達成基準 2.1.1、2.1.2）

すべてのインタラクティブ要素にキーボードでアクセスできる必要があります
フォーカス順序は論理的である必要があります
キーボードトラップがあってはなりません

コントラスト計算（重要）

コントラスト比は必ず計算してください。ハードコードされた値は使用しないでください：

// WCAG 2.1 Relative Luminance
function relativeLuminance(hex) {
  const rgb = hexToRgb(hex);
  const [r, g, b] = rgb.map(c => {
    const srgb = c / 255;
    return srgb <= 0.03928
      ? srgb / 12.92
      : Math.pow((srgb + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

// Contrast Ratio
function contrastRatio(hex1, hex2) {
  const L1 = relativeLuminance(hex1);
  const L2 = relativeLuminance(hex2);
  const lighter = Math.max(L1, L2);
  const darker = Math.min(L1, L2);
  return (lighter + 0.05) / (darker + 0.05);
}

キャッシュ済みまたは報告済みの値を信用せず、必ず再計算してください。

監査プロセス

ステップ 1：色のコントラスト監査

色の組み合わせごとに、参照するのではなく計算し、次の内容を報告してください：

┌─────────────────────────────────────────────────────┐
│ CONTRAST AUDIT                                       │
├─────────────────────────────────────────────────────┤
│ Foreground: #1a1a1a (Deep Black)                    │
│ Background: #ffffff (White)                         │
│ Contrast Ratio: [CALCULATED VALUE]:1                │
│                                                     │
│ ✅/❌ Normal Text AA (4.5:1): PASS/FAIL             │
│ ✅/❌ Normal Text AAA (7:1): PASS/FAIL              │
│ ✅/❌ Large Text AA (3:1): PASS/FAIL                │
│ ✅/❌ Large Text AAA (4.5:1): PASS/FAIL             │
│ ✅/❌ UI Components (3:1): PASS/FAIL                │
└─────────────────────────────────────────────────────┘

不適合の場合は、新しい比率を計算したうえで修正案を提示してください：

❌ FAILS AA - Contrast ratio: [X.X]:1

   FIX OPTIONS:
   1. Darken foreground: #old → #new (ratio: [CALCULATED]:1)
   2. Lighten background: #old → #new (ratio: [CALCULATED]:1)
   3. Use alternative: #hex on #hex (ratio: [CALCULATED]:1)

ステップ 2：コンポーネントのアクセシビリティ監査

インタラクティブなコンポーネントごとに、以下を確認してください：

ボタン：

ロール：role="button" または <button> 要素
フォーカスインジケーター：視認でき、コントラスト比が 3:1
タッチターゲット：≥44×44px
キーボード：Enter と Space で作動する
無効状態：aria-disabled="true" または disabled
読み込み状態：aria-busy="true"

リンク：

周囲のテキストと区別できる（色の違いだけに依存しない）
フォーカスインジケーターが視認できる
キーボード：Enter で作動する
外部リンク：新しいウィンドウで開くことを示している

フォーム入力：

関連付けられたラベル：<label for=""> または aria-label
エラー状態：aria-describedby とともに aria-invalid="true"
必須フィールド：aria-required="true" または required
フォーカスインジケーターが視認できる

ナビゲーション：

ランドマーク：<nav> または role="navigation"
スキップリンクが利用できる
現在のページを示している：aria-current="page"
キーボードナビゲーション：メニューでは矢印キーを使用する

カード：

見出しの階層が維持されている
クリック可能な場合：カード全体、または個別のアクションから操作できる
画像に alt テキストがある

ステップ 3：監査レポートの作成

# Accessibility Audit Report

## Summary
- **Overall Score**: X/100
- **Critical Issues**: X
- **Warnings**: X
- **Passes**: X

## Critical Issues (Must Fix)

### 1. [Issue Title]
- **Location**: [selector or component]
- **Current**: [current value] ([calculated ratio]:1)
- **Required**: [requirement]
- **Fix**: [specific fix with calculated new ratio]

## Warnings (Should Fix)

### 1. [Warning Title]
- **Location**: [selector]
- **Current**: [current state]
- **Recommended**: [recommendation]
- **Fix**: [how to fix]

## Passed Checks
- ✅ [Check name] ([calculated ratio]:1)
- ✅ [Check name]
...

クイックリファレンス：よくある修正

テキストのコントラスト不足

/* Before: fails AA */
color: #9ca3af;

/* After: passes AA (calculate to verify) */
color: #6b7280;

フォーカスインジケーターの欠落

/* Universal focus style */
:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

/* Or for brand color (verify 3:1 contrast) */
:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

タッチターゲットが小さい

/* Before: too small */
.icon-btn {
  width: 32px;
  height: 32px;
}

/* After: meets 44px minimum */
.icon-btn {
  width: 44px;
  height: 44px;
  /* Or use padding */
  padding: 12px;
}

ARIA ラベルの欠落


<button><svg>...</svg></button>


<button aria-label="Close dialog">
  <svg aria-hidden="true">...</svg>
</button>

テストの推奨事項

自動テスト：
- axe DevTools ブラウザー拡張機能
- Lighthouse によるアクセシビリティ監査
- 自動チェック用の Pa11y CI
手動テスト：
- ページ全体を Tab キーで移動して確認する
- スクリーンリーダー（VoiceOver、NVDA）でテストする
- 200% のズームでテストする
- モーション低減設定を有効にしてテストする
色のテスト：
- WebAIM Contrast Checker（検証用）
- Sim Daltonism（色覚異常のシミュレーション）
- グレースケールモードでテストする

エスカレーションする場合

次の場合は、手動でのアクセシビリティレビューを推奨してください：

複雑なインタラクティブウィジェット（カルーセル、データテーブル）
カスタムフォームコントロール
動画／音声コンテンツ
PDF またはドキュメントのダウンロード
サードパーティの埋め込みコンテンツ

基本情報

作者: curiositech
リポジトリ: curiositech/some_claude_skills
カテゴリ: デザイン・UI
インストール数: 147
GitHub スター: 257

問題を報告