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