Generazione di Rapporti dai Risultati JSON di Axe DevTools

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Utilizzo del pacchetto @axe-devtools/reporter per generare rapporti

Not for use with personal data

Utilizza il reporter di Axe DevTools con Playwright per produrre rapporti di accessibilità per le pagine scansionate

Generare rapporti è ora facile quanto eseguire scansioni. Con il reporter di Axe DevTools, puoi generare rapporti HTML immediatamente visualizzabili, rapporti JUnit XML per visualizzazione negli ambienti di test CI e rapporti CSV da importare in una moltitudine di altri strumenti. Questa guida illustra come installare, configurare e usare il reporter di Axe DevTools.

Prerequisiti

Per utilizzare il reporter Axe DevTools, è necessario avere un progetto Node.js esistente in cui integrare sia Axe DevTools che il reporter. Questa parte della guida copre solo la configurazione del reporter, quindi se non hai ancora Axe DevTools che esegue scansioni, leggi questa guida per sapere come eseguire le scansioni con Axe DevTools.

Installare il Reporter

Se hai già configurato il tuo file ~/.npmrc per scaricare i pacchetti npm di Axe DevTools, tutto ciò che devi fare è eseguire il comando:

npm install @axe-devtools/reporter

Se non hai già configurato l'autenticazione dell'installazione, leggi uno dei guide all'installazione di base.

Aggiungere il Reporter al tuo Progetto

Importa il reporter con la sintassi che corrisponde al tuo progetto:

JavaScript con moduli CommonJS

const { Reporter } = require('@axe-devtools/reporter');

JavaScript con moduli ES

import { Reporter } from '@axe-devtools/reporter';

TypeScript

TypeScript utilizza la stessa sintassi import dei moduli ES. @axe-devtools/reporter include le proprie dichiarazioni di tipo, quindi non c'è un pacchetto @types/ separato da installare:

import { Reporter } from '@axe-devtools/reporter';

Per utilizzare il reporter, anche la tua libreria Axe DevTools e il webdriver dovranno essere importati.

Opzioni del Reporter

Ci sono tre scelte principali che devi fare quando usi il reporter di Axe DevTools

  1. Come nominare i rapporti
  2. Dove memorizzare i rapporti
  3. In quale formato generare i rapporti

Puoi nominare i rapporti come preferisci. Quando inizializzi il reporter, gli passi un nome di suite che tutti i rapporti generati con quell'istanza condivideranno. Ogni rapporto include anche un nome assegnato a ciascuna scansione. Anche la posizione, o directory, in cui verranno memorizzati i rapporti è completamente a discrezione dell'utente. Questo percorso directory è impostato anche a livello di istanza, quindi tutti i rapporti generati su un'istanza di reporter condivideranno una directory. I formati opzionali dei rapporti sono HTML, che consigliamo per la visualizzazione immediata da parte dell'utente, JUnit XML, che consigliamo per l'uso in ambienti CI, CSV, che consente di importare i risultati delle scansioni in altri strumenti, e EARL (Evaluation and Report Language), che genera un documento W3C EARL JSON-LD per rapporti di accessibilità leggibili da macchina.

Utilizzo del Reporter

Una volta importato il reporter nel tuo progetto, puoi inizializzarlo. Il costruttore accetta due argomenti: il nome della suite di rapporti e la directory di destinazione per i rapporti. La tua dichiarazione di inizializzazione dovrebbe apparire in questo modo:

const reporter = new Reporter('<suite-name>', '<dir-name>');

Ci sono due passaggi per eseguire il reporter una volta che una scansione Axe DevTools è stata eseguita. Prima, i risultati devono essere registrati affinché il reporter possa accedervi. Poi, il reporter elabora questi risultati per comporre il rapporto.

reporter.logTestResult('<scan-name>', <results-object>);
reporter.buildHTML('<scan-dir>');

File di esempio

Questo file di esempio utilizza la stessa base dell'esempio esempio di scrittura di test, ma integra anche il reporter. Lo stesso file è mostrato in JavaScript e in TypeScript.

JavaScript

const rimraf = require('rimraf');
const { AxeDevToolsBuilder } = require('@axe-devtools/playwright');
const playwright = require('playwright');
const { Reporter } = require('@axe-devtools/reporter');

(async () => {
  rimraf.sync('./a11y_results/*');

  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  const reporter = new Reporter('playwright', './a11y_results');

  await page.goto('https://dequeuniversity.com/demo/mars/');

  const results = await new AxeDevToolsBuilder({ page }).analyze();

  reporter.logTestResult('tested-page', results);
  reporter.buildHTML('./a11y_results');
  await browser.close();
})();

TypeScript

import rimraf from 'rimraf';
import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';
import { Reporter } from '@axe-devtools/reporter';
import type { AxeResults } from 'axe-core';

