結果を理解する
Axe Developer Hubでアクセシビリティの問題を表示および管理する
ツールキットのインストール手順に従った後、テストスイートを実行するたびに結果がDeveloper Hubに送信されます。Developer Hubでは、新しいアクセシビリティの問題や既存の問題を表示し、経時的なトレンドを追跡することができます。
プロジェクト構造を理解する
Developer Hubは、エンドツーエンドのテストがバージョン管理にGitを使用しているかどうかによって、アクセシビリティデータを異なる方法で整理します。
Gitを使用している場合、プロジェクトの異なるブランチや、これらのブランチに対して行われた個々のコミットを表示できます。構造は次のとおりです。
プロジェクト → ブランチ → コミット → 問題リスト → 問題の詳細
GitデータはAxe Watcherプロジェクトのために自動的に収集されます。Git情報はエンドツーエンドのテストに対応していますが、 テストされている実際のコードとは正確に一致しない場合があります 。もしコードがエンドツーエンドのテストとは別のリポジトリにある場合です。
WatcherプロジェクトのGitデータ収集を無効にするには、APIを使用してください。
ウェブプロジェクトでGitを使用していない場合、またはモバイルプロジェクトを表示する場合、個々のテストランを表示でき、各ランで見つかった問題に移動できます。構造は次のとおりです。
プロジェクト → テストラン → 問題リスト → 問題の詳細
結果を扱う
プロジェクトを開くと、ブランチ(Gitプロジェクト)またはテストラン(Gitを使用していないプロジェクト)のリストが表示されます。
結果を一目で把握する
アクセシビリティテストから返された情報は次のとおりです。
- Gitプロジェクトの場合: ブランチ名、最新のコミットSHA、実行中のエンドツーエンドテストのコミットメッセージ Gitを使用していないプロジェクトの場合:
- テストランのタイムスタンプ アクセシビリティのしきい値を超える問題の数 使用中のアクセシビリティツールキットのパッケージとバージョン情報
- 合計問題数とスキャン回数を示す比較サマリー 新しく導入された問題と解決された問題の数(ウェブプロジェクトのみ)
- 個々のコミットに詳しく入るための「コミットを見る」ボタン(Gitプロジェクトのみ)
- 完全な問題リストを表示する「問題を見る」ボタン
- パイプライン情報
- Gitデータを使用しているチームの場合、すべての実行をデフォルトブランチのCI/CD実行と比較することができ、新たにマージされたコードが追加のアクセシビリティの問題を引き起こしていないことを確認できます。比較を設定するには、プロジェクト管理者がWatcherをリポジトリのデフォルトブランチで実行するように設定する必要があります。通常、これは
- (または
)ブランチです。このツールキットのインスタンスは、パイプライン実行として設定する必要があります。
デフォルトブランチの指定されたパイプライン実行からのスキャンデータが入ると、結果がページのトップに表示されます。ユーザーはAPIキーによってさまざまな結果セットを表示し、それをデフォルトブランチのパイプライン実行と比較することができます。 main 継続的インテグレーション(CI)環境での masterAxe Watcherのパイプライン実行の設定について詳しく学ぶ
比較を理解する
ウェブプロジェクトのために提供される比較情報は、何が変わったかを理解するのに役立ちます。 Gitプロジェクトの場合:
プロジェクトのすべてのブランチを表示しているページでは、各ブランチの最新のコミットが
デフォルトブランチの最新パイプライン実行とどのように比較されるかを見ることができます。
- 個々のブランチを選択して表示すると、そのブランチの各ユニークな
- コミット がその前のコミットとどのように比較されるかを見ることができます。 compares to the latest pipeline run on the default branch.
- When you select an individual branch to view, you are able to see how each unique commit on that branch compares to the commit that came before it.
- Gitlessプロジェクトの場合: 各テストの実行は前回の実行と比較されます。
比較データが表示されない場合、以前のスキャンが比較するために利用できなかったか、パイプラインスキャンがデフォルトブランチでまだ実行されていない可能性があります。
アクセシビリティ問題についてもっと学ぶ
「 問題を表示 」をブランチ、コミット、またはテストの実行からクリックすると、ルールと影響レベルごとにグループ化されたアクセシビリティの違反一覧と要約ページが表示されます。
比較テーブル(ウェブプロジェクトのみ)
ウェブプロジェクトでは、最上部に表示される比較テーブルに次の情報が示されます。
- 現在およびベースラインスキャンでの総問題数
- 新たに導入された問題
- 以前から存在する問題
- 解決された問題
- これらすべては影響度の深刻さ(重大、深刻、中程度、軽度)によってグループ化されます
注意: モバイルプロジェクトにはこの比較テーブルは含まれません。
ルール一覧
比較セクションの下(またはモバイルの場合は最上部)には、次の項目によってグループ化された違反したアクセシビリティルールが表示されます。
- ルール名(選択して個々の問題を表示可能)
- 影響レベル
- そのルールで見つかった違反数
フィルタリングとエクスポート
「 ウェブプロジェクト」では、フィルターコントロールを使用して特定の問題に焦点を当てます。
- 影響レベルでフィルタリング(重大、深刻、中程度、軽度)
- 新しい問題のみを表示
- 特定のページ状態を選択
「 モバイルプロジェクト」では、リスト内で1つまたは複数のスクリーンを選択し、特定の結果に焦点を当てます。
結果をエクスポート:
- ウェブ
- 人が読める形式で詳細な結果を簡単に共有するためにJSONをエクスポート
- スプレッドシートおよびレポート用にCSVをエクスポート
- モバイル
- 他のツールとの統合用にAxe Universal JSON形式をエクスポート
エクスポートは現在のフィルターに準拠します。
単一問題ページ
問題のリストで任意のルール名をクリックして、各違反についての詳細情報を表示します。
コード内の問題を見つける
ウェブプロジェクト は以下を提供します:
- 要素のソースコード(HTMLスニペット)
- 要素を見つけるためのCSSセレクタ
- 代替のロケーターとしてのXPath表現
- すべて開発ツールで簡単に使用できるコピーボタン付き
モバイルプロジェクト は以下を提供します:
- 問題が強調表示されたスクリーンショット
- 詳細ビュー:問題のある要素の文脈を提供します
- 階層ビュー:正確な位置を特定し、詳細な要素プロパティを確認できる階層ツリーを表示します
改善ガイダンス
各問題には以下が含まれます:
- アクセシビリティの問題を説明するルールの説明
- Deque Universityまたはモバイルルールページへのリンクで、包括的なガイダンスとコード例
- 影響レベルとアクセシビリティタグ(WCAGの基準、ベストプラクティス)
- この違反のすべてのインスタンスを順次確認するナビゲーション(例:「1 of 5」)
問題の共有
クリックして 問題リンクをコピー ページの上部から、チームと共有したり、問題追跡システムに追加したりします。
共有権限: 問題リンクは組織の共有設定に従います。チームメンバーは、問題を閲覧するための適切な権限が必要です。管理者は以下の場所で共有設定を構成できます:
- グローバル設定 - 組織全体の共有デフォルトを設定します
- プロジェクト設定 - 個々のプロジェクトの設定をアクセスして更新します Axe Developer Hub
