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 regole o un axe oggetto. Se non fornisci un secondo argomento, devi configurare il file di configurazione delle regole personalizzate @axe-devtools/script-builder, altrimenti il costruttore genererà 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 su come utilizzare le regole personalizzate con Axe DevTools per Web, leggi la guida sulla generazione e integrazione dei set di regole personalizzati nella guida CLI.

analizzare

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

analyze(): Promise<axe.AxeResults>

Esegui un'analisi utilizzando 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 analyzeUniversal() metodo esegue l'analisi e restituisce i risultati nel Formato Universale Axe. Il analyze() metodo esistente rimane 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 del campo 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 del campo 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, verrebbero esaminati tutti gli elementi all'interno di <CSS-Selector> , eccetto per gli 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 withRules() metodo limita l'analisi solo a quelle regole con gli ID 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 withTags() metodo limita l'analisi solo a quelle regole associate al tag fornito. Accetta un singolo tag o un array di tag, come mostrato sotto:

//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 disableRules() il metodo fa in modo che l'array di regole fornito sia ignorato durante l'esecuzione di un'analisi.

opzioni di axe-core

opzioni

.options(options: Axe.RunOptions)

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

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

configurare

.configure(config: Axe.Spec)

Il configure metodo inietta un oggetto di configurazione axe per modificare il set di regole prima di un'analisi. Le chiamate successive a questo metodo invalidano quelle precedenti chiamando axe.configure() e sostituendo l'oggetto di configurazione. Vedi la 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 è disabilitato e l'URL predefinito è https://usage.deque.com.

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 di inviare dati al servizio di utilizzo.

.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')