Después de ejecutar un escaneo, se le llevará a la pestaña „Visión general“ con los resultados de su escaneo. Allí encontrará un botón „Exportar“. Al hacer clic, aparecerá un cuadro de diálogo que le permitirá configurar el tipo de exportación que desea junto con el formato de exportación.
¿Sabía que puede compartir un registro de prueba completo guardado y todos sus problemas? Lea más sobre compartir registros de pruebas guardados
Tipos de exportación
Exportación de problemas
La exportación de problemas es compatible con los formatos CSV, JSON y JUnit XML. Esta exportación contendrá información relacionada con cada violación de accesibilidad encontrada tanto por pruebas automáticas como por Pruebas Guiadas Inteligentes.
Esquemas CSV compatibles
axe DevTools Pro CSV (predeterminado)
| nombre de columna | descripción |
|---|---|
| ID de regla | El identificador de la regla de accesibilidad |
| Descripción | Una descripción de la regla de accesibilidad |
| Ayuda | Información útil sobre la regla violada que lleva al problema |
| URL de ayuda | Una URL con ayuda para la regla dada |
| Impacto | El impacto o severidad del problema |
| Manual | Si el problema fue encontrado manualmente (IGT) o no |
| Necesita revisión | Si el problema potencial necesita revisión manual o no |
| IGT | Cuál IGT específico se ejecutó para encontrar el problema (en blanco si no fue encontrado por IGT) |
| Selector | El selector CSS para el elemento del problema |
| Resumen | Resumen del problema |
| Código fuente | El fragmento de código fuente HTML del elemento del problema |
| Etiquetas | Metadatos del problema (categorías, identificadores de puntos de control WCAG, etc.) |
| Encontrado por | Usuario que realizó la prueba en la que se detectó el problema |
| Título de la prueba | El nombre de la prueba guardada |
| URL de la prueba | La URL de la página probada |
| URL para compartir | La URL del problema compartido (solo se llena cuando el problema o prueba guardada se comparte explícitamente) |
| Creado en | Cuándo se creó el problema por primera vez |
axe Reporter CSV
Este esquema es compatible con el CSV de „axe Reporter“ generado a partir de integraciones de la API de axe DevTools. Este esquema es especialmente útil si está agregando datos tanto de la extensión del navegador axe DevTools como de las API/CLI.
| nombre de columna | descripción |
|---|---|
| URL de la página | La URL de la página probada |
| Título de la página | El título del documento de la página probada |
| Resultado | El resultado del problema (quedará en blanco para la extensión de axe DevTools) |
| Impacto | El impacto o la gravedad del problema |
| Fragmento de código | El fragmento del código fuente HTML del elemento del problema |
| Selector | El selector CSS para el elemento del problema |
| Remediación | Información para la remediación del problema |
| Manual | Si el problema fue encontrado manualmente (IGT) o no |
| ID de la regla | El identificador de la regla de accesibilidad asociada con el problema |
| Ayuda | Información útil sobre la regla violada que lleva al problema |
| Descripción | Una descripción de la regla de accesibilidad |
| URL de ayuda | Una URL con ayuda para la regla dada |
| Estándar | En qué estándar/punto de control de WCAG se enmarca el problema |
| Criterios de éxito de WCAG 2 | Los criterios de éxito de WCAG para el problema |
| Párrafo de la Sección 508 | Información aplicable de la Sección 508 para el problema |
| Etiquetas | Metadatos para el problema (categorías, identificadores de puntos de control de WCAG, etc.) |
| Fecha | Fecha en que se encontró el problema |
| axe-core | Versión de axe-core utilizada en la prueba que generó el problema |
| Necesita revisión | Si el problema potencial necesita revisión manual o no |
| IGT | Qué IGT específico se ejecutó para encontrar el problema (en blanco si no fue encontrado por IGT) |
| Encontrado por | Usuario que realizó la prueba en la que se generó el problema |
| Título de la prueba | El título del nombre de la prueba |
| URL para compartir | La URL compartida del problema (solo se llena cuando el problema o la prueba guardada se comparte explícitamente) |
Esquema JSON compatible
La exportación del problema en JSON es un array de datos de problemas con las siguientes propiedades para cada problema:
| Nombre de la propiedad | Tipo | Descripción |
|---|---|---|
axeVersion |
cadena | La versión de axe-core utilizada para la prueba en la que se generó el problema. |
createdAt |
cadena | La fecha/hora en la que se generó el problema. |
description |
cadena | Una descripción del problema. |
foundBy |
cadena | Usuario que realizó la prueba en la que se generó el problema. |
help |
cadena | Información útil sobre la regla violada que llevó al problema. |
helpUrl |
cadena | Una URL con ayuda para la regla dada. |
igt |
cadena | El nombre del IGT en el que se generó el problema (null si no se encuentra en el IGT). |
impact |
cadena | El impacto o la severidad del problema. |
isManual |
booleano | Si el problema fue encontrado manualmente (IGT) o no. |
needsReview |
booleano | Si el problema potencial necesita o no revisión manual. |
ruleId |
cadena | El identificador para la regla de accesibilidad asociada con el problema. |
selector |
arreglo | Un arreglo de selectores CSS para orientar el nodo asociado con la violación. Leer documentación de axe-core sobre selectores. |
shareURL |
cadena | La URL compartida del problema (solo se completa cuando el problema o la prueba guardada se comparten explícitamente). |
source |
cadena | El fragmento de código fuente HTML del elemento del problema. |
summary |
cadena | Resumen del problema. |
tags |
arreglo | Arreglo de etiquetas de cadena de metadatos para el problema (categorías, identificadores de puntos de control WCAG, etc.). |
testName |
cadena | El nombre de la prueba guardada en la que se encontró el problema. |
testPageTitle |
cadena | El título del documento en el que se encontró el problema. |
testUrl |
cadena | La URL de la página probada. |
Esquema XML de JUnit
Todos los datos del problema están envueltos en un elemento <testsuites />. Este elemento contendrá los siguientes atributos:
| Atributo | Descripción | Ejemplo |
|---|---|---|
id |
El nivel WCAG seleccionado en el momento de la exportación. | "wcag21AA" |
name |
El nombre de la prueba guardada o, para exportaciones hechas antes de guardar los resultados, el título del documento que se está probando. | "Recipe Dashboard" |
package |
El nombre del software en el que se realizó la prueba. | "axe DevTools Browser Extension" |
timestamp |
La fecha/hora de exportación. | "2023-04-04T00:08:10.772Z" (resultado de new Date().toISOString()) |
Dentro del <testsuites /> hay <testcase /> elementos. Cada <testcase /> representa un fallo de "regla". Este elemento contendrá los siguientes atributos:
| Atributo | Descripción | Ejemplo |
|---|---|---|
name |
El ID de la regla. | "aria-role-missing" |
id |
En qué IGT se encontró el problema (se omitirá para problemas automáticos). | "igt:keyboard" |
Dentro de cada elemento <testcase /> hay un elemento <failure />. Este elemento representa un fallo de la regla definida en el <testcase />. El <failure /> contiene los siguientes atributos:
| Atributo | Descripción | Ejemplo |
|---|---|---|
message |
La descripción del problema (fallo) seguida de la URL de ayuda de la regla | "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 |
El impacto del problema. | "critical" |
Dentro de cada elemento <failure />, se imprimirá cada instancia del selector del fallo ("Ruta CSS") y del código fuente ("HTML"). Cada instancia estará separada por --------. Un ejemplo de este texto es el siguiente:
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>Ejemplo de archivo XML JUnit
El siguiente es un ejemplo de exportación XML de JUnit. En este ejemplo tenemos:
- Nivel AA de WCAG 2.1 seleccionado
- Nombre de prueba guardado "Recipe Dashboard"
- 2 problemas de
semantic-data-table-headersplanteados en el IGT de tablas - 3 problemas de
keyboard-inaccessibleplanteados en el IGT de teclado - 2 problemas de
aria-role-missingplanteados en el IGT de teclado
<?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>Exportación de prueba guardada
Los saltos de línea están escapados, por lo que todas las cadenas estarán en una sola línea.
La exportación "Prueba guardada y problemas" sigue el esquema Formato de exportación de axe.
