Nach Durchführung eines Scans gelangen Sie zum Tab „Übersicht“ mit Ihren Scanergebnissen. Dort finden Sie eine „Exportieren“-Schaltfläche. Bei einem Klick erscheint ein Dialog, in dem Sie konfigurieren können, welchen Exporttyp Sie wünschen und in welchem Format exportiert werden soll.
Wussten Sie, dass Sie ein gesamtes gespeichertes Testergebnis und alle dazugehörigen Probleme teilen können? Lesen Sie mehr über gespeicherte Testergebnisse teilen
Exporttypen
Probleme exportieren
Der Problemexport wird in den Formaten CSV, JSON und JUnit XML unterstützt. Dieser Export enthält Informationen zu jedem von automatisches Testen sowie Intelligent Guided Testing gefundenen Barrierefreiheitsverstoß.
Unterstützte CSV-Schemata
axe DevTools Pro CSV (Standard)
| Spaltenname | Beschreibung |
|---|---|
| Regel-ID | Die Kennung der Barrierefreiheitsregel |
| Beschreibung | Eine Beschreibung der Barrierefreiheitsregel |
| Hilfe | Hilfreiche Informationen zur verletzten Regel, die zum Problem geführt hat |
| Hilfe-URL | Eine URL mit Hilfe zur betreffenden Regel |
| Auswirkung | Die Auswirkung oder Schwere des Problems |
| Manuell | Ob das Problem manuell (IGT) gefunden wurde oder nicht |
| Überprüfung nötig | Ob das potenzielle Problem eine manuelle Überprüfung benötigt oder nicht |
| IGT | Welches spezifische IGT durchgeführt wurde, um das Problem zu finden (leer, wenn nicht durch IGT gefunden) |
| Selektor | Der CSS-Selektor für das Problembestandteil |
| Zusammenfassung | Zusammenfassung des Problems |
| Quellcode | Der HTML-Quellcodeausschnitt des Problembestandteils |
| Tags | Metadaten zum Problem (Kategorien, WCAG-Checkpoint-Kennungen usw.) |
| Gefunden von | Benutzer, der den Test durchgeführt hat, bei dem das Problem auftrat |
| Testtitel | Der Name des gespeicherten Tests |
| Test-URL | Die URL der getesteten Seite |
| Teilen-URL | Die geteilte Problem-URL (nur gefüllt, wenn das Problem oder der gespeicherte Test explizit geteilt wurde) |
| Erstellt am | Wann das Problem erstmals erstellt wurde |
axe Reporter CSV
Dieses Schema ist kompatibel mit dem „axe Reporter“ CSV, das aus axe DevTools API-Integrationen generiert wird. Dieses Schema ist besonders nützlich, wenn Sie Daten sowohl von der axe DevTools-Browsererweiterung als auch von APIs/CLI aggregieren.
| Spaltenname | Beschreibung |
|---|---|
| Seiten-URL | Die URL der getesteten Seite |
| Seitentitel | Der Dokumenttitel der getesteten Seite |
| Ergebnis | Das Ergebnis des Problems (wird für die axe DevTools-Erweiterung leer gelassen) |
| Auswirkung | Die Auswirkung oder der Schweregrad des Problems |
| Code-Ausschnitt | Der HTML-Quellenausschnitt des Problem-Elements |
| Selektor | Der CSS-Selektor für das Problem-Element |
| Behebung | Informationen zur Problembehebung |
| Manuell | Ob das Problem manuell gefunden wurde (IGT) oder nicht |
| Regel-ID | Der Bezeichner für die Barrierefreiheitsregel, die dem Problem zugeordnet ist |
| Hilfe | Hilfreiche Informationen zur verletzten Regel, die zum Problem führte |
| Beschreibung | Eine Beschreibung der Barrierefreiheitsregel |
| Hilfe-URL | Eine URL mit Hilfe zu der angegebenen Regel |
| Standard | Welchem WCAG-Standard/-Prüfpunkt das Problem zugeordnet ist |
| WCAG 2 Erfolgskriterien | Die WCAG-Erfolgskriterien für das Problem |
| Section 508 Absatz | Anwendbare Section 508-Informationen für das Problem |
| Tags | Metadaten für das Problem (Kategorien, WCAG-Prüfpunktkennungen etc.) |
| Datum | Datum, an dem das Problem gefunden wurde |
| axe-core | Version von axe-core, die im Test verwendet wurde, bei dem das Problem auftrat |
| Muss überprüft werden | Ob das potenzielle Problem einer manuellen Überprüfung bedarf |
| IGT | Welches spezifische IGT durchgeführt wurde, um das Problem zu finden (leer, wenn nicht durch IGT gefunden) |
| Gefunden von | Benutzer, der den Test durchgeführt hat, bei dem das Problem aufgetreten ist |
| Testtitel | Der Titelname des Tests |
| Share-URL | Die geteilte Problem-URL (nur ausgefüllt, wenn das Problem oder der gespeicherte Test explizit geteilt wurde) |
Unterstütztes JSON-Schema
Der JSON-Problemexport ist ein Array von Problemdaten mit den folgenden Eigenschaften für jedes Problem:
| Eigenschaftsname | Typ | Beschreibung |
|---|---|---|
axeVersion |
String | Die Version von axe-core, die für den Test verwendet wurde, in dem das Problem aufgetreten ist. |
createdAt |
String | Das Datum/Zeit, zu dem das Problem aufgetreten ist. |
description |
String | Eine Beschreibung des Problems. |
foundBy |
String | Benutzer, der den Test durchgeführt hat, bei dem das Problem aufgetreten ist. |
help |
String | Hilfreiche Informationen bezüglich der verletzten Regel, die zum Problem geführt hat. |
helpUrl |
String | Eine URL mit Hilfe zur angegebenen Regel. |
igt |
String | Der Name des IGT, in dem das Problem aufgetreten ist (null, wenn nicht im IGT gefunden). |
impact |
String | Die Auswirkung oder Schwere des Problems. |
isManual |
Boolean | Ob das Problem manuell gefunden wurde (IGT) oder nicht. |
needsReview |
Boolean | Ob das potenzielle Problem einer manuellen Überprüfung bedarf oder nicht. |
ruleId |
String | Der Bezeichner für die Barrierefreiheitsregel, die mit dem Problem verbunden ist. |
selector |
Array | Ein Array von CSS-Selektoren, um das mit der Verletzung verbundene Element zu identifizieren. Lesen Sie axe-core-Dokumentation zu Selektoren. |
shareURL |
String | Die gemeinsame Problem-URL (nur gefüllt, wenn Problem oder gespeicherter Test explizit geteilt). |
source |
String | Der HTML-Quelltext des Problembereichs. |
summary |
String | Zusammenfassung des Problems. |
tags |
Array | Array von String-Tags der Metadaten für das Problem (Kategorien, WCAG-Checkpoint-Bezeichner, etc.). |
testName |
String | Der Name des gespeicherten Tests, in dem das Problem gefunden wurde. |
testPageTitle |
String | Der Titel des Dokuments, in dem das Problem gefunden wurde. |
testUrl |
String | Die URL der getesteten Seite. |
JUnit XML-Schema
Alle Problemdaten sind in ein <testsuites />-Element eingebettet. Dieses Element enthält die folgenden Attribute:
| Attribut | Beschreibung | Beispiel |
|---|---|---|
id |
Die WCAG-Stufe, die zum Zeitpunkt des Exports ausgewählt wurde. | "wcag21AA" |
name |
Der Name des gespeicherten Tests oder, bei Exporten, die vor dem Speichern der Ergebnisse durchgeführt wurden, der Titel des getesteten Dokuments | "Recipe Dashboard" |
package |
Der Name der Software, in der der Test durchgeführt wurde. | "axe DevTools Browser Extension" |
timestamp |
Das Datum/Zeit des Exports. | "2023-04-04T00:08:10.772Z" (Ergebnis von new Date().toISOString()) |
Innerhalb des <testsuites /> gibt es <testcase /> Elemente. Jedes <testcase /> stellt ein „Regel“-Fehler dar. Dieses Element wird die folgenden Attribute enthalten:
| Attribut | Beschreibung | Beispiel |
|---|---|---|
name |
Die Regel-ID. | "aria-role-missing" |
id |
In welchem IGT das Problem gefunden wurde (wird bei automatischen Problemen weggelassen). | "igt:keyboard" |
Innerhalb jedes <testcase />-Elements befindet sich ein <failure />-Element. Dieses Element stellt ein Versagen der im <testcase /> definierten Regel dar. Der <failure /> enthält die folgenden Attribute:
| Attribut | Beschreibung | Beispiel |
|---|---|---|
message |
Die Beschreibung des Problems (Fehler) gefolgt von der URL zur Regelhilfe | "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 |
Die Auswirkung des Problems. | "critical" |
Innerhalb jedes <failure />-Elements wird jede Instanz des Selektors des Fehlers („CSS-Pfad“) und der Quellcode („HTML“) ausgegeben. Jede Instanz wird durch -------- getrennt. Ein Beispiel für diesen Text ist wie folgt:
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>Beispiel einer JUnit-XML-Datei
Das folgende ist ein Beispiel für einen JUnit-XML-Export. In diesem Beispiel haben wir:
- WCAG 2.1 AA-Level ausgewählt
- Gespeicherter Testname „Rezept Dashboard“
- 2
semantic-data-table-headers-Probleme im Tabelle IGT aufgetreten - 3
keyboard-inaccessible-Probleme im Tastatur IGT aufgetreten - 2
aria-role-missing-Probleme im Tastatur IGT aufgetreten
<?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>Gespeicherter Test-Export
Umbrüche werden vermieden, sodass alle Zeichenfolgen in einer Zeile stehen.
Der „Gespeicherte Test und Probleme“-Export folgt dem axe Exportformat-Schema.
