ux-accessibility-audit

アクセシビリティ監査スキル

このスキルの動作 (最初にお読みください)

これは 評価型 のスキルです — 既存の成果物を標準 (WCAG) に照らしてレビューするもので、UI を生成するものではありません。指摘は安全な操作であるため、このスキルは 自動実行 され、直接呼び出せるだけでなく、生成系スキルから 検証ステップとして呼び出される ように設計されています。

このスキルは、このリポジトリにおける アクセシビリティの関心事を担います。生成系スキル (例: ux-login-signup、ux-pricing) はこのスキルに引き継ぎます。また、ヒューリスティクス監査 (ux-heuristics-audit) は、コントラスト / キーボード / スクリーンリーダーに関する詳細を重複して扱うのではなく、意図的にこのスキルに委ねています。呼び出された際は、a11y の完全なパスを実行してください。別のスキルがカバーしていると想定しないでください。

スコープの規律。 直接呼び出された場合 (ユーザーがこの監査を指定した場合) は、この関心事のみ をレビューしてください — 兄弟となる監査を引き込まないでください。他のレンズと並行して実行されるのは、オーケストレーター (ux-design-review) または生成系スキルが docs/orchestration-policy.md に基づいてこのスキルを呼び出す場合のみであり、そこでは Tier B — 提供される (デザインシステムが関与する場合は使用法に絞り込まれる) に位置します。明示的なスコープが常に優先されます。

---

このスキルがデフォルトの動作と比べて変えるもの

デフォルトでは、アクセシビリティに関するフィードバックは部分的かつ曖昧になりがちです — いくつかの明白な指摘 (「alt テキストを追加する」「コントラストを確認する」) だけで、標準も、重大度も、体系的な網羅もありません。このスキルは次の 4 点を強制します。

1. すべての指摘が、違反している WCAG の達成基準とレベルを引用する — 曖昧な提案ではありません。
2. すべての指摘に重大度が付く — アクセスをどれだけ完全に妨げるかに基づくため、リストは優先順位付けされます。
3. すべての指摘に具体的な修正がある — 具体的なマークアップ / デザインの変更です。
4. 監査は体系的である — 以下の 6 カテゴリすべてを網羅するため、明白なもの以外の問題 (フォーカス順序、見出し階層、テーブルのセマンティクス、モーション) も実際に捕捉されます。

---

WCAG の基礎

POUR 原則 — すべての監査項目は、次の 4 つのいずれかに対応します。

• Perceivable (知覚可能) — コンテンツは少なくとも 1 つの感覚 (視覚、聴覚など) を通じて検出できなければならない
• Operable (操作可能) — すべてのインタラクションはマウスなしで (キーボード、スイッチ、音声で) 動作しなければならない
• Understandable (理解可能) — コンテンツと UI は明確で予測可能でなければならない
• Robust (堅牢) — コンテンツはブラウザ、デバイス、支援技術をまたいで動作しなければならない

適合レベル:

• レベル A — 最低限。これが欠けると完全な障壁が生じます (例: alt テキストがない、キーボードアクセスがない)。
• レベル AA — ほとんどの組織が満たすべき法的基準。すべての監査のデフォルト目標 です。
• レベル AAA — 到達目標。高い価値をもたらす場所に選択的に適用します。

デフォルトの監査目標: WCAG 2.1 レベル AA。

---

監査チェックリスト

すべてのカテゴリを順に確認してください — 部分的な網羅は、実際の問題を見逃す主な原因です。各違反について、WCAG の達成基準、重大度 (以下のモデルを参照)、および 修正 を指摘してください。

1. 色とコントラスト

