mcpField
A
accessibility-fix

accessibility-fix

github.com/accesslint開発114984 回インストール9 週間前に更新
リポジトリ

accessibility-fix について

accessibility-fix は、指定対象または提示された指摘リストに基づいてアクセシビリティ違反を修正するスキルです。基準状態を確認し、対象を絞って編集した後、再監査で未解決や新規の違反を確認します。

主な機能

  1. 01指摘リストまたは対象場所を受け付け
  2. 02ライブページやHTMLを監査して基準を作成
  3. 03機械的な修正を適用しTODOを記録
  4. 04再監査で変更を検証
  5. 05適用内容と保留事項を報告

活用シーン

  1. 01アクセシビリティスキャンの違反を修正
  2. 02指定URLやファイル群を修正
  3. 03編集後にページの回帰を確認

インストール

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

$npx skills add https://github.com/accesslint/skills --skill accessibility-fix

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

詳細

このスキルは、アクセシビリティ違反を修正します。ベースラインを取得し、編集し、検証します。修正のみを行います。問題を特定するには、accesslint:accessibility-scan(1 ページ、自動)、accesslint:accessibility-inspect(1 ページ、手動)、または accesslint:accessibility-audit(サイト全体、WCAG-EM)を使用してください。リグレッションを確認するには、accesslint:accessibility-diff を使用してください。ここで実行するエンジンはループ内の処理、つまり修正前のベースライン取得と修正後のチェックであり、レポートではありません。

共通の規約(根拠に基づき、内容を決して創作しない):../shared/methodology.md。

大規模な修正では、コンテキストを分離するため Task 経由で実行してください。手順は同じです。

入力

  • 検出結果の作業リスト(accessibility-scan、accessibility-inspect、accessibility-audit から取得したもの、または貼り付けられたもの):そのまま適用します。ベースラインはすでに取得済みです。
  • 対象(URL、設定内の対象名、ファイル、またはディレクトリ):まず監査してベースラインを取得し、その後修正します。

どちらも指定されていない場合は、何を修正すればよいか尋ねてください。求められていないのに、コードベース全体をくまなく調査しないでください。

フローの選択(ベースライン取得と検証)

  1. 任意の URL には audit_live を使用します。デバッグ可能な Chrome を用意し(接続可能なものがなければヘッドレスで自動起動)、実際の DOM を監査します。対象範囲を絞るには selector を、非同期コンテンツを待つには wait_for を使用します。実際の DOM なら、ソースからは分からない問題も検出できます。
  2. 生の HTML 文字列、ファイル(まず Read で読み込みます)、または文字列にレンダリングされた JSX には audit_html を使用します。

認証済みセッションの場合は、ユーザーにデバッグ可能な Chrome を画面表示モードで起動してもらい(npx @accesslint/chrome ensure --headed)、サインイン後に audit_live({ url, port }) を呼び出して接続します。

手順

  1. ベースラインを取得します。format: "compact" で監査し、違反の一覧(それぞれのルール ID とセレクター)を記録します。作業リストを受け取っている場合は、この手順を省略します。
  2. 適用します。違反ごとに、次の手順を行います。
    • Source: 行がある場合は、その行に示されたファイルを開きます。複数のファイルが記載されている場合(← 区切り)、最初のファイルが JSX リテラルで、残りはそれを含むコンポーネントです。Symbol を使用して対象を特定します。
    • ない場合は、安定したフック(data-testid、id、aria-label)、次に表示テキスト、最後にツリー内の位置の順で grep します。
    • Fixability: フィールドと Fix: フィールドを使用します。mechanical の修正は指示どおり適用し、contextual または visual の場合はルール ID を含む TODO を残します。内容(代替テキスト、ラベル、リンクテキスト)を創作しないでください。
    • 同じファイルへの編集は、1 回の操作にまとめます。
    • 明らかな対象範囲外のファイルを編集する前、または機械的な修正が約 10 件を超える前に、対象範囲を確認してください。
  3. 検証します。同じ監査を再実行し、ベースラインと比較します。対象の違反がすべて解消され、新たな違反がないことを確認します。URL で新規・修正済み・既存の違反を正確に比較するには、目視で確認するのではなく accesslint:accessibility-diff を使用します。

Source: 行は React DevTools のファイバーに由来し、React の開発ビルドに対する実 DOM 監査でのみ表示されます。静的監査には含まれないため、セレクターを使用してください。ルールが不明な場合は、explain_rule({ id }) を使用します。

中止するタイミング

  • Fix: の指示がない違反には TODO を残し、推測で修正しないでください。
  • 検証に失敗した場合(新たな違反が発生した、または対象の違反が残っている場合)は、その旨を報告して中止してください。黙って修正を繰り返さないでください。

出力

サイクルごとに、使用したフロー、影響度別の違反、適用した修正(ファイルとルール)、保留した項目(TODO とその理由)、修正前後の件数を示します。

コメント