結果を理解する
Axe Developer Hubでアクセシビリティ問題を表示して管理
ツールキットのインストール手順を完了すると、テストスイートを実行するたびにDeveloper Hubにプッシュされる結果が生成されます。Developer Hubでは、新しいアクセシビリティ問題と既存の問題を表示し、時間の経過による傾向を追跡できます。
プロジェクト構造の理解
Developer Hubは、エンドツーエンドテストがバージョン管理にGitを使用しているかどうかに応じて、アクセシビリティデータを異なる形式で整理します。
Gitを使用する場合、プロジェクトの異なるブランチや、それらのブランチで行われた個々のコミットを見ることができます。構造は次のとおりです:
プロジェクト → ブランチ → コミット → イシュ―一覧 → イシュ―詳細
Git のデータは Axe Watcher プロジェクトのために自動的に収集されます。Git 情報はエンドツーエンドテストに対応しますが、実際にテストされているコードと完全には一致しないことがあります。もしコードがエンドツーエンドテストとは別のリポジトリにある場合です。
WatcherプロジェクトのGitデータ収集をオフにするには、APIを使用してください。
ウェブプロジェクトでGitを使用していない場合、またはモバイルプロジェクトを表示している場合、個別のテスト実行を確認し、各実行で発見された問題に移動することができます。構造は次のとおりです:
プロジェクト → テスト実行 → イシュ―一覧 → イシュ―詳細
結果の操作
プロジェクトを開くと、ブランチのリスト(Gitプロジェクト)またはテストラン(Gitを使用しないプロジェクト)が表示されます。
結果を一目で確認
アクセシビリティテストから返される以下の情報を確認できます。
- Gitプロジェクト: ブランチ名、最新のコミット SHA、実行中のエンドツーエンドテストのコミットメッセージ
- Gitを使用しないプロジェクト: テスト実行のタイムスタンプ
- アクセシビリティしきい値 を超える問題の数
- 使用しているアクセシビリティツールキットのパッケージ情報とバージョン情報
- 合計問題数とスキャン回数を示す比較サマリー
- 新しく導入された問題と解決された問題の数(ウェブプロジェクトのみ)
- アクセシビリティスコア(モバイルプロジェクトのみ):セッションのスキャンのアクセシビリティがどれだけの割合であったかを示すパーセンテージ(0–100%)、詳細は以下の アクセシビリティスコア(モバイルプロジェクトのみ)
- 'コミットを見る'ボタン (Gitプロジェクトのみ)で個々のコミットを掘り下げる
- '問題を見る'ボタンで完全な問題リストを表示
アクセシビリティスコア(モバイルプロジェクトのみ)
アクセシビリティスコアは、モバイルセッションレポートページに表示されるパーセンテージ(0-100%)です。スコアが高いほど、セッション全体で重大なアクセシビリティ問題が少ないことを意味します。
スコアは2ステップで計算されます:
-
各スキャンは評価されます 最も深刻なアクセシビリティ問題に基づいて:
- 100% — 軽微な問題のみ、または問題なし
- 80% — 少なくとも1つの中程度の問題が存在するが、重大または致命的な問題はなし
- 40% — 少なくとも1つの重大な問題が存在するが、致命的な問題はなし
- 0% — 少なくとも1つの致命的な問題が存在する
-
すべてのスコアのセッションスコアは平均値です。
例として、3つのスキャンを含むセッションで、1つが軽微な問題のみ、1つが重大な問題、1つが致命的な問題を持っている場合、スコアは(100 + 40 + 0)/ 3 ≈ 47% となります。
スキャンがないセッションは、0%ではなく空の状態が表示されます。
完全な式の仕様については、Axe DevTools Mobile のドキュメントでスコアを計算するを参照してください。
アクセシビリティスコアは、モバイルセッションページにのみ表示されます。
セッション名の変更
デフォルトでは、セッションはGitプロジェクトの場合はgitブランチとコミット情報で、Gitを使用しないプロジェクトの場合はタイムスタンプで識別されます。特定のスキャンランを簡単に識別するために、任意のセッションにカスタム表示名を設定できます。
カスタム名は、セッションが参照されるDeveloper Hub全体で表示されます: ページヘッダー、パネルタイトル、パンくずリスト、比較ラベル。元のgitまたはタイムスタンプ識別子は、問題ページのメタデータエリアに表示されたままです。
セッション名を変更するには、その問題ページを開き、ページヘッダーの編集ボタンをクリックします。プロジェクト管理者、貢献者、および組織管理者は、プロジェクト内の任意のセッションの名前を変更できます。
パイプライン情報
Git データを Axe Watcher と共に使用するテストが行われているチームの場合、すべての実行はデフォルトブランチでの CI/CD 実行と比較することができ、新しくマージされたコードが追加のアクセシビリティ問題を導入していないことを確認できます。比較を設定するには、プロジェクト管理者が Watcher をリポジトリのデフォルトブランチで実行するよう設定する必要があります - 通常、これは main(または master)ブランチです。このツールキットのインスタンスは、パイプライン実行として設定される必要があります。
デフォルトブランチ上の指定されたパイプライン実行からスキャンデータが届くと、その結果がページ上部に表示されます。ユーザーはAPIキーによってさまざまな結果セットを表示し、デフォルトブランチのパイプライン実行と比較することができます。
継続的インテグレーション(CI)環境でのAxe Watcher でのパイプライン実行のセットアップについて詳しく知る
比較の理解
ウェブプロジェクト用に提供される比較情報は、何が変わったのかを理解するのに役立ちます。
- Gitプロジェクトの場合:
- プロジェクトの全てのブランチが表示されるページでは、各ブランチの最新のコミットがデフォルトブランチでの最新のパイプライン実行とどのように比較されるかを見ることができます。
- 個々のブランチを選んで表示する際、そのブランチでの各コミットがその前に行われたコミットとどのように比較されるかを見ることができます。
- Gitlessプロジェクトの場合: 各テスト実行は前の実行と比較されます。
比較データが表示されない場合、以前のスキャンが利用可能でなかったか、デフォルトブランチでパイプラインスキャンがまだ実行されていない可能性があります。
アクセシビリティ問題についての詳細
ブランチやコミットまたはテスト実行から問題を見るをクリックすると、ルールおよび影響レベルによってグループ化されたアクセシビリティ違反の一覧が表示される概要ページが表示されます。
比較テーブル(ウェブプロジェクトのみ)
ウェブプロジェクトは、上部に次の内容を示す比較テーブルを表示します:
- 現在およびベースラインスキャンでの総問題数
- 新たに導入された問題
- 以前から存在する問題
- 解決された問題
- これらはすべて影響の深刻度(クリティカル、シリアス、適度、軽度)でグループ化されています
注意: モバイルプロジェクトには、この比較表は含まれていません。
ルールリスト
比較セクションの下(またはモバイルの場合は上部)に、違反したすべてのアクセシビリティルールが次のようにグループ化されて表示されます:
- ルール名(個別の問題を表示するために選択可能)
- 影響レベル
- そのルールで見つかった違反点数
フィルタリングとエクスポート
ウェブプロジェクト を使って、特定の問題に焦点を当てるフィルターコントロールを使用します:
- 影響レベルでフィルタ(クリティカル、シリアス、適度、軽度)
- 新しい問題のみを表示
- 特定のページ状態を選択
モバイルプロジェクト を使って、リスト内で一つまたは複数の画面を選択し、特定の結果に焦点を当てるフィルターを使用します。
結果をエクスポートする:
- ウェブ
- 詳細な結果を人間が読める形式で簡単に共有するためにJSONをエクスポート
- スプレッドシートやレポート用にCSVをエクスポート
- モバイル
- 他のツールと統合するためにAxe Universal JSON形式をエクスポート
エクスポートは現在のフィルタに一致します。
単一問題ページ
問題リストで任意のルール名をクリックして、各違反に関する詳細情報を表示します。
コード内の問題を見つける
ウェブプロジェクト 提供する:
- 要素のソースコード(HTMLスニペット)
- 要素を見つけるためのCSSセレクター
- 代替ロケーターとしてのXPath式
- すべてがコピーボタン付きで、開発ツールでの簡単な使用が可能
モバイルプロジェクト 提供する:
- 問題が強調表示されたスクリーンショット
- 詳細ビュー:問題のある要素のコンテキストを提供
- 階層ビューの検査:正確な位置を特定し、詳細な要素プロパティを確認するための階層ツリーを表示
修正ガイダンス
各問題には以下が含まれます:
- アクセシビリティ問題を説明するルール概要
- Deque Universityまたはモバイルルールページへのリンクで、包括的なガイダンスとコード例を提供
- 影響レベルとアクセシビリティタグ(WCAG基準、ベストプラクティス)
- この違反のすべてのインスタンスを順に進めるナビゲーション(例:「1 of 5」)
問題の共有
問題リンクをコピー をクリックし、チームと共有するか、問題追跡システムに追加します。
共有権限: Issue リンクは組織の共有設定に従います。チームメンバーは問題を見るための適切な権限が必要です。管理者は以下で共有設定を構成できます:
- グローバル設定 - 組織全体の共有デフォルトを設定
- プロジェクト設定 - Axe Developer Hub内の個別プロジェクトの設定をアクセスおよび更新