チェック	要件	備考
通常テキストと背景	≥ 4.5:1 (AA) / 7:1 (AAA)	UI 内のすべてのテキストに適用: ボタン、ラベル、カード、ナビ
大きなテキスト (≥ 18pt または ≥ 14pt 太字)	≥ 3:1
アイコン (情報提供またはインタラクティブ)	≥ 3:1	装飾的なアイコンは免除
入力欄の枠線と周囲の背景	≥ 3:1	フォーカスインジケーターを含む
画像上のテキスト	テキストとその背後にある画像部分との間で ≥ 4.5:1	必要に応じて半透明のオーバーレイを使用
選択状態	通常テキストと同じ比率
無効化された要素	コントラスト規則は免除	ただし非アクティブであると認識できる必要がある
ロゴのテキスト	免除	ただしコントラストを維持するのが良い慣行
唯一の区別手段としての色	❌ 決して行わない	常に色をアイコン、パターン、ラベル、またはテキストと組み合わせる
極端なコントラスト (白背景に純黒)	推奨されない	#F8F8F8 に #333 を使用 — AA を超えつつ眼精疲労を軽減

色だけに頼らないでください: エラー状態には赤だけでなく、アイコン + テキストが必要です。チャートには色だけでなく、パターンやラベルが必要です。

---

2. タイポグラフィとテキスト

チェック項目	要件
本文の基本フォントサイズ	16px 以上
行の長さ	45～75 文字（スペースを含む）
テキストの配置	読み方向に従う（LTR → 左揃え、RTL → 右揃え）
見出しが視覚的に区別されている	本文テキストより大きいサイズ、太字、または色の違い
1 ページに 1 つの <h1>	ページタイトルのみ
見出しの階層	レベルを飛ばさない（h1 → h2 → h3、h1 → h3 は不可）
セマンティックな見出しタグ	<h1>～<h6> を使用し、スタイルを適用した <div> や <p> は使わない
言語	平易な言葉遣い、中等教育レベルの読みやすさ
慣用句や比喩表現	避ける — スクリーンリーダーや非ネイティブ話者を混乱させる
書体	文字の字形が明確に区別できる（0 と O、1 と l と I）、大きな x ハイト

---

3. フォーム

チェック項目	要件
キーボード操作	すべてのフィールド、ドロップダウン、チェックボックス、ラジオボタン、ボタンを Tab / Shift+Tab / Enter / 矢印キーで操作可能
フォーカスインジケーター	フォーカスされたすべての要素で表示 — ブラウザのデフォルトを代替なしに削除しない
レイアウト	シングルカラムを推奨。マルチカラムは認知負荷とスクリーンリーダーの混乱を増やす
入力欄の境界	境界線または背景を表示 — ボーダーレスの入力欄は使わない
ラベル	フィールドの外側に配置し、プレースホルダーのみにしない。最低 16px、コントラスト比 4.5:1
プレースホルダーテキスト	補足のみ — 入力時に消えるため、唯一のラベルにしない
オートコンプリート	名前、メール、電話番号、住所、支払い情報に実装する（HTML の autocomplete 属性）
エラー状態	複数の手がかり: アイコン + 太字の境界線 + フィールド固有のメッセージ。色だけに頼らない
エラーの配置	問題のあるフィールドの隣に表示し、aria-describedby でフィールドとエラーを関連付ける
エラーサマリー	送信失敗時にフォームの上部に表示し、各問題フィールドへのアンカーリンクを含める
認証	テキストベースの CAPTCHA は使わない — マジックリンク、OTP、パスキー、生体認証を使用する。パスワードフィールドへの貼り付けをサポートする
モバイルでの片手操作	CTA を下半分の中央ゾーンに配置し、右端のみのボタン配置は避ける

---

4. リンクとナビゲーション

チェック項目	要件
リンクラベル	説明的で具体的に — 「ここをクリック」や「続きを読む」ではなく「料金ガイドをダウンロード」
新しいウィンドウで開くリンク	リンクテキストまたは aria-label でユーザーに警告する:「新しいタブで開きます」
ファイルへのリンク	種類とサイズを明記する:「年次報告書（PDF、2.5 MB）」
生の URL をリンクテキストに	❌ 絶対にしない — スクリーンリーダーが 1 文字ずつ読み上げる
リンクの認識しやすさ	下線 + 色（色だけに頼らない）
フォーカス状態	すべてのリンクとインタラクティブ要素に、視認できる明確なフォーカスリングを表示
href 属性	すべての <a> タグに必須 — クリックハンドラー付きの <div> はリンクではない
文体・トーン	リンクテキストは製品のトーンに合わせるべきだが、常に明確さを優先する
ヘルプリンク	一貫した場所に配置する（フッター、ヘッダーのユーティリティナビ、または常時表示のヘルプアイコン）

