結果を理解する

ツールキットのインストール手順を完了すると、テストスイートを実行するたびにDeveloper Hubにプッシュされる結果が生成されます。Developer Hubでは、新しいアクセシビリティ問題と既存の問題を表示し、時間の経過による傾向を追跡できます。

プロジェクト構造の理解

Developer Hubは、エンドツーエンドテストがバージョン管理にGitを使用しているかどうかに応じて、アクセシビリティデータを異なる形式で整理します。

Gitを使用する場合、プロジェクトの異なるブランチや、それらのブランチで行われた個々のコミットを見ることができます。構造は次のとおりです：
プロジェクト → ブランチ → コミット → イシュ―一覧 → イシュ―詳細

ウェブプロジェクトでGitを使用していない場合、またはモバイルプロジェクトを表示している場合、個別のテスト実行を確認し、各実行で発見された問題に移動することができます。構造は次のとおりです：
プロジェクト → テスト実行 → イシュ―一覧 → イシュ―詳細

結果の操作

プロジェクトを開くと、ブランチのリスト（Gitプロジェクト）またはテストラン（Gitを使用しないプロジェクト）が表示されます。

結果を一目で確認

アクセシビリティテストから返される以下の情報を確認できます。

• Gitプロジェクト: ブランチ名、最新のコミット SHA、実行中のエンドツーエンドテストのコミットメッセージ
• Gitを使用しないプロジェクト: テスト実行のタイムスタンプ
• アクセシビリティしきい値 を超える問題の数
• 使用しているアクセシビリティツールキットのパッケージ情報とバージョン情報
• 合計問題数とスキャン回数を示す比較サマリー
• 新しく導入された問題と解決された問題の数（ウェブプロジェクトのみ）
• アクセシビリティスコア（モバイルプロジェクトのみ）：セッションのスキャンのアクセシビリティがどれだけの割合であったかを示すパーセンテージ（0–100％）、詳細は以下の アクセシビリティスコア（モバイルプロジェクトのみ）
• 'コミットを見る'ボタン （Gitプロジェクトのみ）で個々のコミットを掘り下げる
• '問題を見る'ボタンで完全な問題リストを表示

アクセシビリティスコア（モバイルプロジェクトのみ）

アクセシビリティスコアは、モバイルセッションレポートページに表示されるパーセンテージ（0-100%）です。スコアが高いほど、セッション全体で重大なアクセシビリティ問題が少ないことを意味します。

スコアは2ステップで計算されます：

1. 各スキャンは評価されます 最も深刻なアクセシビリティ問題に基づいて：

   • 100% — 軽微な問題のみ、または問題なし
   • 80% — 少なくとも1つの中程度の問題が存在するが、重大または致命的な問題はなし
   • 40% — 少なくとも1つの重大な問題が存在するが、致命的な問題はなし
   • 0% — 少なくとも1つの致命的な問題が存在する

2. すべてのスコアのセッションスコアは平均値です。

例として、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プロジェクトの場合： 各テスト実行は前の実行と比較されます。

Gitプロジェクトは最初の成功したセッションで1つのリポジトリに固定されるため、そのプロジェクト内で比較するすべてのコミットとブランチは常に同じリポジトリに属します。

比較データが表示されない場合、以前のスキャンが利用可能でなかったか、デフォルトブランチでパイプラインスキャンがまだ実行されていない可能性があります。

トレンドを追跡するための比較の使用について詳しく知る

アクセシビリティ問題についての詳細

ブランチやコミットまたはテスト実行から問題を見るをクリックすると、ルールおよび影響レベルによってグループ化されたアクセシビリティ違反の一覧が表示される概要ページが表示されます。

比較テーブル（ウェブプロジェクトのみ）

ウェブプロジェクトは、上部に次の内容を示す比較テーブルを表示します：

• 現在およびベースラインスキャンでの総問題数
• 新たに導入された問題
• 以前から存在する問題
• 解決された問題
• これらはすべて影響の深刻度（クリティカル、シリアス、適度、軽度）でグループ化されています

注意： モバイルプロジェクトには、この比較表は含まれていません。

ルールリスト

比較セクションの下（またはモバイルの場合は上部）に、違反したすべてのアクセシビリティルールが次のようにグループ化されて表示されます：

• ルール名（個別の問題を表示するために選択可能）
• 影響レベル
• そのルールで見つかった違反点数

フィルタリングとエクスポート

ウェブプロジェクト を使って、特定の問題に焦点を当てるフィルターコントロールを使用します：

• 影響レベルでフィルタ（クリティカル、シリアス、適度、軽度）
• 新しい問題のみを表示
• 特定のページ状態を選択

モバイルプロジェクト を使って、リスト内で一つまたは複数の画面を選択し、特定の結果に焦点を当てるフィルターを使用します。

結果をエクスポートする：

