Logging con le API di Node axe-DevTools

Esistono modi praticamente illimitati per sfruttare i risultati di una scansione di axe DevTools

Tutte le scansioni di accessibilità guidate da axe-core possono essere configurate in modo da restituirle come oggetto JSON. Questo formato è facile da utilizzare per i neofiti dell'accessibilità web, contiene le informazioni approfondite di cui hanno bisogno gli esperti in materia e consente la generazione automatica di report e test personalizzati anche al di fuori di un formato di test standard basato su asserzioni.

axe DevTools Logger

Se non si desidera generare report in uno dei formati offerti, ma si desidera salvare i risultati su file, Deque offre un componente che si occupa di questa operazione, denominato axe DevTools Logger. Con questo modulo puoi scrivere i risultati dei test in un file in linea con l'esecuzione dei test.

Per installarlo, è necessario impostare le stesse informazioni di autenticazione di qualsiasi altro componente nodeJS di axe DevTools. Per ulteriori informazioni, fare riferimento alla guida all'installazione che hai utilizzato originariamente per installare axe DevTools.

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

Utilizzo di axe DevTools Logger

Il logger viene importato come segue:

const AxeDevToolsLogger = require('@axe-devtools/logger').default;

Inoltre, è possibile importare il pacchetto utilizzando i moduli ES6:

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

Una volta importato, puoi istanziarlo in questo modo

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

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

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

Il file registrato apparirà nella directory specificata quando hai istanziato il logger con il nome file Test-Reports-<test-name>.json.

Panoramica dei risultati

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

Meta

L'oggetto risultati inizia con alcune utili meta-informazioni. Ciò include il nome del test, l'indirizzo web della pagina testata, la data e l'ora in cui è stato eseguito il test, il set di regole axe-core utilizzato e altro ancora.

Risultati

L'inizio dei risultati è contrassegnato dall'intestazione "scoperte". Esistono quattro tipi di risultato, ognuno con il proprio array. Questi tipi di risultato sono inapplicabile, incompleto, passato e violazione. Inoltre, subito prima dell'array delle violazioni sono presenti alcuni dati specifici del test.

Inapplicabile

Non applicabile significa che non c'era alcun contenuto di pagina pertinente a quel particolare test, ad esempio test relativi ai moduli su una pagina senza moduli.

Incompleto

Incompletes sono test eseguiti, ma i cui risultati richiedono un'ulteriore revisione per stabilire in quale categoria debbano rientrare. Un'occorrenza incompleta comune è la verifica del contrasto di colore su elementi con sfondi di colore variabile, in cui non è sempre chiaro se il contrasto è sufficiente. I problemi di questa categoria non devono essere automaticamente trattati come violazioni, poiché potrebbero esserlo o meno. Per gli utenti con maggiori conoscenze in materia di accessibilità, un esame più approfondito di questi risultati può aiutare a individuare ulteriori violazioni che non possono essere verificate automaticamente.

Superamenti

Questo gruppo di risultati elenca le regole che, una volta verificate, non hanno rilevato alcuna violazione dell'accessibilità correlata. A ciascuna regola approvata sarà associato un array di elementi di pagina che sono stati controllati rispetto alla regola e approvati.

Violazioni

L'array delle violazioni contiene tutte le violazioni di accessibilità rilevate durante la scansione. Grazie alla politica di Deque che prevede l'assenza di falsi positivi, qualsiasi risultato trovato qui è garantito come autentico. Ogni violazione contiene ulteriori informazioni sulla natura della violazione, sulla sua posizione nella pagina, suggerimenti su come risolverla e altro ancora. Per ulteriori informazioni, consultare il riferimento di campo riportato di seguito.

Riferimento sul campo - Superamenti e violazioni

I campi contenuti negli oggetti superamenti e violazioni sono elencati di seguito:

• descrizione — Stringa di testo che descrive cosa fa la regola
• help — Testo di aiuto che descrive il test eseguito
• helpUrl — URL che fornisce maggiori informazioni sui dettagli della violazione. Link a una pagina del sito della Deque University.
• id — Identificatore univoco per la regola; vedere l'elenco delle regole.
• impatto — Quanto è grave la violazione. Può essere minore, moderato, grave, o critico se il test non è riuscito, o nullo se il controllo è stato superato
• tags — Array di tag a cui è assegnata questa regola. Questi tag possono essere utilizzati nella struttura delle opzioni per selezionare quali regole eseguire (vedere i parametri attest.a11yCheck).
• nodi — Array di tutti gli elementi testati dalla regola
  • html — Frammento di HTML dell'elemento
  • impatto — Quanto è grave la violazione. Può essere minore, moderato, grave, o critico se il test non è riuscito, o nullo se il controllo è stato superato
  • target — Array di selettori in cui ogni elemento corrisponde a un livello di iframe o frame. Se è presente un iframe o un frame, nel target dovrebbero esserci due voci. Se ci sono tre livelli di iframe, nel target dovrebbero esserci quattro voci.
  • qualsiasi — Array dei controlli effettuati di cui almeno uno deve essere stato superato. Ogni voce nell'array contiene:
  • id — Identificatore univoco per questo controllo. Gli ID di controllo potrebbero essere gli stessi degli ID delle regole
  • impatto — Quanto è serio questa particolare verifica. Può essere di grado lieve, moderato, grave o critico. Ogni verifica che fa parte di una regola può avere impatti diversi. L'impatto più elevato di tutte le verifiche che falliscono viene segnalato per la regola
  • messaggio — Descrizione del motivo per cui questo test è stato superato o fallito
  • dati — Informazioni aggiuntive specifiche del tipo di test, facoltative. Ad esempio, un controllo del contrasto dei colori includerebbe il colore di primo piano, il colore di sfondo, il rapporto di contrasto, ecc.
  • relatedNodes — Array facoltativo di informazioni su altri nodi correlati a questo test. Ad esempio, una violazione del test 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 dei controlli effettuati, dove tutti devono essere superati. Ogni voce nell'array contiene le stesse informazioni dell'array any
  • nessuno tipo — Serie di controlli effettuati, nessuno dei quali deve essere stato superato. Ogni voce nell'array contiene le stesse informazioni dell'array any

Inoltre, l'oggetto dei risultati JSON semplifica la scrittura di test personalizzati. Oltre alle asserzioni standard di violazione dell'accessibilità, è possibile suddividere l'oggetto dei risultati in base alle violazioni, alla loro gravità, al loro impatto, al loro ruleset o a uno qualsiasi dei parametri nell'oggetto dei risultati. È quindi possibile testare tutti i dati disposti nell'oggetto risultati.

Prossimi passi

Deque semplifica la condivisione e l'analisi dei risultati delle scansioni con il nostro reporter. È configurabile per produrre report HTML, JUnit XML o CSV e, una volta impostato, restituisce i report automaticamente. Per informazioni su come impostare e utilizzare il reporter, consultare la guida del reporter