Riferimento API WebDriverJS per axe DevTools per Web

Costruttore

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

Costruttore Axe DevTools WebDriverJS:

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

È necessario passare un'istanza di Selenium WebDriver come primo argomento. Il secondo argomento facoltativo può essere un ID del set di regole o un axe oggetto. Se non si specifica un secondo argomento, è necessario configurare il file di configurazione della regola personalizzata @axe-devtools/script-builder, altrimenti il costruttore genererà un'eccezione.

Questi esempi mostrano come utilizzare 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'utilizzo di regole personalizzate con axe DevTools per Web, leggere la guida sulla generazione e l'integrazione di set di regole personalizzati nella guida CLI.

analizzare

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

analyze(): Promise<axe.AxeResults>

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

Opzioni di concatenazione

Esistono due opzioni per definire l'ambito delle scansioni di axe DevTools. Puoi scegliere di includere o escludere ambiti CSS specifici. Ciò è possibile grazie ai metodi a catena (di seguito) del costruttore.

include

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 scansionati.

escludi

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

Aggiungere 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 di seguito:

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

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

Configurazione delle regole

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

con regole

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

Questi esempi mostrano l'utilizzo di withRules con un singolo ID regola e una matrice di ID regola:

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

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

con tag

Il metodo withTags() limita l'analisi solo alle 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 fornita venga ignorata durante l'esecuzione di un'analisi.

Opzioni axe-core

opzioni

.options(options: Axe.RunOptions)

Il metodo options specifica le opzioni da utilizzare da axe.run. Sovrascriverà tutte le altre opzioni configurate, comprese le chiamate a withRules e withTags. Per informazioni, consultare la documentazione API axe-core .

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

configura

.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 chiamando axe.configure() e sostituendo l'oggetto di configurazione. Per la struttura dell'oggetto, consultare la documentazione API axe-core .

L'esempio seguente crea una nuova configurazione axe-core e la passa ad axe DevTools per utilizzarla per la 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

Questo metodo consente agli utenti di modificare valori specifici del servizio di utilizzo tramite variabili di ambiente.

enableTracking

Questo metodo consente agli utenti di scegliere di inviare dati al servizio di utilizzo.

.enableTracking(state: boolean)

AxeDevToolsBuilder(driver).enableTracking(true)

setTrackingUrl

Questo metodo consente agli utenti di modificare la destinazione dei dati relativi alle metriche di utilizzo.

.setTrackingUrl(url: string)

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

imposta distinctId

Questo metodo consente agli utenti di modificare l'ID univoco memorizzato o utilizzato.

.setDistinctId(distinctId: string)

AxeDevToolsBuilder(driver).setDistinctId('foobar')