axeは、ウェブページにあるアクセシビリティ上の問題を自動で見つけるためのチェックツールです。ただし、結果に表示された件数だけを見ても、どこから直すべきか、手動確認が必要かまでは判断できません。
この記事では、axeの基本的な使い方、4つの結果ステータスの読み分け、修正の優先順位を解説します。初めて使う方でも、チェック結果を次の作業につなげられるように整理しました。
axeアクセシビリティチェックツールとは
axe（Accessibility Engine）は、ウェブアクセシビリティの確認を支援する自動チェックツールです。ブラウザ拡張機能や開発者ツールからページを検査し、修正を検討すべき箇所を見つけるために利用できます。
ウェブアクセシビリティとは、年齢や障害の有無、利用する端末や操作方法にかかわらず、必要な情報や機能を利用しやすくする考え方です。axeは、その技術的な指針となるWCAG（Web Content Accessibility Guidelines）などを踏まえたルールでページを確認します。
axeが得意なのは、コードや画面上の要素を一定のルールで繰り返し確認することです。一方、実際の操作が分かりやすいか、読み上げ内容が意図どおりかといった、人の判断が必要な点は自動チェックだけでは完結しません。axeは合否を一度で決める道具ではなく、問題発見と改善を始めるための道具と捉えると使いやすくなります。
axeの基本的な使い方
ブラウザ拡張機能や開発者ツールでaxeを利用する場合は、次の流れで確認します。
- 確認するページを表示する
まず、検査したいページをブラウザで開きます。入力欄やメニューなど、確認したい要素が見える状態にしておきます。 - axeのチェックを実行する
ブラウザ拡張機能または開発者ツールから検査を開始します。 - Violationsを確認する
指摘されたルール、該当する要素、問題の内容を読み、利用者への影響を考えます。件数だけで判断せず、同じ原因が複数箇所に現れていないかも確認します。 - Incompleteを手動で確認する
自動判定できなかった項目は、キーボード操作や読み上げなど、指摘内容に合う方法で確かめます。 - 修正後にもう一度実行する
修正した箇所を再検査し、別の機能に影響していないかも確認します。
axeだけでなく、確認範囲の決め方や手動検査を含む全体像は、ウェブアクセシビリティチェックの進め方でも詳しく紹介しています。
4つの結果ステータスの意味
axeの結果は、主にViolations、Passes、Inapplicable、Incompleteの4種類に分かれます。名前だけでは誤解しやすいため、「何を示すか」と「次に何をするか」をセットで確認しましょう。
| ステータス | 意味 | 次の対応 |
|---|---|---|
| Violations | 自動チェックのルールに合格しなかった項目 | 該当箇所と利用者への影響を確認し、修正を進める |
| Passes | 実行したルールに合格した項目 | 原則としてそのルールへの修正は不要。変更後は再確認する |
| Inapplicable | そのルールを適用する対象がページ内に見つからなかった項目 | 通常は対応不要。必要な要素そのものが欠けていないかだけ確認する |
| Incomplete | 自動チェックだけでは合否を確定できなかった項目 | 指摘内容に応じた手動確認を行う |
Violations：修正対象を示す
Violationsには、自動チェックで問題が検出された項目が表示されます。例として、テキストのコントラスト不足、画像のalt属性不足、キーボードで操作できないインタラクティブ要素などがあります。
まず確認したいのは、問題がどの利用者の、どの操作を妨げるかです。同じViolationsでも影響は一様ではありません。重要な操作を完了できない問題や、多くのページに共通する問題から優先して対応すると、修正方針を立てやすくなります。
Passes：そのルールに合格したことを示す
Passesは、実行された個別のルールに合格した項目です。たとえば、検査対象の画像にalt属性が設定されている場合などが該当します。
ただし、Passesが多いことだけで、ページ全体のアクセシビリティが保証されるわけではありません。alt属性が存在していても、その文章が画像の目的を適切に伝えているかは別に確認する必要があります。ページを変更した後は、合格した項目も再検査します。
Inapplicable：そのページでは対象外だったことを示す
Inapplicableは、ルールを適用する対象がページ内にない場合に表示されます。たとえば、フォーム要素がないページでは、フォームに関する一部のルールは対象外になります。
通常、Inapplicableそのものを修正する必要はありません。ただし、本来あるべき入力欄や見出しなどが実装から抜けている場合は、対象外という結果だけでは不足を発見できません。ページの目的と照らして確認しましょう。
Incomplete：人による判断が必要であることを示す
Incompleteは、自動チェックだけでは合否を確定できない項目です。カスタムUIに設定したARIA属性が適切か、画面上のラベルと読み上げ内容が一致するかといった確認では、人の判断が必要になることがあります。
Incompleteを「問題なし」と扱わず、指摘された要素を実際に操作してください。特にキーボードで目的の要素へ移動できるか、現在位置を確認できるかは重要です。詳しい確認方法は、キーボード操作とフォーカス表示の確認ポイントも参考になります。
修正の優先順位を決める考え方
結果一覧を上から機械的に直すのではなく、利用者への影響と確認の必要性で整理します。
- 操作や情報取得を妨げるViolationsを優先する
主要なボタンを操作できない、必要な内容を読み取れないなど、利用目的の達成を妨げる問題を先に扱います。 - 共通する原因をまとめて修正する
同じ部品やテンプレートから生じた指摘は、原因となる実装を特定してまとめて見直します。 - Incompleteを手動確認する
自動判定できない項目を放置せず、キーボード操作や読み上げなどで確かめ、必要な修正を決めます。 - 修正後に再検査する
Violationsが解消したかを確認し、変更によって新しい問題が生じていないかも見直します。
axeだけで確認を終えない
自動チェックは、一定のルールを素早く繰り返し確認するのに役立ちます。一方で、操作の流れが理解しやすいか、視覚的なラベルと読み上げが対応しているか、キーボードだけで目的を達成できるかなどは、実際の操作を含む確認が欠かせません。
- Tabキーなどで操作対象へ順番に移動できるか
- フォーカスの現在位置を画面上で把握できるか
- 画像の代替テキストが画像の役割を伝えているか
- 入力欄やボタンの名前と目的が理解できるか
- 修正後も主要な操作を完了できるか
axeの結果を手動確認の入口として使うことで、「指摘を消すこと」ではなく「利用時の障壁を減らすこと」に改善の軸を置けます。
axeを継続して使う利点
- 問題を早い段階で見つけやすい：実装中から確認すれば、公開前に修正候補を把握できます。
- 同じ条件で再確認しやすい：修正前後や更新後に、同じルールで検査できます。
- チームで課題を共有しやすい：対象要素と指摘内容を手がかりに、設計、実装、確認の担当者が対応を相談できます。
ただし、axeの結果だけで特定の基準や法令への適合を判断することは避け、対象範囲と必要な確認方法を別途整理してください。
まとめ
axeを使うときは、Violationsの件数だけでなく、Passes、Inapplicable、Incompleteの意味も正しく読み分けることが大切です。Violationsは利用者への影響を見て修正し、Incompleteは手動で確認します。PassesとInapplicableも、ページ全体が問題ないことを保証する結果ではありません。
「自動チェックを実行する、結果を読み解く、手動で確かめる、修正後に再検査する」という流れを繰り返すと、アクセシビリティ改善を日々の開発や運用に組み込みやすくなります。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールを提供しています。アクセシビリティ向上にご興味がある方は、詳細をご覧ください。