Utilizzare i selettori dinamici

Quando si testano pagine che generano ID di elementi o nomi di classi dinamici a ogni caricamento della pagina, Axe Watcher potrebbe avere difficoltà a determinare se i problemi di accessibilità siano duplicati tra le esecuzioni dei test. Questo articolo spiega come configurare Watcher per gestire correttamente questi scenari.

Il problema con i selettori dinamici

Per impostazione predefinita, Axe Watcher utilizza i selettori CSS che includono ID di elementi e classi per identificare dove si verificano problemi di accessibilità. Ad esempio, un problema potrebbe essere segnalato in:

iframe#main-iframe

Questo approccio funziona bene quando gli ID e le classi della tua pagina rimangono consistenti tra i caricamenti della pagina. Tuttavia, molte applicazioni web moderne generano identificatori dinamici che cambiano a ogni rendering della pagina, come:

• #component-a1b2c3d4
• .form-field-xyz789

Quando questi identificatori cambiano tra le esecuzioni dei test, Axe Watcher non può determinare se un problema è un duplicato di un problema precedentemente rilevato o una nuova occorrenza. Questo può comportare:

• Lo stesso problema segnalato come "nuovo" e "risolto" a ogni esecuzione del test
• Monitoraggio inaccurato del progresso dell'accessibilità nel tempo
• Difficoltà nell'identificare quali problemi sono stati effettivamente risolti

La soluzione: Abilitare il tracciamento delle genealogie

Per gestire i selettori dinamici, imposta l'opzione ancestry su true nella tua configurazione runOptions. Quando abilitato, Axe Watcher utilizza la posizione dell'elemento all'interno dell'albero DOM piuttosto che fare affidamento su ID e classi per individuare gli elementi tra le esecuzioni dei test.

Con ancestry abilitato, un selettore che in precedenza appariva così:

iframe#main-iframe

Includerà invece il percorso completo dall'elemento radice:

html > body > div:nth-child(20) > div:nth-child(1) > div > div > ul > li:nth-child(1) > div > span > iframe

Questo selettore posizionale rimane coerente tra i caricamenti delle pagine, anche quando gli ID e le classi cambiano, permettendo ad Axe Watcher di monitorare accuratamente i problemi duplicati.

Esempi di configurazione

JavaScript e TypeScript

Aggiungi l'opzione ancestry alla runOptions della tua configurazione axe:

const config = {
  axe: {
    apiKey: process.env.ACCESSIBILITY_API_KEY,
    projectId: process.env.PROJECT_ID,
    runOptions: {
      ancestry: true
    }
  }
}

Java

Utilizza il metodo setAncestry() sul tuo oggetto AxeRunOptions:

AxeRunOptions runOptions = new AxeRunOptions()
    .setAncestry(true);

AxeWatcherOptions options = new AxeWatcherOptions()
    .setApiKey(System.getenv("ACCESSIBILITY_API_KEY"))
    .setProjectId(System.getenv("PROJECT_ID"))
    .setRunOptions(runOptions);

AxeWatcher watcher = new AxeWatcher(options);

Quando utilizzare il tracciamento delle genealogie

Abilita ancestry: true quando la tua applicazione:

• Usa framework che generano ID di componenti dinamici (React, Vue, Angular)
• Implica librerie CSS-in-JS che generano nomi di classi unici
• Ha campi modulo o elementi interattivi con identificatori generati automaticamente
• Mostra conteggi incoerenti di "nuovo problema" e "problema risolto" tra le esecuzioni dei test per quelli che sembrano gli stessi problemi

Compromessi da considerare

Sebbene il tracciamento delle genealogie risolva il problema dei selettori dinamici, ci sono alcune considerazioni:

• Leggibilità del selettore: I selettori posizionali sono più lunghi e possono essere più difficili da leggere quando si recensiscono problemi nell'Axe Developer Hub.
• Sensibilità alla struttura del DOM: Se la struttura del DOM della tua pagina cambia significativamente tra i rendering (non solo gli ID/classi), anche i selettori posizionali possono cambiare.
• Debug: Quando indaghi su un problema, potresti trovare più facile individuare un elemento tramite un ID significativo piuttosto che tramite la sua posizione nell'albero DOM.

Per la maggior parte delle applicazioni con identificatori dinamici, i vantaggi di un monitoraggio accurato dei problemi superano questi compromessi.

Vedi anche

• Riferimento API per JavaScript e TypeScript Documentazione completa per runOptions e altre opzioni di configurazione
• AxeRunOptions Classe Riferimento API Java per le opzioni di runtime
• Glossario: Duplicato Comprendere come Axe Developer Hub identifica i problemi duplicati