(async () => {
  rimraf.sync('./a11y_results/*');

  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  const reporter = new Reporter('playwright', './a11y_results');

  await page.goto('https://dequeuniversity.com/demo/mars/');

  const results: AxeResults = await new AxeDevToolsBuilder({ page }).analyze();

  reporter.logTestResult('tested-page', results);
  reporter.buildHTML('./a11y_results');
  await browser.close();
})();

Esempio di output

Gli esempi seguenti mostrano cosa contiene ogni report in formato leggibile dalla macchina per un singolo controllo fallito. Valori come il nome della suite e dei test provengono dagli argomenti passati al reporter; i campi rimanenti sono riempiti dai risultati di axe-core. Un report HTML è destinato ad essere aperto in un browser piuttosto che letto come sorgente, quindi non viene mostrato qui.

CSV

buildCSV scrive una riga per risultato, preceduta da una riga di intestazione che descrive ciascuna colonna. I campi che contengono virgole o interruzioni di linea, come Remediation, sono quotati.

Page URL,Page Title,Outcome,Impact,Code Snippet,Selector,Remediation,Manual,Rule ID,Help,Description,Help URL,Standard,WCAG 2 Success Criteria,Section 508 Paragraph,Tags,Date,axe-core,Needs Review,IGT,Found By,Test Title,Share URL
https://dequeuniversity.com/demo/mars/,My Test Suite,Failed,Serious,<h3>Be Bold...</h3>,"a[href=""mars2.html?a=be_bold""] > h3","Fix any of the following:
  Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1",false,color-contrast,Elements must meet minimum color contrast ratio thresholds,Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds,https://dequeuniversity.com/rules/axe/4.12/color-contrast,WCAG 2.0 Level AA,1.4.3 Contrast (Minimum),,"cat.color, wcag2aa, wcag143, TTv5, TT13.c, EN-301-549, EN-9.1.4.3, ACT, RGAAv4, RGAA-3.2.1",2026-07-10T18:11:41.859Z,4.12.1,No,,,My Test Suite,

JUnit XML

buildJUnitXML raggruppa i risultati in un testcase per regola, con un elemento failure per ogni regola che non ha superato il test. Quando una regola fallisce su più di un elemento, le occorrenze sono elencate all'interno dello stesso failure, separate da un divisore --------.

<?xml version="1.0" encoding="utf-8"?>
<testsuites>
<testsuite name="My Test Suite" package="axe-result" timestamp="2026-07-10T11:11:42-0700">
<properties>
<property name="platform.userAgent" value="" />
<property name="platform.testMachine" value="" />
<property name="testSubject.fileName" value="https://dequeuniversity.com/demo/mars/" />
<property name="testSubject.lineNum" value="-1" />
</properties>
<testcase name="color-contrast">
<failure message="Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
https://dequeuniversity.com/rules/axe/4.12/color-contrast" impact="serious">
<![CDATA[https://dequeuniversity.com/demo/mars/]]>
CSS Path: <![CDATA[a[href="mars2.html?a=be_bold"] > h3]]>
HTML: <![CDATA[<h3>Be Bold...</h3>]]>
</failure>
</testcase>
</testsuite>
</testsuites>

EARL

buildEARL produce un documento JSON-LD EARL (Evaluation and Report Language) W3C per il reporting di accessibilità in formato leggibile dalla macchina. Il @context dichiara i vocabolari utilizzati, e @graph contiene un'asserzione per ogni risultato.

{
  "@context": {
    "@vocab": "http://www.w3.org/ns/earl#",
    "earl": "http://www.w3.org/ns/earl#",
    "WCAG2": "http://www.w3.org/TR/WCAG21/#",
    "dct": "http://purl.org/dc/terms/",
    "sch": "https://schema.org/",
    "source": "dct:source",
    "title": "dct:title",
    "assertedBy": { "@type": "@id" },
    "outcome": { "@type": "@id" },
    "mode": { "@type": "@id" },
    "isPartOf": { "@id": "http://purl.org/dc/terms/isPartOf", "@type": "@id" }
  },
  "@graph": [
    {
      "@type": "Assertion",
      "mode": "earl:automatic",
      "subject": {
        "@type": ["earl:TestSubject", "sch:WebPage"],
        "source": "https://dequeuniversity.com/demo/mars/"
      },
      "assertedBy": "https://github.com/dequelabs/axe-core/releases/tag/v4.12.1",
      "result": {
        "@type": "TestResult",
        "outcome": "earl:failed"
      },
      "test": {
        "@type": "TestCase",
        "title": "color-contrast",
        "@id": "https://dequeuniversity.com/rules/axe/4.12/color-contrast",
        "isPartOf": ["WCAG2:contrast-minimum"]
      }
    }
  ]
}

Risoluzione dei Problemi

Se hai difficoltà a ottenere i risultati delle scansioni, contatta direttamente il tuo rappresentante Deque, raggiungici tramite il nostro desk di supporto, o inviaci un'email. Saremo felici di aiutarti.

Vedi Anche

Is this page helpful?

Help us improve this page

Still need help?