スキャンを実行した後、「概要」タブにスキャン結果が表示されます。そこには「エクスポート」ボタンがあります。それをクリックすると、どのタイプのエクスポートをするかとエクスポート形式を設定できるダイアログが表示されます。
保存されたテスト記録全体とそのすべての問題を共有できることをご存知ですか? 保存されたテスト記録を共有 についてもっと読む
エクスポートタイプ
問題のエクスポート
問題のエクスポートはCSV、JSON、JUnit XML形式でサポートされています。このエクスポートには、自動テスト および インテリジェントガイドテスト の両方から見つかった各アクセシビリティ違反に関する情報が含まれます。
サポートされているCSVスキーマ
axe DevTools Pro CSV (デフォルト)
| 列名 | 説明 |
|---|---|
| ルールID | アクセシビリティルールの識別子 |
| 説明 | アクセシビリティルールの説明 |
| ヘルプ | 問題を引き起こしたルールの違反に関する有益な情報 |
| ヘルプURL | 指定されたルールに関するヘルプのURL |
| 影響 | 問題の影響または重要度 |
| 手動 | 問題が手動で発見されたか(IGT)どうか |
| レビューが必要 | 潜在的な問題が手動でのレビューを必要とするかどうか |
| IGT | 問題を発見するために実行された特定のIGT(IGTによって発見されなかった場合は空白) |
| セレクター | 問題の要素のCSSセレクター |
| 概要 | 問題の概要 |
| ソースコード | 問題の要素のHTMLソースコードスニペット |
| タグ | 問題のメタデータ(カテゴリ、WCAGチェックポイント識別子など) |
| 発見者 | テストを実行して問題を指摘したユーザー |
| テストタイトル | 保存されたテストの名前 |
| テストURL | テストされたページのURL |
| 共有URL | 共有された問題のURL(問題または保存されたテストを明示的に共有した場合のみ入力されます) |
| 作成日時 | 問題が最初に作成された日時 |
axe Reporter CSV
このスキーマは、axe DevTools APIインテグレーションから生成された「axe Reporter」CSVと互換性があります。このスキーマは、axe DevToolsのブラウザー拡張機能とAPI/CLIの両方からデータを集計する場合に特に役立ちます。
| 列名 | 説明 |
|---|---|
| ページURL | テストされたページのURL |
| ページタイトル | テストされたページのドキュメントタイトル |
| 結果 | 問題の結果 (axe DevTools Extensionでは空白) |
| 影響度 | 問題の影響または重大度 |
| コードスニペット | 問題の要素のHTMLソーススニペット |
| セレクター | 問題の要素のCSSセレクター |
| 修正案 | 問題修正情報 |
| 手動 | 問題が手動で発見されたかどうか (IGT) |
| ルールID | 問題に関連するアクセシビリティルールの識別子 |
| ヘルプ | 問題につながった違反ルールに関する有用な情報 |
| 説明 | アクセシビリティルールの説明 |
| ヘルプURL | 指定されたルールに関するヘルプのURL |
| 規格 | 問題が該当するWCAG標準/チェックポイント |
| WCAG 2の成功基準 | 問題のWCAG成功基準 |
| Section 508 段落 | 問題に適用されるSection 508情報 |
| タグ | 問題のメタデータ (カテゴリ、WCAGチェックポイントの識別子など) |
| 日付 | 問題が発見された日付 |
| axe-core | 問題を引き起こしたテストで使用されたaxe-coreのバージョン |
| レビューが必要 | 潜在的な問題が手動レビューを必要とするかどうか |
| IGT | 問題を発見するために実行された特定のIGT (IGTで発見されていない場合は空白) |
| 発見者 | 問題が発生したテストを実行したユーザー |
| テストタイトル | テストのタイトル名 |
| 共有URL | 共有された問題URL (問題または保存されたテストが明示的に共有された場合のみ) |
サポートされているJSONスキーマ
JSONの問題エクスポートは、各問題に対して以下のプロパティを持つ問題データの配列です:
| プロパティ名 | タイプ | 説明 |
|---|---|---|
axeVersion |
string | 問題が発生したテストで使用されたaxe-coreのバージョン。 |
createdAt |
string | 問題が発生した日時。 |
description |
string | 問題の説明。 |
foundBy |
string | 問題が発生したテストを実施したユーザー。 |
help |
string | 問題を引き起こした違反ルールに関する有用な情報。 |
helpUrl |
string | 指定されたルールに関するサポート情報のURL。 |
igt |
string | 問題が発生したIGTの名前(IGTに見つからない場合はnull)。 |
impact |
string | 問題の影響度または重大度。 |
isManual |
boolean | 問題が手動で(IGT)見つかったかどうか。 |
needsReview |
boolean | 潜在的な問題が手動レビューを必要とするかどうか。 |
ruleId |
string | 問題に関連するアクセシビリティルールの識別子。 |
selector |
array | 違反に関連するノードをターゲットにするためのCSSセレクターの配列。axe-coreのセレクタに関するドキュメントを読む。 |
shareURL |
string | 共有された問題のURL(問題または保存されたテストを明示的に共有した場合にのみ記入される)。 |
source |
string | 問題の要素のHTMLソーススニペット。 |
summary |
string | 問題の概要。 |
tags |
array | 問題のメタデータ(カテゴリ、WCAGチェックポイント識別子など)の文字列タグの配列。 |
testName |
string | 問題が見つかった保存されたテストの名前。 |
testPageTitle |
string | 問題が見つかったドキュメントのタイトル。 |
testUrl |
string | テストされたページのURL。 |
JUnit XML スキーマ
すべての問題データは<testsuites />要素内にラップされています。この要素には以下の属性が含まれます:
| 属性 | 説明 | 例 |
|---|---|---|
id |
エクスポート時に選択されたWCAGレベル。 | "wcag21AA" |
name |
保存されたテストの名前、または結果を保存する前にエクスポートされた場合にはテストされるドキュメントのタイトル | "Recipe Dashboard" |
package |
テストが行われたソフトウェアの名前。 | "axe DevTools Browser Extension" |
timestamp |
エクスポートの日時。 | "2023-04-04T00:08:10.772Z"(new Date().toISOString()の結果) |
<testsuites />の中には<testcase />の要素があります。各<testcase />は「ルール」の失敗を表しています。この要素には次の属性が含まれます:
| 属性 | 説明 | 例 |
|---|---|---|
name |
ルールID。 | "aria-role-missing" |
id |
問題が見つかったIGT(自動問題の場合は省略されます)。 | "igt:keyboard" |
各<testcase />要素の中には<failure />要素があります。この要素は<testcase />で定義されたルールの失敗を表しています。<failure />は次の属性を含みます:
| 属性 | 説明 | 例 |
|---|---|---|
message |
問題(失敗)の説明とルールヘルプのURL | "The element's role is missing or is not appropriate for the element's function. https://docs.deque.com/issue-help/1.0.0/en/aria-role-missing" |
impact |
問題の影響。 | "critical" |
各<failure />要素の中で、失敗セレクター(「CSSパス」)とソースコード(「HTML」)の各インスタンスが表示されます。各インスタンスは--------で区切られます。このテキストの例は以下のとおりです:
CSS Path: body.Page--no-sidebar > #btn-1
HTML: <div id="btn-1" tabindex="0"><img src="https://workshop2.dequelabs.com/46c642c98aecd147b905d063efb8a97d.png" class="edit" alt="Edit"></div>
--------
CSS Path: body.Page--no-sidebar > #btn-2
HTML: <div id="btn-2" tabindex="0"><img src="https://workshop2.dequelabs.com/46c642c98aecd147b905d063efb8a97d.png" class="edit" alt="Edit"></div>JUnit XMLファイルの例
以下はJUnit XMLエクスポートの例です。この例では以下のものがあります:
- WCAG 2.1 AAレベルを選択
- 「Recipe Dashboard」というテスト名を保存
- 2つの
semantic-data-table-headers問題がテーブルIGTで発生 - 3つの
keyboard-inaccessible問題がキーボードIGTで発生 - 2つの
aria-role-missing問題がキーボードIGTで発生
<?xml version="1.0" encoding="utf-8"?>
<testsuites
id="wcag21aa"
name="Recipe Dashboard"
package="axe DevTools Browser Extension"
timestamp="2023-04-04T00:08:10.772Z"
>
<properties>
<property name="platform.userAgent" value="" />
<property name="platform.testMachine" value="" />
<property name="testSubject.fileName" value="" />
<property name="testSubject.lineNum" value="-1" />
</properties>
<testcase
name="semantic-data-table-headers"
id="igt:table"
>
<failure
message="The data table has missing or incomplete header cell markup. https://docs.deque.com/issue-help/1.0.0/en/semantic-data-table-headers"
impact="critical"
>
CSS Path: body.Page--no-sidebar > div#root:nth-of-type(1) > div.App:nth-of-type(1) > div.Layout:nth-of-type(1) > main#main-content.Main:nth-of-type(1) > div.RecipesTable:nth-of-type(3) > table.Table:nth-of-type(1) > thead.TableHead:nth-of-type(1) > tr.TableRow:nth-of-type(1) > td.TableCell.THead:nth-of-type(4)
HTML: <td class="TableCell THead">Cook Time</td>
--------
CSS Path: body.Page--no-sidebar > div#root:nth-of-type(1) > div.App:nth-of-type(1) > div.Layout:nth-of-type(1) > main#main-content.Main:nth-of-type(1) > div.RecipesTable:nth-of-type(3) > table.Table:nth-of-type(1) > thead.TableHead:nth-of-type(1) > tr.TableRow:nth-of-type(1) > td.TableCell.THead:nth-of-type(7)
HTML: <td class="TableCell THead">Yumminess</td>
</failure>
</testcase>
<testcase
name="keyboard-inaccessible"
id="igt:keyboard"
>
<failure
message="There is no way to perform the function using only the keyboard on the same screen or on a qualifying conforming alternate version. https://docs.deque.com/issue-help/1.0.0/en/keyboard-inaccessible"
impact="critical"
>
CSS Path: body.Page--no-sidebar > div#root:nth-of-type(1) > div.App:nth-of-type(1) > div.Layout:nth-of-type(1) > main#main-content.Main:nth-of-type(1) > div.Recipes:nth-of-type(2) > div.Recipes__card:nth-of-type(16) > div.Recipes__card-foot:nth-of-type(3) > div.Button--primary:nth-of-type(1)
HTML: <div class="Button--primary"><span class="BracketLeft" aria-hidden="true">[</span><span>Cook Lemon Squares</span><span class="BracketRight" aria-hidden="true">]</span></div>
--------
CSS Path: body.Page--no-sidebar > div#root:nth-of-type(1) > div.App:nth-of-type(1) > div.Layout:nth-of-type(1) > main#main-content.Main:nth-of-type(1) > div.Recipes:nth-of-type(2) > div.Recipes__card:nth-of-type(1) > div.Recipes__card-foot:nth-of-type(3) > div.Button--primary:nth-of-type(1)
HTML: <div class="Button--primary"><span class="BracketLeft" aria-hidden="true">[</span><span>Cook Chocolate Cake</span><span class="BracketRight" aria-hidden="true">]</span></div>
--------
CSS Path: body.Page--no-sidebar > div#root:nth-of-type(1) > div.App:nth-of-type(1) > div.Layout:nth-of-type(1) > main#main-content.Main:nth-of-type(1) > div.Recipes:nth-of-type(2) > div.Recipes__card:nth-of-type(19) > div.Recipes__card-foot:nth-of-type(3) > div.Button--primary:nth-of-type(1)
HTML: <div class="Button--primary"><span class="BracketLeft" aria-hidden="true">[</span><span>Cook Kale Salad</span><span class="BracketRight" aria-hidden="true">]</span></div>
</failure>
</testcase>
<testcase
name="aria-role-missing"
id="igt:keyboard"
>
<failure
message="The element's role is missing or is not appropriate for the element's function. https://docs.deque.com/issue-help/1.0.0/en/aria-role-missing"
impact="critical"
>
CSS Path: body.Page--no-sidebar > div#root:nth-of-type(1) > div.App:nth-of-type(1) > div.Layout:nth-of-type(1) > main#main-content.Main:nth-of-type(1) > div.Recipes:nth-of-type(2) > div.Recipes__card:nth-of-type(16) > div.Recipes__card-head:nth-of-type(1) > div.Recipes__card-edit:nth-of-type(1)
HTML: <div class="Recipes__card-edit" tabindex="0"><img src="https://workshop2.dequelabs.com/46c642c98aecd147b905d063efb8a97d.png" class="edit" alt="Edit"></div>
--------
CSS Path: body.Page--no-sidebar > div#root:nth-of-type(1) > div.App:nth-of-type(1) > div.Layout:nth-of-type(1) > main#main-content.Main:nth-of-type(1) > div.Recipes:nth-of-type(2) > div.Recipes__card:nth-of-type(7) > div.Recipes__card-head:nth-of-type(1) > div.Recipes__card-edit:nth-of-type(1)
HTML: <div class="Recipes__card-edit" tabindex="0"><img src="https://workshop2.dequelabs.com/46c642c98aecd147b905d063efb8a97d.png" class="edit" alt="Edit"></div>
</failure>
</testcase>
</testsuites>保存されたテストのエクスポート
改行がエスケープされているため、すべての文字列が1行に収まります。
「保存されたテストと問題」のエクスポートはaxeエクスポート形式スキーマに従います。
