Après avoir effectué une analyse, vous serez dirigé vers l’onglet « Vue d’ensemble » où se trouvent les résultats de votre analyse. Là, vous trouverez un bouton « Exporter ». En cliquant dessus, une boîte de dialogue apparaîtra vous permettant de configurer le type d’export que vous souhaitez ainsi que le format d’export.
Saviez-vous que vous pouvez partager un enregistrement de test sauvegardé en entier et tous ses problèmes ? En savoir plus sur partage des enregistrements de test sauvegardés
Types d'exportation
Exportation des problèmes
L'exportation des problèmes est supportée aux formats CSV, JSON et JUnit XML. Cet export contiendra des informations relatives à chaque violation d'accessibilité trouvée à la fois via test automatique ainsi que Test guidé intelligent.
Schémas CSV supportés
axe DevTools Pro CSV (par défaut)
| nom de la colonne | description |
|---|---|
| ID de règle | L'identifiant de la règle d'accessibilité |
| Description | Une description de la règle d'accessibilité |
| Aide | Informations utiles concernant la règle violée, menant au problème |
| URL d'aide | Une URL avec de l'aide pour la règle donnée |
| Impact | L'impact ou la gravité du problème |
| Manuel | Si le problème a été trouvé manuellement (TGI) ou non |
| Besoin de révision | Si le problème potentiel a besoin ou non d'une révision manuelle |
| TGI | Quel TGI spécifique a été exécuté pour trouver le problème (vide si non trouvé par TGI) |
| Sélecteur | Le sélecteur CSS pour l'élément du problème |
| Résumé | Résumé du problème |
| Code source | L'extrait de code source HTML de l'élément du problème |
| Étiquettes | Métadonnées pour le problème (catégories, identifiants de points de contrôle wcag, etc.) |
| Trouvé par | Utilisateur qui a effectué le test dans lequel le problème a été soulevé |
| Titre du test | Le nom du test sauvegardé |
| URL du test | L'URL de la page testée |
| URL de partage | L'URL du problème partagé (remplie uniquement lorsque le problème ou le test sauvegardé est explicitement partagé) |
| Créé le | Quand le problème a été créé pour la première fois |
axe Reporter CSV
Ce schéma est compatible avec le CSV « axe Reporter » généré à partir des intégrations de l'API axe DevTools. Ce schéma est particulièrement utile si vous regroupez des données à la fois à partir de l'extension de navigateur axe DevTools et des API/CLI.
| nom de la colonne | description |
|---|---|
| URL de la page | L'URL de la page testée |
| Titre de la page | Le titre du document de la page testée |
| Résultat | Le résultat du problème (sera vide pour l'extension axe DevTools) |
| Impact | L'impact ou la gravité du problème |
| Extrait de code | L'extrait de code source HTML de l'élément problématique |
| Sélecteur | Le sélecteur CSS de l'élément problématique |
| Remédiation | Informations sur la remédiation du problème |
| Manuel | Si le problème a été trouvé manuellement (IGT) ou non |
| ID de la règle | L'identifiant de la règle d'accessibilité associée au problème |
| Aide | Informations utiles concernant la règle violée menant au problème |
| Description | Description de la règle d'accessibilité |
| URL d'aide | Une URL avec de l'aide pour la règle donnée |
| Standard | Dans quel standard ou point de contrôle WCAG le problème se situe |
| Critères de succès WCAG 2 | Les critères de succès WCAG pour le problème |
| Paragraphe Section 508 | Informations applicables de la Section 508 pour le problème |
| Étiquettes | Métadonnées pour le problème (catégories, identifiants de point de contrôle WCAG, etc.) |
| Date | Date à laquelle le problème a été trouvé |
| axe-core | Version d'axe-core utilisée dans le test qui a soulevé le problème |
| Besoin d'une révision | Si le problème potentiel a besoin d'une révision manuelle ou non |
| IGT | Quel IGT spécifique a été exécuté pour trouver le problème (vide si non trouvé par IGT) |
| Trouvé par | Utilisateur qui a effectué le test dans lequel le problème a été soulevé |
| Titre du test | Le nom de titre du test |
| URL de partage | L'URL de partage du problème (seulement remplie lorsque le problème ou le test enregistré est explicitement partagé) |
Schéma JSON supporté
L'export de problème JSON est un tableau de données de problème avec les propriétés suivantes pour chaque problème :
| Nom de la propriété | Type | Description |
|---|---|---|
axeVersion |
chaîne | La version d'axe-core utilisée pour le test dans lequel le problème a été soulevé. |
createdAt |
chaîne | La date/heure à laquelle le problème a été soulevé. |
description |
chaîne | Une description du problème. |
foundBy |
chaîne | Utilisateur ayant réalisé le test dans lequel le problème a été soulevé. |
help |
chaîne | Informations utiles sur la règle violée menant au problème. |
helpUrl |
chaîne | Une URL avec de l'aide pour la règle donnée. |
igt |
chaîne | Le nom de l'IGT dans lequel le problème a été soulevé (null si non trouvé dans IGT). |
impact |
chaîne | L'impact ou la gravité du problème. |
isManual |
booléen | Si le problème a été trouvé manuellement (IGT) ou non. |
needsReview |
booléen | Si le problème potentiel nécessite une révision manuelle ou non. |
ruleId |
chaîne | L'identifiant de la règle d'accessibilité associée au problème. |
selector |
tableau | Un tableau de sélecteurs CSS pour cibler le nœud associé à la violation. Lire documentation d'axe-core sur les sélecteurs. |
shareURL |
chaîne | L'URL partagée du problème (uniquement peuplée lorsque le problème ou le test enregistré est explicitement partagé). |
source |
chaîne | L'extrait de code source HTML de l'élément problématique. |
summary |
chaîne | Résumé du problème. |
tags |
tableau | Tableau de balises de chaîne de métadonnées pour le problème (catégories, identifiants de point de contrôle WCAG, etc.). |
testName |
chaîne | Le nom du test enregistré dans lequel le problème a été trouvé. |
testPageTitle |
chaîne | Le titre du document dans lequel le problème a été trouvé. |
testUrl |
chaîne | L'URL de la page testée. |
Schéma XML JUnit
Toutes les données du problème sont enveloppées dans un élément <testsuites />. Cet élément contiendra les attributs suivants :
| Attribut | Description | Exemple |
|---|---|---|
id |
Le niveau WCAG sélectionné au moment de l'exportation. | "wcag21AA" |
name |
Le nom du test enregistré ou, pour les exportations effectuées avant la sauvegarde des résultats, le titre du document testé. | "Recipe Dashboard" |
package |
Le nom du logiciel dans lequel les tests ont été effectués. | "axe DevTools Browser Extension" |
timestamp |
La date/heure de l'exportation. | "2023-04-04T00:08:10.772Z" (résultat de new Date().toISOString()) |
Dans le <testsuites />, il y a <testcase /> éléments. Chaque <testcase /> représente un échec de « règle ». Cet élément contiendra les attributs suivants :
| Attribut | Description | Exemple |
|---|---|---|
name |
L'ID de la règle. | "aria-role-missing" |
id |
Dans quel IGT le problème a été trouvé (sera omis pour les problèmes automatiques). | "igt:keyboard" |
Dans chaque élément <testcase /> se trouve un élément <failure />. Cet élément représente un échec de la règle définie dans le <testcase />. Le <failure /> contient les attributs suivants :
| Attribut | Description | Exemple |
|---|---|---|
message |
La description du problème (échec) suivie par l'URL d'aide de la règle | "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 |
L'impact du problème. | "critical" |
Dans chaque élément <failure />, chaque instance du sélecteur de l'échec (« Chemin CSS ») et du code source (« HTML ») sera affichée. Chaque instance sera séparée par --------. Un exemple de ce texte est le suivant :
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>Exemple de fichier XML JUnit
Voici un exemple d'exportation XML JUnit. Dans cet exemple, nous avons :
- Niveau WCAG 2.1 AA sélectionné
- Nom du test enregistré de « Tableau de bord de recette »
- 2 problèmes
semantic-data-table-headerssignalés dans le Tableau IGT - 3 problèmes
keyboard-inaccessiblesignalés dans le Clavier IGT - 2 problèmes
aria-role-missingsignalés dans le Clavier 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>Exportation de test enregistrée
Les sauts de ligne sont échappés afin que toutes les chaînes soient sur une seule ligne.
L'exportation « Test enregistré et problèmes » suit le schéma Format d'exportation axe.
