アクセシビリティのlintとCIゲート

テストはコードを書いた後に実行されますが、リンターなら入力中に問題を指摘できます。問題を早く見つけるほど、修正コストは下がります。

Reactプロジェクトでは、eslint-plugin-jsx-a11y ESLintプラグインが、エディター上でJSXにありがちなアクセシビリティのミスがないか確認します。

jsx-a11yは、alt propのない画像、hrefのないアンカー、インタラクティブでない要素に設定されたクリックハンドラーなどを検出します。

alt propを追加すると警告は消えます。修正はごく小さく、コードがリリースされる前に問題を確認できました。

リンターが読み取るのは、描画後のページではなくソースコードです。コントラストやフォーカス順序は測定できないため、axeのスキャンを補完するものであって、置き換えるものではありません。

CIゲートとは、コードをマージする前に合格しなければならないチェックです。アクセシビリティテストに失敗すると、プルリクエストはそのままブロックされます。

ゲートがなければ、監査の失敗は誰も気に留めない警告にすぎません。ゲートによって、アクセシビリティは単なる丁寧な提案ではなく必須要件になります。

CIワークフローで依存関係をインストールし、lintとテストのコマンドを実行します。ゼロ以外の終了コードが返ると、ジョブは自動的に失敗します。

ビルドが赤になると、作成者はログで失敗したルールと要素を正確に確認できます。フィードバックループは数週間ではなく数分です。

誤った理由で失敗するゲートは無効化されてしまいます。テストを安定させ、対象範囲を適切に絞り、チームが赤いビルドを本当の問題の兆候として信頼できるようにしてください。

最も強力な構成は、コーディング中のlint、テストでのaxe、マージ時のCIゲートを組み合わせるものです。それぞれの層が、他の層では見逃す問題を検出します。

コーディング中にlintを実行し、テストでaxeを動かし、CIでマージをゲートします。これらのガードレールを重ねることで、アクセシビリティのリグレッションがリリースされるのを防ぎます。🚦