---

5. 画像とマルチメディア

チェック項目	要件
情報を伝える画像	意味のある説明を含む alt 属性
装飾的な画像	alt=""（空）— スクリーンリーダーにスキップを指示する
テキストを含む画像	alt テキスト = 画像内の正確なテキスト
自動再生	❌ デフォルトで無効 — ユーザーが再生を開始する
メディアコントロール	再生/一時停止/停止/巻き戻し/音量/ミュート/キャプション — キーボードで操作可能で、十分なサイズとコントラスト
動画キャプション	音声付きのすべての録画済み動画に必須
音声トランスクリプト	音声のみのすべてのコンテンツに必須
点滅・ストロボコンテンツ	❌ 3 Hz を超える点滅、またはいかなる速度の赤い点滅も禁止
アニメーション（GIF、SVG、CSS）	明暗のストライプのペアは 5 組以下にし、一時停止/停止する方法を提供する
アイコン	テキストラベルと組み合わせる。情報を伝えるアイコンには aria-label または title が必要
スワイプジェスチャー	両方向をサポートするか、代替のタップターゲットを提供する

---

6. テーブルとリスト

チェック項目	要件
データテーブル	<table> 要素を使用すること — レイアウト目的でテーブルを使用しない
テーブルのキャプション	<table> の開始タグの直後に <caption> を配置
ヘッダーセル	scope="col" または scope="row" を指定した <th> — 空にしない
複雑なテーブル	セルの結合や多段ヘッダーは避ける。必要であればより単純なテーブルに分割する
セルの幅	px ではなく % を使用 — ブラウザのリフローが可能になる。セルの高さは手動で設定しない
リスト	<ul>、<ol>、<dl> を適切に使用 — スタイルを適用した <div> の行で代用しない
順序なしリスト	順序が重要でない項目に使用
順序付きリスト	連続する手順、ランキング、指示に使用
説明リスト	用語集、FAQ、キーと値のメタデータには <dl> / <dt> / <dd> を使用

---

重大度の評価

各指摘は、アクセスをどの程度完全に妨げるかとどの WCAG レベルに違反するかによって評価します。

重大度	意味
Critical	一部のユーザーにとってアクセスを完全に妨げるもの。通常は レベル A の違反 — キーボードでアクセスできない、情報を伝える画像に代替テキストがない、キャプションがない、キーボードトラップなど。出荷前に修正してください。
Major	大きな支障となるもの。ユーザーが回避できる場合もありますが、回避を強いるべきではありません。通常は レベル AA の違反 — コントラストが 4.5:1 未満、プレースホルダーをラベルとして使用、色のみによるエラー状態、フォーカスインジケーターの欠如など。
Minor	気づくが影響は小さいもの、またはベストプラクティス / AAA の改善 — 行長がやや短い、純黒のテキストが強すぎる、理想的ではないが機能するラベルなど。

判断に迷った場合は、修正の容易さではなく、ユーザーへの影響（タスクを妨げるのか、単に支障を増やすだけなのか）で評価してください。

---

監査の出力形式

## Accessibility Audit — [Component / Screen Name]
Context: [platform · WCAG target (default AA) · design or code]

