Registrazione con le API di Axe DevTools Node

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/logger per registrare i risultati di accessibilità

Not for use with personal data

Ci sono praticamente modi illimitati per sfruttare i risultati di una scansione di Axe DevTools

Tutte le scansioni di accessibilità guidate da axe-core possono essere impostate per restituire i loro risultati come oggetto JSON. Questo formato rende facile il consumo per i neofiti dell'accessibilità web, contiene la profondità di informazioni necessaria agli esperti del settore e consente la generazione automatizzata di report e test personalizzati anche al di fuori di un formato di test basato su asserzioni standard.

Logger di Axe DevTools

Se non vuoi generare report in uno dei formati offerti, ma desideri salvare i risultati su file, Deque offre un componente per gestire questo per te chiamato Axe DevTools Logger. Con questo modulo, puoi scrivere i risultati dei test su file mentre esegui i tuoi test.

Per l'installazione, è necessario configurare le stesse informazioni di autenticazione come per qualsiasi altro componente basato su Node.js di Axe DevTools. Consultare la guida all'installazione per il metodo utilizzato originariamente per installare Axe DevTools per ulteriori informazioni.

Per installare il logger, esegui il comando npm install @axe-devtools/logger per npm o yarn add @axe-devtools/logger per yarn.

Utilizzo del logger di Axe DevTools

Importa il logger con la sintassi che corrisponde al tuo progetto.

In JavaScript con moduli CommonJS:

const { AxeDevToolsLogger } = require('@axe-devtools/logger');

In JavaScript con moduli ES:

import { AxeDevToolsLogger } from '@axe-devtools/logger';

In TypeScript, la sintassi import è la stessa dei moduli ES. @axe-devtools/logger include le proprie dichiarazioni di tipo, quindi non c'è bisogno di installare un pacchetto @types/ separato. Aggiungi il tipo AxeResults da axe-core quando vuoi annotare i risultati che passi al logger:

import { AxeDevToolsLogger } from '@axe-devtools/logger';
import type { AxeResults } from 'axe-core';

Una volta importato, puoi istanziarlo in questo modo. Le istruzioni rimanenti in questa pagina sono le stesse sia in JavaScript che in TypeScript:

const logger = new AxeDevToolsLogger('Report Name', '/path/to/a/directory');

Dopo aver eseguito una scansione e generato un oggetto risultati, puoi registrare il risultato su file con questo comando

logger.logTestResult('\<test-name>', results-object);

Il file registrato apparirà nella directory specificata durante l'istanziamento del logger con un nome di file di Test-Reports-<test-name>.json.

Panoramica dei Risultati

Le seguenti sezioni descrivono gli oggetti contenuti nel file JSON dei risultati.

Risultati

L'inizio dei risultati è delineato dall'intestazione "risultati". Ci sono quattro tipi di risultato, ognuno con il proprio array. Questi tipi di risultato sono inapplicabile, incompleto, passato e violazione. Inoltre, ci sono alcuni dati specifici del test situati immediatamente prima dell'array delle violazioni.

Inapplicabile

Inapplicabile significa che non c'era contenuto della pagina rilevante per quel particolare test, come i test relativi ai moduli su una pagina senza moduli.

Incompleto

Incompleti sono test eseguiti, ma i risultati richiedono un'ulteriore revisione per determinare in quale categoria dovrebbero rientrare. Un caso comune di incompletezza riguarda i controlli del contrasto cromatico su elementi con sfondi a colori variabili, dove non è sempre chiaro se il contrasto sufficiente sia rispettato. I problemi in questa categoria non devono essere automaticamente trattati come violazioni, poiché potrebbero esserlo o meno. Per gli utenti con maggiori conoscenze sull'accessibilità, un esame più approfondito di questi risultati può aiutare a individuare ulteriori violazioni che non possono essere automaticamente testate.

Passati

Questo gruppo di risultati elenca le regole che sono state verificate e non hanno trovato violazioni di accessibilità correlate. Associato a ciascuna regola passata ci sarà un array di elementi di pagina che sono stati verificati rispetto alla regola e sono passati.

