Registrazione con le API Node di axe-DevTools
Utilizzo del pacchetto @axe-devtools/logger per registrare i risultati di accessibilità
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 lo stesso setup di informazioni di autenticazione di qualsiasi altro componente basato su nodeJS di Axe DevTools. Riferisciti alla guida all'installazione per il metodo che hai usato per installare originariamente Axe DevTools per maggiori 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
Il logger viene importato come segue:
const { AxeDevToolsLogger } = require('@axe-devtools/logger');Inoltre, puoi 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 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.
Meta
L'oggetto risultati inizia con alcune utili informazioni meta. Queste includono il nome del test, l'indirizzo web della pagina testata, la data e l'ora in cui il test è stato eseguito, il set di regole axe-core utilizzato e altro.
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 che sono stati eseguiti, ma i risultati richiedono ulteriori revisioni per determinare in quale categoria i risultati dovrebbero ricadere. Un caso comune di incompletezza è il controllo del contrasto cromatico su elementi con sfondi di colore variabile dove non è sempre chiaro se è soddisfatto il contrasto sufficiente. I problemi in questa categoria non dovrebbero essere trattati automaticamente come violazioni, poiché potrebbero esserlo o meno. Per gli utenti con maggiore conoscenza dell'accessibilità, un esame più approfondito di questi risultati può aiutare a trovare ulteriori violazioni che non possono essere testate automaticamente.
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 passati e violazioni 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.