### Critical (blocks access entirely)
- [Issue]: [what's wrong] → [fix] — WCAG [X.X.X]

### Major (significant friction)
- [Issue]: [what's wrong] → [fix] — WCAG [X.X.X]

### Minor (best practice / AAA)
- [Issue]: [what's wrong] → [fix] — WCAG [X.X.X]

### Passed ✓
- [what's already working]

常に、全体的な WCAG AA 準拠状況と、そこに到達するための主要な修正を述べた 1 行のサマリーで締めくくってください。

---

優れた監査の実施方法

1. コンテキストを確立する。 プラットフォーム（ウェブ / モバイル / ネイティブ）、目標レベル（既定では AA — 依頼があった場合のみ AAA にする）、およびデザインを監査するのか実際のコードを監査するのか（キーボード順序や aria-* など一部のチェックはコードにのみ適用されます）を確認します。
2. 6 つのカテゴリーすべてを網羅する。 このスキルが既定のレビューよりも価値を持つのは網羅性です — コントラストと代替テキストで止めないでください。
3. 労力ではなく障壁で評価する。 1 行の alt の修正でも Critical になり得ます。
4. 修正は具体的に示す。 「アクセシブルにしてください」ではなく、正確な変更（マークアップ、属性、比率、またはデザインの調整）を提示してください。
5. ツールの限界に言及する。 自動スキャナーが検出できるのは問題の約 30〜40% にすぎません — フォーカス順序、代替テキストの品質、読み上げ順序の手動レビューは依然として重要です。

---

推奨ツール

自動スキャン用（問題の約 30〜40% を検出）:

• WAVE（ブラウザ拡張機能） — 視覚的なインジケーターを重ねて表示し、違反した WCAG 基準を参照できる
• axe DevTools（Chrome 拡張機能） — 正確で開発者に使いやすい。axe-core を搭載
• Google Lighthouse（Chrome DevTools → Lighthouse タブ） — アクセシビリティ + SEO + パフォーマンスを一度に確認

デザインでのコントラスト確認用:

• Able（Figma プラグイン） — コントラストチェッカー + 色覚シミュレーター
• Stark（Figma / Sketch / Adobe XD） — コントラスト、視覚シミュレーター、フォーカス順序、代替テキストの注釈
• WCAG Color Contrast Checker（Chrome 拡張機能） — ブラウザ内でリアルタイムに比率を確認

スクリーンリーダーテスト用:

• VoiceOver（macOS/iOS、標準搭載） — VO + 矢印キーでナビゲート
• NV Access / NVDA（Windows、無料） — 最も広く使われている Windows のスクリーンリーダー

発作リスク用:

• PEAT（ダウンロード可能） — 光過敏性てんかんの誘因がないか動画 / アニメーションを分析
• Harding Test — 放送 / 動画コンテンツ向けのオンライン有料サービス

---

一般的な do/don't パターン

❌ しない	✅ する
エラーを赤いテキストだけで示す	赤い枠線 + 警告アイコン + 説明的なメッセージ
<a>ここをクリック</a>	<a>オンボーディングガイドをダウンロード (PDF、1.2 MB)</a>
<img src="chart.png"> (alt なし)	<img src="chart.png" alt="地域別の第3四半期売上高を示す棒グラフ">
alt テキスト付きの装飾画像	<img src="bg-swoosh.svg" alt="">
純白 #FFF 上の純黒 #000	オフホワイト #F8F8F8 上のダークグレー #333
プレースホルダーだけをラベルにする	フィールドの上に常時表示されるラベル + 任意のプレースホルダー
<h1> から <h3> へのジャンプ	常に <h1> → <h2> → <h3> の順で使用する
ページレイアウトのためのテーブル	レイアウトには CSS Grid または Flexbox を使用し、<table> はデータのみに使用する
動画の自動再生	コントロールを上部に表示し、ユーザーが再生を開始する
色だけのグラフの凡例	色に加えてパターン、図形、またはデータラベルを追加する
明らかな問題だけを報告する	6 つのカテゴリすべてを確認し、障壁ごとに評価し、基準を引用する

---

出典レッスン (Uxcel)

• アクセシビリティ入門
• アクセシビリティツール
• 色のアクセシビリティ
• テキストのアクセシビリティ
• フォームのアクセシビリティ
• リンクのアクセシビリティ
• マルチメディアのアクセシビリティ
• テーブルとリストのアクセシビリティ