Violazioni

L'array delle violazioni contiene tutte le violazioni di accessibilità trovate nella scansione. Grazie alla politica di Deque di zero falsi positivi, ogni risultato trovato qui è garantito come genuino. Ogni violazione contiene ulteriori informazioni su quale sia la violazione, dove si trova sulla pagina, suggerimenti su come risolverla e altro ancora. Vedi il riferimento ai campi qui sotto per ulteriori informazioni.

Riferimento dei Campi - Passati e Violazioni

I campi contenuti negli oggetti passes e violations sono elencati di seguito:

descrizione — Stringa di testo che descrive cosa fa la regola
aiuto — Testo di aiuto che descrive il test eseguito
helpUrl — URL che fornisce ulteriori informazioni sui dettagli della violazione. Collegamenti a una pagina sul sito di Deque University.
id — Identificatore univoco per la regola; vedi l'elenco delle regole.
impatto — Quanto è grave la violazione. Può essere uno dei valori minore, moderato, serio o critico se il test fallisce o nullo se il controllo è passato
tag — Array di tag assegnati a questa regola. Questi tag possono essere utilizzati nella struttura delle opzioni per selezionare quali regole eseguire (vedi i parametri attest.a11yCheck).
nodi — Array di tutti gli elementi che la regola ha testato
- html — Frammento di HTML dell'elemento
- impatto — Quanto è grave la violazione. Può essere uno dei valori minore, moderato, serio o critico se il test fallisce o nullo se il controllo è passato
- target — Array di selettori per ciascun livello di iframe o frame. Se c'è un iframe o frame, dovrebbero esserci due voci nel target. Se ci sono tre livelli di iframe, dovrebbero esserci quattro voci nel target.
- any — Array di controlli effettuati in cui almeno uno deve essere passato. Ogni voce nell'array contiene:
- id — Identificatore univoco per questo controllo. Gli id dei controlli possono coincidere con gli id delle regole
- impatto — Quanto è grave questo particolare controllo. Può essere uno dei valori minore, moderato, serio o critico. Ogni controllo che fa parte di una regola può avere impatti diversi. L'impatto più alto di tutti i controlli che falliscono è riportato per la regola
- messaggio — Descrizione del perché questo controllo è passato o fallito
- dati — Informazioni aggiuntive che sono specifiche per il tipo di controllo che è opzionale. Ad esempio, un controllo di contrasto cromatico includerebbe il colore di primo piano, il colore di sfondo, il rapporto di contrasto, ecc.
- nodiCorrelati — Array opzionale di informazioni su altri nodi correlati a questo controllo. Ad esempio, una violazione del controllo degli id duplicati elencherebbe gli altri selettori che avevano lo stesso id duplicato. Ogni voce nell'array contiene le seguenti informazioni:
  - target — Array di selettori per il nodo correlato
  - html — Sorgente HTML del nodo correlato
- all — Array di verifiche effettuate dove tutte devono essere superate. Ogni voce nell'array contiene le stesse informazioni dell'array any
- none — Array di verifiche effettuate dove nessuna deve essere superata. Ogni voce nell'array contiene le stesse informazioni dell'array any

Inoltre, l'oggetto risultati JSON rende facile scrivere i propri test personalizzati. Oltre alle asserzioni standard di violazione dell'accessibilità, è possibile suddividere l'oggetto risultati per violazioni, la loro severità, il loro impatto, il loro set di regole associato o qualsiasi altro parametro nell'oggetto risultati. Qualsiasi dato riportato nell'oggetto risultati può quindi essere testato.

Prossimi Passi

Deque rende facile condividere e comprendere i risultati delle scansioni con il nostro reporter. È configurabile per produrre rapporti in formato HTML, JUnit XML o CSV e una volta impostato, restituisce automaticamente i rapporti. Vedi la guida del reporter per informazioni su come impostare e utilizzare il reporter.

Puoi anche caricare i tuoi risultati su Axe Developer Hub. Vedi Utilizzare la CLI per inviare i risultati d'accessibilità a Axe Developer Hub.