fixing-accessibility

アクセシビリティの修正

使用するタイミング

ARIA ラベル、キーボード操作、フォーカス管理、色のコントラスト、フォームエラーなど、HTML のアクセシビリティの問題を監査して修正する必要がある場合に、このスキルを使用します。インタラクティブなコントロール、フォーム、ダイアログを追加する場合や、WCAG への準拠状況を確認する場合にも使用します。

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

使い方

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

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

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

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

適用するタイミング

以下の場合に、これらのガイドラインを参照してください。

• ボタン、リンク、入力欄、メニュー、ダイアログ、タブ、ドロップダウンを追加または変更するとき
• フォーム、バリデーション、エラー状態、ヘルパーテキストを作成するとき
• キーボードショートカットやカスタム操作を実装するとき
• フォーカス状態、フォーカストラップ、モーダルの動作を扱うとき
• アイコンのみのコントロールを表示するとき
• ホバー時のみの操作や非表示コンテンツを追加するとき

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

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

クイックリファレンス

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

• すべてのインタラクティブなコントロールに、アクセシブルな名前を付ける必要があります
• アイコンのみのボタンには、aria-label または aria-labelledby が必要です
• すべての input、select、textarea にラベルを付ける必要があります
• リンクには意味のあるテキストを使用します（「ここをクリック」は不可）
• 装飾用アイコンには aria-hidden を設定します

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

• 完全なキーボードサポートなしで、ボタンの代わりに div や span を使用しないでください
• すべてのコントロールにキーボードでアクセスできる必要があります。複合ウィジェットでは、Tab の停止位置を 1 つにし、矢印キーによる移動方法を文書化してもかまいません
• キーボード利用者にフォーカスを視覚的に示す必要があります
• 0 より大きい tabindex を使用しないでください
• 該当する場合、Escape キーでダイアログやオーバーレイを閉じられるようにします

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

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

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

• role に基づく回避策より、ネイティブ要素（button、a、input）を優先します
• role を使用する場合は、必須の 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>
  <label for="email">Email</label><input id="email" type="email" aria-describedby="email-err" aria-invalid="true" /> <span id="email-err">Invalid email</span>

レビューガイダンス

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

制限事項

• このスキルは、タスクがその上流のソースおよびローカルプロジェクトのコンテキストに明確に一致する場合にのみ使用してください。
• 変更を適用する前に、コマンド、生成されたコード、依存関係、認証情報、および外部サービスの動作を検証してください。
• 例を、環境固有のテスト、セキュリティレビュー、または破壊的もしくは高コストな操作に対するユーザーの承認の代わりとして扱わないでください。