Riferimento API di WebDriverJS per Axe DevTools per Web

Costruttore

Nella configurazione standard, l'unico argomento richiesto da passare al costruttore di Axe DevTools è l'istanza di WebDriverJS. Se desideri utilizzare una versione diversa di axe-core rispetto a quella inclusa originalmente o un set di regole personalizzato, puoi passare queste opzioni al costruttore.

Costruttore di Axe DevTools WebDriverJS:

AxeDevToolsBuilder(driver:WebDriver, String:ruleset|Object:axe (optional))

Devi passare un'istanza di Selenium WebDriver come primo argomento. Il secondo argomento opzionale può essere un ID di set di regole oppure un oggetto axe. Se non fornisci un secondo argomento, devi configurare il file di configurazione delle regole personalizzate @axe-devtools/script-builder, altrimenti il costruttore lancerà un'eccezione.

Questi esempi mostrano come usare il costruttore:

// instantiate with the Section 508 rule set
const builder = new AxeDevToolsBuilder(driver, '508');

// or with a specific axe instance
const axe = require('../axe-core-2.3.0');
const builder = new AxeDevToolsBuilder(driver, axe);

Regole Personalizzate

Per informazioni sull'uso di regole personalizzate con Axe DevTools per Web, leggi la guida alla generazione e integrazione di set di regole personalizzate nel guida CLI.

analizzare

Il metodo analyze() esegue l'analisi e restituisce i risultati della scansione di accessibilità.

analyze(): Promise<axe.AxeResults>

Esegui un'analisi usando la configurazione predefinita sul client fornito. Viene restituito un Promise, che si risolve con il set di risultati di accessibilità restituito da axe-core.

analizzareUniversale

Il metodo analyzeUniversal() esegue l'analisi e restituisce i risultati nel Formato Universale Axe. Il metodo analyze() esistente è invariato.

analyzeUniversal(): Promise<UniversalExport>

Opzioni di Catena

Esistono due opzioni per delimitare le scansioni di Axe DevTools. Puoi scegliere di includere o escludere specifici ambiti CSS. I metodi a catena (sotto) sul costruttore lo rendono possibile.

includi

new AxeDevToolsBuilder(driver).include('<CSS-Selector>');

Aggiunge un selettore CSS all'elenco degli elementi da includere nell'analisi. Gli elementi al di fuori dell'ambito passato a include() non verranno analizzati.

escludi

new AxeDevToolsBuilder(driver).exclude('<CSS-Selector>');

Aggiungi un selettore CSS all'elenco degli elementi da escludere dall'analisi. Verranno analizzati solo gli elementi al di fuori dell'ambito passato a exclude().

Questi metodi possono essere concatenati per perfezionare ulteriormente l'ambito della scansione, come mostrato sotto:

new AxeDevToolsBuilder(driver).include('<CSS-Selector>').exclude('<Inner-CSS-Selector>');

In questo esempio, tutti gli elementi all'interno di <CSS-Selector> verrebbero analizzati, ad eccezione degli elementi all'interno di <Inner-CSS-Selector>.

Configurazione delle Regole

I metodi di configurazione delle regole sovrascrivono la configurazione standard delle regole. Chiamate aggiuntive con questi metodi sovrascriveranno le chiamate precedenti.

conRegole

Il metodo withRules() limita l'analisi solo a quelle regole con gli ID di regola specificati. Accetta una stringa per un singolo ID di regola o un array di più ID di regole.

Questi esempi mostrano l'uso di withRules con un singolo ID di regola e un array di ID di regole:

//with a single rule ID
AxeDevToolsBuilder(driver).withRules('html-lang');

//with an array of rule IDs
AxeDevToolsBuilder(driver).withRules(['html-lang', 'image-alt']);

conTag

Il metodo withTags() limita l'analisi solo a quelle regole associate al tag fornito. Accetta un singolo tag o un array di tag, come mostrato di seguito:

//with a single tag
AxeDevToolsBuilder(driver).withTags('wcag2a');

//with an array of tags
AxeDevToolsBuilder(driver).withTags(['wcag2a', 'wcag2aa']);

disabilitaRegole

AxeDevToolsBuilder.disableRules(rules: RuleID[]): AxeDevToolsBuilder

Il metodo disableRules() fa sì che l'array di regole fornite venga saltato durante l'esecuzione di un'analisi.

opzioni di axe-core

opzioni

.options(options: Axe.RunOptions)

Il metodo options specifica opzioni da utilizzare da axe.run. Sovrascriverà qualsiasi altra opzione configurata, incluse le chiamate a withRules e withTags. Vedi documentazione API di axe-core per informazioni.

new AxeDevToolsBuilder(page).options({
  checks: { 'valid-lang': ['orcish'] }
});

configurare

.configure(config: Axe.Spec)

Il metodo configure inietta un oggetto di configurazione axe per modificare il set di regole prima di un'analisi. Le chiamate successive a questo metodo invalideranno quelle precedenti richiamando axe.configure() e sostituendo l'oggetto di configurazione. Vedi documentazione API di axe-core per la struttura dell'oggetto.

Il seguente esempio crea una nuova configurazione di axe-core e la passa ad Axe DevTools per essere utilizzata nella scansione:

const config = {
  checks: [Object],
  rules: [Object]
};
const results = await new AxeDevToolsBuilder(page).configure(config).analyze();

Servizio di utilizzo

Per impostazione predefinita, il servizio di utilizzo è abilitato e l'URL predefinito è https://usage.deque.com. Imposta la variabile d'ambiente AXE_TRACK_USAGE su false per disabilitarlo.

Variabili d'ambiente

Queste variabili d'ambiente ti permettono di configurare il servizio di utilizzo e cambiare le proprietà degli eventi riportati.

abilitaTracciamento

Questo metodo consente agli utenti di scegliere se inviare o meno i dati al servizio di utilizzo. L'invio è abilitato per impostazione predefinita.

.enableTracking(state: boolean)

AxeDevToolsBuilder(driver).enableTracking(true)

impostaUrlTracciamento

Questo metodo consente agli utenti di cambiare dove vengono inviate le metriche di utilizzo.

.setTrackingUrl(url: string)

AxeDevToolsBuilder(driver).setTrackingUrl('https://foobar.biz')

impostaIdDistinto

Questo metodo consente agli utenti di cambiare l'ID distinto memorizzato o utilizzato.

.setDistinctId(distinctId: string)

AxeDevToolsBuilder(driver).setDistinctId('foobar')