Accessibility Fixer
あなたはアクセシビリティ修正を実行しています。入力は修正作業指示書(mitigations.md、a11y-eval によって生成されます)であり、出力は、評価ツールを再実行して検証した上で、実際のユーザーにとって問題が表示されなくなるような最小限のソース変更です。
まだ作業指示書が存在しない場合は、まず次のコマンドで生成します:a11y-eval のチェックアウト内で node src/cli.ts --repo <dir>(または実行中のアプリケーションの場合は --url)、または既存のレポートから node src/cli.ts mitigate --report <dir> を実行します。
修正手順
アクセシビリティ違反を、実際のアクセスを復元する最小の変更で、以下の優先順位で修正します:
- ネイティブセマンティクスを優先する。 擬似ウィジェットを実際の要素に置き換えます:
div onclick→<button type="button">、ナビゲーション用span→<a href>、ラベルのない入力 →<label for>+ 入力。ネイティブ要素はキーボード操作、ロール、名前、状態を無料で提供します。ARIA による改造は最後の手段であり、最初の選択肢ではありません。 - 属性よりもコンテンツを優先する。 代替テキスト、ラベル、リンクテキスト、エラーメッセージは実際の情報を伝える必要があります(「第3四半期の収益は前年比12%増」)。要素そのものを言い換えてはいけません(「チャート」「画像」「リンク」)。周囲の文脈から記述し、意味が推測できない場合は人間にフラグを立てます。
- トークン/コンポーネントレベルで修正する。 同じルールが複数のページで発生する場合、共通の原因(CSS カスタムプロパティ、ベースコンポーネント、レイアウトラッパーなど)を見つけ、一度で修正します。40 箇所の呼び出し箇所を個別に修正するのではなく、根本原因が1つのコンポーネントである場合はそれを修正します。
- ユーザーが実行または読み取れるすべてを維持する。 テキストコンテンツ、インタラクティブ機能、視覚的階層は修正後も保持されなければなりません。問題を黙らせるために機能を削除したり、要素を非表示にしたり(
display:none、aria-hidden)、フォーカス可能性を削除したりすることは失敗した修正です。 - コントラストは計算であって、美的要素ではない。 比率を計算し(通常テキストは4.5:1以上、大きなテキスト/UIコンポーネントは3:1以上)、意図した色相の最も近い合格色合いを選択します。白黒に飛びついてはいけません。
- フォーカスはどこでも可視でなければならない。 包括的な
outline: noneを削除し、:focus-visibleのアウトライン(2px以上、オフセット、周囲とのコントラスト3:1以上)を追加します。タブ移動で確認します。 - 変更セットごとに1つの作業グループ。 グループのリストされたすべてのインスタンスを修正し、次のグループを開始する前に検証します。無関係なグループをまとめると、リグレッションの追跡が不可能になります。
- 作業指示書の 「禁止事項(Do NOT)」 はすべて拘束力があります。修正と落とし穴が競合する場合、落とし穴が優先されます。立ち止まってアプローチを再検討してください。
ワークフロー
- 作業指示書を最初から最後まで読みます。 グループは影響度と到達範囲で並べられています。順序を尊重してください。
- ソース内の各インスタンスを特定します: 静的検出結果には
file:line:colが含まれます。実行時検出結果には CSS セレクタと HTML スニペットが含まれます。リポジトリ内でスニペット、そのクラス名、または近くのテキストを grep します。 - グループの修正をすべてのインスタンスに適用します。 上記の修正手順とグループの手順/落とし穴に従います。
- バッチを検証します。 作業指示書の検証コマンド(元の評価 +
--baseline <previous report>)を再実行します。グループのルールが「修正済み(fixed)」に表示され、newの検出結果がゼロになった時点で、そのグループはクリアされたと見なされます。 - 手動不合格セクション: レビューアの証拠は仕様です。そこから変更を導き出し、適用し、その基準は人間/エージェントによる再レビューが必要であることを注記します。自動化では確認できません。
- 停止条件: 意味を推測できないインスタンス(未知の画像の代替テキスト、曖昧なフィールドのラベルなど)には
TODO(a11y)コメントとサマリーへのメモを追加します。間違った推測は、フラグが立てられたギャップよりも悪い結果をもたらします。 - レポート: 修正前後のスコア、クリアされたグループ、新たな検出結果(ゼロであるべき)、人間にフラグを立てた項目を報告します。
VLM サスペクトグループ
作業指示書には vlm-* グループが含まれる場合があります(評価が --vlm で実行された場合のみ)。これらのインスタンス行には、ビジョンモデルの推論が含まれます。vlm-alt-quality-suspect の場合は提案された代替テキストが含まれます。提案はドラフトとして扱い、実際の画像と照らし合わせて検証してから適用し、ページ自体から確認できない VLM 提案の変更は決して適用しないでください。
やってはいけないこと
- 失敗:ネイティブ要素が機能するのに
tabindex+ キーハンドラをdivに無理やり取り付ける - 失敗:情報画像に
alt=""を設定する、aria-labelが可視テキストと重複して不一致を起こす - 失敗:ルールを抑制したり、要素を削除したり、
aria-hiddenで検出結果を消す - 失敗:比率を計算せずに目視でコントラストを調整する
- 失敗:ルールが消えたことを示す検証再実行なしで完了を主張する
関連スキル
a11y-evaluator— このスキルが消費するレポートと作業指示書を生成します