Verwendung dynamischer Selektoren

Beim Testen von Seiten, die bei jedem Seitenaufruf dynamische Element-IDs oder Klassennamen generieren, kann Axe Watcher Schwierigkeiten haben, festzustellen, ob Barrierefreiheitsprobleme bei Testläufen Duplikate sind. Dieser Artikel erklärt, wie Sie Watcher konfigurieren können, um diese Szenarien korrekt zu handhaben.

Das Problem mit dynamischen Selektoren

Standardmäßig verwendet Axe Watcher CSS-Selektoren, die Element-IDs und Klassen enthalten, um festzustellen, wo Barrierefreiheitsprobleme auftreten. Zum Beispiel könnte ein Problem bei gemeldet werden:

iframe#main-iframe

Dieser Ansatz funktioniert gut, wenn die IDs und Klassen Ihrer Seite zwischen den Seitenaufrufen konsistent bleiben. Viele moderne Webanwendungen generieren jedoch dynamische Bezeichner, die sich bei jedem Seitenaufruf ändern, wie zum Beispiel:

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

Wenn sich diese Bezeichner zwischen den Testläufen ändern, kann Axe Watcher nicht feststellen, ob ein Problem ein Duplikat eines bereits erkannten Problems oder ein neuer Vorfall ist. Dies kann zu folgendem führen:

• Dass dasselbe Problem bei jedem Testlauf sowohl als „neu“ als auch als „gelöst“ gemeldet wird
• Ungenaues Verfolgen Ihres Fortschritts bei der Barrierefreiheit im Laufe der Zeit
• Schwierigkeiten zu erkennen, welche Probleme tatsächlich behoben wurden

Die Lösung: Aktivieren der Ancestry-Verfolgung

Um mit dynamischen Selektoren umzugehen, setzen Sie die Option ancestry in Ihrer runOptions-Konfiguration auf true. Wenn aktiviert, verwendet Axe Watcher die Position des Elements innerhalb des DOM-Baums, anstatt sich auf IDs und Klassen zu verlassen, um Elemente zwischen Testläufen zu lokalisieren.

Mit aktiviertem ancestry sieht ein Selektor, der zuvor so aussah:

iframe#main-iframe

Wird stattdessen den vollständigen Pfad vom Wurzelelement aus enthalten:

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

Dieser Positionsselektor bleibt über Seitenladungen hinweg konsistent, selbst wenn sich IDs und Klassen ändern, was es Axe Watcher ermöglicht, Duplikatprobleme genau zu verfolgen.

Konfigurationsbeispiele

JavaScript und TypeScript

Fügen Sie die Option ancestry zu Ihrem runOptions-Objekt in der Axe-Konfiguration hinzu:

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

Java

Verwenden Sie die Methode setAncestry() auf Ihrem AxeRunOptions-Objekt:

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);

Wann Ancestry-Verfolgung verwenden

Aktivieren Sie ancestry: true, wenn Ihre Anwendung:

• Frameworks verwendet, die dynamische Komponenten-IDs generieren (React, Vue, Angular)
• CSS-in-JS-Bibliotheken verwendet, die einzigartige Klassennamen generieren
• Formularfelder oder interaktive Elemente mit automatisch generierten Bezeichnern hat
• Inkonsequente Zählungen von „neuen Problemen“ und „gelösten Problemen“ zwischen Testläufen für anscheinend dieselben Probleme anzeigt

Zu berücksichtigende Abwägungen

Obwohl die Ancestry-Verfolgung das Problem der dynamischen Selektoren löst, gibt es einige Überlegungen:

• Lesbarkeit der Selektoren: Positionsselektoren sind länger und können schwerer zu lesen sein, wenn man Probleme im Axe Developer Hub überprüft.
• Empfindlichkeit gegenüber der DOM-Struktur: Wenn sich die DOM-Struktur Ihrer Seite zwischen den Renderings erheblich ändert (nicht nur die IDs/Klassen), können sich auch die Positionsselektoren ändern.
• Entwicklung: Beim Untersuchen eines Problems können Sie feststellen, dass es einfacher ist, ein Element über eine aussagekräftige ID als über seine Position im DOM-Baum zu finden.

Für die meisten Anwendungen mit dynamischen Bezeichnern überwiegen die Vorteile der genauen Problemverfolgung diese Kompromisse.

Siehe auch

• API-Referenz für JavaScript und TypeScript Vollständige Dokumentation für runOptions und andere Konfigurationsoptionen
• AxeRunOptions Klasse Java API-Referenz für Laufzeitoptionen
• Glossar: Duplikat Verstehen, wie der Axe Developer Hub doppelte Probleme identifiziert