• ウェブ
  • 詳細な結果を人間が読める形式で簡単に共有するためにJSONをエクスポート
  • スプレッドシートやレポート用にCSVをエクスポート
• モバイル
  • Reporter CLIまたはDequeサポートがスキャンエクスポートを要求した場合に使用するために、スキャンデータ全体（アクセシビリティの結果、スクリーンショット、ビュー階層）のMobile JSONをエクスポートします
  • 他のAxe製品や独自のツールと統合するために、Axe Universal JSONをエクスポートします

Webエクスポートは現在のフィルターに準拠します。Mobileエクスポート（Mobile JSONとAxe Universal JSONの両方）は、適用されているフィルターに関係なく、セッション内のすべての結果を常に含みます。

Axe Universal JSONエクスポートには、要レビューの結果と違反が含まれています。各「要確認」結果は、ファイルの問題リスト（allIssues）で違反の横に表示され、needsReview: trueでマークされています。また、ファイルにはルールごとの「要確認」の概要も含まれています。ツールがすべてのallIssuesエントリを違反として扱う場合は、needsReviewがtrueのエントリをスキップするように更新してください。「要確認」結果はファイル独自の「要確認」件数にのみカウントされます：違反や影響の合計、アクセシビリティスコアには影響しません。「要確認」結果はDeveloper Hub UIには表示されないため、エクスポートがそれを見る唯一の場所となります。エクスポートには、Axe設定にある組織のデフォルトの要レビュー設定に関係なく、それらが含まれます。

ウェブCSVおよびJSONエクスポート

ウェブCSVおよびJSONエクスポートは、問題のある各ユニークな要素を一覧表示します。複数のテスト実行またはページ状態で同じルールに失敗する要素は、一度だけ表示されます。以下の例は、アクセシビリティの問題があるページからのものです: html要素にlang属性がなく、<html>ではなく<html lang="en">になっています。

CSVエクスポートの最初の行には、列名が含まれています:

"Rule ID","Description","Rule help","Help URL","Impact","Element location","Element source code","Page state","Summary","Tags","Created at"
"html-has-lang","Ensures every HTML document has a lang attribute","<html> element must have a lang attribute","https://dequeuniversity.com/rules/axe/4.14/html-has-lang?application=axeAPI","serious","html","<html>","http://localhost:3000/index.html","Fix any of the following:
  The <html> element does not have a lang attribute","cat.language,wcag2a,wcag311,ACT","2023-03-20T17:43:17.204Z"

JSONエクスポートは、ルールごとに1つのオブジェクトを含む配列を保持します。そのルールの問題のある各ユニークな要素は、nodes配列のエントリです:

[
  {
    "id": "html-has-lang",
    "impact": "serious",
    "tags": ["cat.language", "wcag2a", "wcag311", "ACT"],
    "description": "Ensures every HTML document has a lang attribute",
    "help": "<html> element must have a lang attribute",
    "helpUrl": "https://dequeuniversity.com/rules/axe/4.14/html-has-lang?application=axeAPI",
    "nodes": [
      {
        "page_state": "http://localhost:3000/index.html",
        "created_at": "2023-03-20T17:43:17.204Z",
        "html": "<html>",
        "target": ["html"],
        "failureSummary": "Fix any of the following:\n  The <html> element does not have a lang attribute"
      }
    ]
  }
]

以下の表は、各CSV列をそのJSONプロパティにマッピングしています。nodes配列内のオブジェクトのプロパティはnodes[].propertyです。

単一問題ページ

問題リストで任意のルール名をクリックして、各違反に関する詳細情報を表示します。

コード内の問題を見つける

ウェブプロジェクト 提供する：

• 要素のソースコード（HTMLスニペット）
• 要素を見つけるためのCSSセレクター
• 代替ロケーターとしてのXPath式
• すべてがコピーボタン付きで、開発ツールでの簡単な使用が可能

モバイルプロジェクト 提供する：

• 問題が強調表示されたスクリーンショット
• 詳細ビュー：問題のある要素のコンテキストを提供
• 階層ビューの検査：正確な位置を特定し、詳細な要素プロパティを確認するための階層ツリーを表示

修正ガイダンス

各問題には以下が含まれます：

• アクセシビリティ問題を説明するルール概要
• Deque Universityまたはモバイルルールページへのリンクで、包括的なガイダンスとコード例を提供
• 影響レベルとアクセシビリティタグ（WCAG基準、ベストプラクティス）
• この違反のすべてのインスタンスを順に進めるナビゲーション（例：「1 of 5」）

問題の共有

問題リンクをコピー をクリックし、チームと共有するか、問題追跡システムに追加します。

共有権限： Issue リンクは組織の共有設定に従います。チームメンバーは問題を見るための適切な権限が必要です。管理者は以下で共有設定を構成できます：

• グローバル設定 - 組織全体の共有デフォルトを設定
• プロジェクト設定 - Axe Developer Hub内の個別プロジェクトの設定をアクセスおよび更新