fixing-accessibility

アクセシビリティの修正

アクセシビリティの問題を修正します。

使用方法

• /fixing-accessibility この会話で行うすべての UI 作業に、これらの制約を適用します。

• /fixing-accessibility <file> 以下のすべてのルールに照らしてファイルをレビューし、次の内容を報告します。

  • 違反箇所（該当する行またはスニペットを正確に引用）
  • 重要である理由（短い文を1つ）
  • 具体的な修正方法（コードレベルの提案）

UI の大部分を書き換えないでください。最小限かつ対象を絞った修正を優先してください。

適用する場面

次の作業を行う際に、これらのガイドラインを参照してください。

• ボタン、リンク、入力欄、メニュー、ダイアログ、タブ、ドロップダウンの追加や変更
• フォーム、バリデーション、エラー状態、補助テキストの作成
• キーボードショートカットやカスタム操作の実装
• フォーカス状態、フォーカストラップ、モーダルの動作への対応
• アイコンのみのコントロールの表示
• ホバー時のみの操作や非表示コンテンツの追加

優先度別のルールカテゴリ

優先度	カテゴリ	影響
1	アクセシブルな名前	重大
2	キーボード操作	重大
3	フォーカスとダイアログ	重大
4	セマンティクス	高
5	フォームとエラー	高
6	通知	中〜高
7	コントラストと状態	中
8	メディアと動き	低〜中
9	ツールの境界	重大

クイックリファレンス

1. アクセシブルな名前（重大）

• すべてのインタラクティブなコントロールに、アクセシブルな名前を付ける
• アイコンのみのボタンには aria-label または aria-labelledby を付ける
• すべての入力欄、セレクト、テキストエリアにラベルを付ける
• リンクには意味のあるテキストを使用する（「ここをクリック」は不可）
• 装飾用アイコンには aria-hidden を付ける

2. キーボード操作（重大）

• 完全なキーボード操作に対応させずに、ボタンの代わりとして div や span を使わない
• すべてのインタラクティブな要素に Tab キーで移動できるようにする
• キーボード利用者にフォーカスを視認できるようにする
• 0 より大きい tabindex を使用しない
• 該当する場合、Escape キーでダイアログやオーバーレイを閉じられるようにする

3. フォーカスとダイアログ（重大）

• モーダルが開いている間、フォーカスをモーダル内に閉じ込める
• 閉じたときに、トリガーにフォーカスを戻す
• ダイアログ内の初期フォーカスを設定する
• ダイアログを開いたときに、ページが予期せずスクロールしないようにする

4. セマンティクス（高）

• ロールを使った回避策より、ネイティブ要素（button、a、input）を優先する
• ロールを使用する場合は、必須の aria 属性を設定する
• リストには li を含む ul または ol を使用する
• 見出しレベルを飛ばさない
• 該当する場合、表の見出しには th を使用する

5. フォームとエラー（高）

• aria-describedby を使用してエラーをフィールドに関連付ける
• 必須フィールドが通知されるようにする
• 無効なフィールドには aria-invalid を設定する
• 補助テキストを入力欄に関連付ける
• 送信操作が無効な理由を説明する

6. 通知（中〜高）

• 重大なフォームエラーには aria-live を使用する
• 読み込み状態には aria-busy またはステータステキストを使用する
• 重大な情報を伝える唯一の手段としてトーストを使用しない
• 展開可能なコントロールには aria-expanded と aria-controls を使用する

7. コントラストと状態（中）

• テキストとアイコンに十分なコントラストを確保する
• ホバー時のみの操作にはキーボードでの代替操作を用意する
• 無効状態を色だけに依存させない
• 視認できる代替手段を用意せずにフォーカスのアウトラインを削除しない

8. メディアと動き（低〜中）

• 画像には適切な alt テキストを設定する（意味のあるテキスト、または空）
• 音声がある動画には、該当する場合に字幕を用意する
• 不要な動きには prefers-reduced-motion を尊重する
• 音声付きメディアの自動再生を避ける

9. ツールの境界（重大）

• 変更は最小限にし、無関係なコードをリファクタリングしない
• ネイティブのセマンティクスで問題を解決できる場合、aria を追加しない
• 要求されない限り、UI ライブラリを移行しない

よくある修正

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


 <div onclick="save()">Save</div>
  <button onclick="save()">Save</button>


 <input id="email" /> <span>Invalid email</span>
  <input id="email" aria-describedby="email-err" aria-invalid="true" /> <span id="email-err">Invalid email</span>

レビューの指針

• 重大な問題（名前、キーボード操作、フォーカス、ツールの境界）を最初に修正する
• aria を追加する前に、ネイティブ HTML を優先する
• 該当するスニペットを正確に引用し、問題点を述べ、小規模な修正を提案する
• メニュー、ダイアログ、コンボボックスなどの複雑なウィジェットには、カスタムの動作より、確立されたアクセシブルなプリミティブを優先する