Browser-JavaScript-API-Referenz für axe DevTools for Web

Einleitung

Die axe DevTools-API ist als Verbesserung gegenüber der vorherigen Generation von Zugänglichkeits-APIs konzipiert. Es bietet die folgenden Vorteile:

• Läuft in jedem modernen Browser
• Entwickelt für die Zusammenarbeit mit vorhandener Testinfrastruktur
• Läuft lokal; es ist keine Verbindung zu einem Drittanbieter-Server erforderlich
• Führt eine Überprüfung auf Verstöße auf mehreren Ebenen verschachtelter Iframes durch
• Bietet eine Liste der Regeln und Elemente, die die Zugänglichkeitsprüfung bestanden haben, und stellt sicher, dass die Regeln auf das gesamte Dokument angewendet wurden

Erste Schritte

In diesem Abschnitt wird kurz beschrieben, wie Sie die axe DevTools API verwenden können, um Webseiteninhalte zu analysieren und es gibt ein JSON-Objekt zurück, das alle gefundenen Barrierefreiheitsverletzungen auflistet.

Die axe DevTools-API kann als Teil eines umfassenderen Prozesses verwendet werden, der auf vielen, wenn nicht allen Seiten einer Website ausgeführt wird. Die API analysiert den Inhalt von Webseiten und gibt ein JSON-Objekt zurück, das alle gefundenen Verstöße gegen die Barrierefreiheit auflistet. So können Sie loslegen:

1. Seite im Testsystem laden
2. Legen Sie optional Konfigurationsoptionen für die JavaScript-API fest (AxeDevTools.configure).
3. Rufen Sie die JavaScript-API „analyze“ auf (AxeDevTools.run)
4. Entweder Sie prüfen die Ergebnisse oder Sie speichern sie für eine spätere Verarbeitung.

API-Referenz

Überblick

Die axe DevTools-APIs werden in der JavaScript-Datei bereitgestellt axe-devtools.js. Es muss in der zu testenden Webseite enthalten sein. Parameter werden als JavaScript-Funktionsparameter gesendet. Die Ergebnisse werden im JSON-Format zurückgegeben.

API-Hinweise

• Ein Regeltest besteht aus Untertests. Jeder Untertest wird in einem Array von „Checks“ zurückgegeben.

– Das in "helpUrl" im Ergebnisobjekt enthält einen Link zu einer ausführlicheren Beschreibung des Barrierefreiheitsproblems und den vorgeschlagenen Abhilfemaßnahmen. Alle Links verweisen auf die Hilfeseiten der Deque University.

AxeDevTools.init

Zweck

Initialisieren Sie die axe DevTools-API, um einen der integrierten Standardregelsätze zu verwenden.

Beschreibung

Initialisiert die axe DevTools-Engine, überschreibt den Standardregelsatz und aktiviert einen der Standardregel-Teilsätze.

Zusammenfassung

AxeDevTools.init(ruleSetID);

Parameter

• ruleSetID - optional Zeichenfolge zur Identifizierung des Regelsatzes. Aktuell gültige Werte sind:

  • 508
  • en301549
  • ttv5
  • wcag2
  • wcag21
  • wcag22
  • wcag2aaa
  • wcag21aaa
  • wcag22aaa

Rückgabewert: undefined

AxeDevTools.ruleSets

Zweck

Ein Array der Definitionen von Regelsätzen

Beschreibung

Ermöglicht den direkten Zugriff auf das Array von Regelsatzdefinitionen. Das Array besteht aus JavaScript-Objekten mit der folgenden Struktur:

{
  id: String identifier for the rule set,
  defn: Object containing the rule set definition
}

Beispiel Erstes

So filtern Sie das Array, um die Definition des Regelwerks der WCAG 2-Ebene A und AA zu finden.

var rsets = AxeDevTools.ruleSets;
var wcag2 = rsets.filter(function (item) {
  return item.id === 'wcag2';
})[0].defn;

AxeDevTools.getRules

Zweck

Um Informationen zu allen Regeln im System zu erhalten

Beschreibung

Gibt eine Liste aller Regeln mit ihrer ID und Beschreibung zurück.

Zusammenfassung

AxeDevTools.getRules([Tag Name 1, Tag Name 2...]);

Parameter

• tags - optional Array von Tags, die zum Filtern zurückgegebener Regeln verwendet werden. Wenn es weggelassen wird, werden alle Regeln zurückgegeben.

Gibt zurück: Array von Regeln, die dem Eingabefilter entsprechen, wobei jeder Eintrag das Format hat {ruleId: <id>, description: <desc>}

Die aktuell unterstützten Tags sind in der folgenden Tabelle aufgeführt:

Beispiel 1

In diesem Beispiel übergeben wir die WCAG 2 A- und AA-Tags an AxeDevTools.getRules , um nur diese Regeln abzurufen. Der Funktionsaufruf gibt ein Array von Regeln zurück.

Anruf: AxeDevTools.getRules(['wcag2aa', 'wcag2a']);

Zurückgegebene Daten:

[
  { ruleId: "area-alt", description: "Checks the <area> elements of image…" },
  { ruleId: "aria-allowed-attr", description: "Checks all attributes that start…" },
  { ruleId: "aria-required-attr", description: "Checks all elements that contain…" },
  …
]

AxeDevTools.configure

Zweck

So konfigurieren Sie das Format der von axe DevTools verwendeten Daten. Hiermit können neue Regeln hinzugefügt werden, die zur Ausführung bei der Bibliothek registriert werden müssen.

Beschreibung

Der Benutzer gibt das Format der JSON-Struktur an, die an den Callback von AxeDevTools.run übergeben wird.

Zusammenfassung

AxeDevTools.configure({
  branding: {
    brand: String,
    application: String
  },
  reporter: 'option',
  checks: [Object],
  rules: [Object]
});

Parameter

• configurationOptions - Optionsobjekt, in dem gültige Name/Wert-Paare sind:
  • branding - variabel (optional) Wird verwendet, um das Branding von helpUrls festzulegen.
    • brand - string (optional) legt den Markennamen fest – Standard: „worldspace“
    • application - string (optional) legt den Anwendungsstring fest – Standard: „AxeDevToolsAPI“
  • reporter - Wird verwendet, um das Ausgabeformat festzulegen, das die AxeDevTools.run Funktion an die Rückruffunktion übergibt
    • v1 um das Format der vorherigen Version zu verwenden: AxeDevTools.configure({ reporter: "v1" });
    • v2 um das Format der aktuellen Version zu verwenden: AxeDevTools.configure({ reporter: "v2" });
  • checks - Wird verwendet, um Prüfungen zur Liste der von Regeln verwendeten Prüfungen hinzuzufügen oder um die Eigenschaften vorhandener Prüfungen zu überschreiben.
    • Das Checks-Attribut ist ein Array von Prüfobjekten.
    • Jedes Prüfobjekt kann folgende Attribute enthalten:
    • id - Zeichenfolge (erforderlich). Dadurch wird die Prüfung eindeutig identifiziert. Wenn die Prüfung bereits vorhanden ist, werden alle angegebenen Prüfeigenschaften überschrieben. Die Eigenschaften, die unten als erforderlich, wenn es neu ist gekennzeichnet sind, sind optional, wenn die Prüfung überschrieben wird.
    • evaluate - Funktion (erforderlich, wenn es neu ist). Dies ist die Funktion, die die Funktionalität der Überprüfung implementiert.
    • after - Funktion (optional). Diese Funktion wird für Überprüfungen aufgerufen, die auf Seitenebene ausgeführt werden, um die Ergebnisse aus den Iframes zu verarbeiten.
    • options - gemischt (optional). Dieses options Objekt wird an die evaluate Funktion übergeben und dient zur Konfiguration von Prüfungen. Dies ist die am häufigsten vorkommende Eigenschaft, die bei bestehenden Prüfungen überschrieben werden soll.
    • matches - Zeichenfolge (optional). Diese CSS-Auswahlzeichenfolge filtert die Knoten, die an die evaluate -Funktion übergeben werden.
    • enabled - Boolesch (optional, Standard true). Hiermit wird angegeben, ob die Prüfung standardmäßig aktiviert oder deaktiviert ist. Nicht aktivierte Prüfungen werden nicht ausgewertet, auch wenn sie in einer Regel enthalten sind. Das Überschreiben ist eine gängige Methode, um eine bestimmte Prüfung für mehrere Regeln zu deaktivieren.
  • rules - Wird verwendet, um dem vorhandenen Regelsatz Regeln hinzuzufügen oder die Eigenschaften vorhandener Regeln zu überschreiben. Das rules Attribut ist ein Array von rule Objekten. Jedes rule Objekt kann die folgenden Attribute enthalten:
    • id - Zeichenfolge (erforderlich). Dadurch wird die Regel eindeutig identifiziert. Wenn die Regel bereits vorhanden ist, wird sie mit allen angegebenen Attributen überschrieben. Die unten als erforderlich markierten Attribute werden nur für neue Regeln benötigt.
    • selector – Zeichenfolge (optional, Standard „*“). Ein CSS-Selektor zum Identifizieren der Elemente, die zur Auswertung an die Regel übergeben werden.
    • excludeHidden – Boolesch (optional, Standard true). Gibt an, ob ausgeblendete Elemente zur Auswertung an die Regel übergeben werden sollen.
    • enabled - Boolesch (optional, Standard true). Ob die Regel aktiviert ist (ein allgemeines Attribut zum Überschreiben).
    • pageLevel – Boolesch (optional, Standard false). Dies gibt an, ob die Seite nur funktioniert, wenn der Geltungsbereich die gesamte Seite umfasst. Ein Beispiel für eine solche Regel ist die skip link Regel. Es wird nicht empfohlen, diese Eigenschaft zu überschreiben, es sei denn, die Implementierung wird ebenfalls geändert.
    • any - Array (optional, Standard []). Dies ist die Liste der Prüfungen, die alle bestanden werden müssen, andernfalls liegt ein Verstoß vor.
    • all - Array (optional, Standardwert []). Dies ist die Liste der Prüfungen, bei deren Fehlschlagen ein Verstoß generiert wird.
    • none - Array (optional, Standardwert []). Dies ist eine Liste der Prüfungen, die, wenn keine davon erfolgreich ist, einen Verstoß generieren.
    • tags - Array (optional, Standardwert []). Eine Liste der Tags, die die Regel klassifizieren . In der Praxis müssen Sie einige gültige Tags angeben, sonst wird die Regel bei der Standardauswertung nicht aufgerufen. Es ist üblich, den Standard (WCAG 2 und/oder Abschnitt 508), die WCAG 2-Ebene, den Paragraphen des Abschnitts 508 und die WCAG 2-Erfolgskriterien einzuschließen. Tags werden erstellt, indem alle Buchstaben in Kleinbuchstaben umgewandelt werden, Leerzeichen und Punkte entfernt werden und das Ergebnis aneinandergereiht wird. Beispielsweise würde aus WCAG 2 A Erfolgskriterium 1.1.1 ["wcag2a", "wcag111"] werden.
    • matches - Zeichenfolge (optional, Standard „*“). Ein CSS-Selektor, der Elemente ausschließt, die nicht mit ihm übereinstimmen.

Gibt zurück: Nichts

AxeDevTools.reset

Zweck

Setze die Konfiguration auf die Standardkonfiguration zurück.

Beschreibung

Überschreiben Sie alle vorherigen Aufrufe von AxeDevTools.configure oder AxeDevTools.reset und setzen Sie die Konfiguration auf die Standardkonfiguration zurück.

Zusammenfassung

AxeDevTools.reset();

Parameter

Keine

Gibt zurück: undefined

AxeDevTools.run

Zweck

Analysieren Sie die aktuell geladene Seite.

Beschreibung

Führt mehrere Regeln für die bereitgestellte HTML-Seite aus und gibt die resultierende Problemliste zurück.

Zusammenfassung

AxeDevTools.run(context, options, callback);

Parameter für AxeDevTools.run

• context: (optional) Definiert den Umfang der Analyse – den Teil des DOM, den Sie analysieren möchten. Dies ist normalerweise der document oder ein bestimmter Selektor wie z. B. Klassenname, ID, Selektor usw.
• options: (optional) Satz von Optionen, die an Regeln oder Prüfungen übergeben werden und diese vorübergehend ändern. Dies steht im Gegensatz zu AxeDevTools.configure, das dauerhafter ist. Weitere Informationen siehe oben
• callback: (optional) Die Rückruffunktion, die entweder null ein Fehlerergebnis als ersten Parameter erhält, und das Ergebnisobjekt wenn die Analyse erfolgreich abgeschlossen wurde oder undefined wenn nicht.

context Parameter

Standardmäßig AxeDevTools.run wird das gesamte Dokument getestet. Das context -Objekt ist ein optionaler Parameter, der angibt, welches Element getestet werden sollte und welches nicht. Ihm kann eines der folgenden übergeben werden:

1. Eine Elementreferenz, die den Teil des Dokuments darstellt, der analysiert werden muss
   • Beispiel: Um die Analyse auf das <div id="content"> -Element zu beschränken: document.getElementById("content")
2. Eine NodeList, wie sie von document.querySelectorAll zurückgegeben wird.
3. Ein CSS-Selektor, der den Teil des Dokuments auswählt, der analysiert werden muss. Hierzu gehören:
   • Ein CSS-Selektor als Klassenname (z. B. .classname)
   • Ein CSS-Selektor als Knotenname (z. B. div)
   • Ein CSS-Selektor einer Element-ID (z. B. #tag)
4. Ein Include-Exclude-Objekt (siehe unten)

include und exclude Objekte

Das Include-Exclude-Objekt ist ein JSON-Objekt mit zwei Attributen: include und exclude. Entweder include oder exclude ist erforderlich. Wenn nur exclude angegeben ist, include wird standardmäßig das Ganze verwendet document.

• Ein Knoten oder
• Ein Array von Arrays von CSS-Selektoren

In den meisten Fällen enthalten die Arrays nur einen CSS-Selektor. Mehrere CSS-Selektoren sind nur erforderlich, wenn Sie Bereiche einer Seite ein- oder ausschließen möchten, die sich in Iframes befinden (oder Iframes innerhalb von Iframes innerhalb von Iframes). In diesem Fall selektieren die ersten n-1 Selektoren die Iframes und der n-te Selektor selektiert die Regionen innerhalb des Iframes.

context Parameterbeispiele

1. Schließen Sie das erste Element in die $fixture NodeList ein, schließen Sie aber sein erstes untergeordnetes Element aus.

   {
     include: $fixture[0],
     exclude: $fixture[0].firstChild
   }

2. Fügen Sie das Element mit der ID von fix ein, schließen Sie jedoch alle darin enthaltenen div aus.

   {
     include: [['#fix']],
     exclude: [['#fix div']]
   }

3. Schließen Sie das gesamte Dokument ein, mit Ausnahme aller Strukturen, deren Elternelement die Klasse exclude1 oder exclude2 enthält.

   {
     exclude: [['.exclude1'], ['.exclude2']];
   }

options Parameter

Der options Parameter bietet eine flexible Möglichkeit, zu konfigurieren, wie AxeDevTools.run funktioniert. Die verschiedenen Betriebsarten sind:

Alle Regeln ausführen, die einem der Zugänglichkeitsstandards entsprechen. Alle im System definierten Regeln ausführen, mit Ausnahme der in der Liste angegebenen Regeln. Einen bestimmten Regelsatz ausführen, der als Liste mit Regel-IDs bereitgestellt wird.

options Parameterbeispiele

1. Führen Sie nur Regeln für einen Zugänglichkeitsstandard aus

   Es sind bestimmte Standards definiert, die zur Auswahl eines Regelsatzes verwendet werden können. Die definierten Standards und Tag-Strings sind wie folgt:

   Tag-Name	Zugänglichkeitsstandard
   wcag2a	WCAG 2.0 Stufe A
   wcag2aa	WCAG 2.0 Stufe AA
   wcag2aaa	WCAG 2.0 Stufe AAA
   wcag21a	WCAG 2.1 Stufe A
   wcag21aa	WCAG 2.1 Stufe AA
   wcag21aaa	WCAG 2.1 Stufe AAA
   wcag22a	WCAG 2.2 Stufe A
   wcag22aa	WCAG 2.2 Stufe AA
   wcag22aaa	WCAG 2.2 Stufe AAA
   section508	Abschnitt 508
   EN-301-549	EN 301 549
   TTv5	Trusted Tester v5
   Best-Practice	Von Deque empfohlene Best Practices

   Um nur WCAG 2.0 Level A-Regeln auszuführen, geben Sie Folgendes an: options

   {
     runOnly: {
      type: "tag",
      values: ["wcag2a"]
     }
   }

   Um die WCAG 2.0-Regeln der Stufe A und AA auszuführen, müssen Sie sowohl wcag2a als auch wcag2aa angeben:

   {
     runOnly: {
       type: "tag",
       values: ["wcag2a", "wcag2aa"]
     }
   }

2. Führen Sie nur eine bestimmte Liste von Regeln aus

   Wenn Sie nur bestimmte Regeln ausführen möchten, geben Sie die Optionen wie folgt an:

   {
     runOnly: {
       type: "rule",
       values: [ "ruleId1", "ruleId2", "ruleId3" ]
     }
   }

   In diesem Beispiel werden nur die Regeln mit den IDs ruleId1, ruleId2 und ruleId3 ausgeführt. Es wird keine andere Regel ausgeführt.

3. Alle aktivierten Regeln ausführen, außer für eine Liste von Regeln

   Der Standardvorgang für AxeDevTools.run besteht darin, alle WCAG 2.0-Regeln der Stufe A und AA auszuführen. Wenn die Ausführung bestimmter Regeln deaktiviert werden soll, geben Sie options Folgendes an:

   {
     "rules": {
       "color-contrast": { enabled: false },
       "valid-lang": { enabled: false }
     }
   }

   Dieses Beispiel deaktiviert die Regeln mit der color-contrast oder valid-lang ID. Alle anderen Regeln werden ausgeführt. Die Liste der gültigen Regel-IDs ist im folgenden Abschnitt angegeben.

4. Ausführen eines geänderten Regelsatzes mithilfe von Tags und Regelaktivierung

   Durch die Kombination von runOnly mit type die gewünschten Tags festlegen und die Option rules verwenden, lässt sich ein geänderter Satz definieren. Dadurch können Sie Regeln mit nicht angegebenen Tags einschließen und Regeln mit dem bzw. den angegebenen Tags ausschließen.

   {
     runOnly: {
       type: "tag",
       values: ["wcag2a"]
     },
     "rules": {
       "color-contrast": { enabled: true },
       "valid-lang": { enabled: false }
     }
   }

   Dieses Beispiel umfasst alle Regeln der Ebene A außer valid-lang und enthält auch die Farbkontrastregel der Ebene AA.

5. Verwenden Sie nur einige Tags, schließen Sie andere jedoch aus

   Die runOnly Option kann ein Objekt mit einer include und einer exclude Eigenschaft akzeptieren. Es werden nur die Prüfungen ausgeführt, die mit einem eingeschlossenen Tag übereinstimmen, mit Ausnahme der Prüfungen, die einen gemeinsamen Tag aus der Ausschlussliste haben.

   {
     runOnly: {
       type: 'tags',
       value: {
         include: ['wcag2a', 'wcag2aa'],
         exclude: ['experimental']
       }
     }
   }

   Dieses Beispiel schließt zunächst alle wcag2a und wcag2aa Regeln ein. Alle als experimental gekennzeichneten Regeln werden dann aus den auszuführenden Regeln entfernt.

callback Parameter

Der callback Parameter ist eine Funktion, die aufgerufen wird, wenn die asynchron AxeDevTools.run Funktion abgeschlossen ist. Der callback Funktion werden zwei Parameter übergeben. Der erste Parameter ist ein Fehler, der innerhalb von Axe DevTools ausgegeben wird, wenn AxeDevTools.run nicht abgeschlossen werden kann. Wenn axe DevTools korrekt abgeschlossen wurde, ist der erste Parameter null und der zweite Parameter ist das Ergebnisobjekt.

Promise zurückgeben

Wenn der Rückruf nicht definiert wurde, gibt axe DevTools stattdessen ein Promise zurück. Allerdings führt Axe DevTools kein Polyfill der Promise-Bibliothek durch. Auf Systemen ohne Promise-Unterstützung ist diese Funktion daher nicht verfügbar. Wenn Sie nicht sicher sind, ob die Systeme, auf denen Sie axe DevTools benötigen, Promise-Unterstützung haben, empfehlen wir Ihnen, stattdessen den von AxeDevTools.run bereitgestellten Callback zu verwenden.

error Ergebnis

Dies ist entweder null oder ein Objekt, das eine Instanz von Error ist. Wenn Sie weiterhin Fehlermeldungen erhalten, melden Sie dieses Problem bitte an Deque Systems.

results Objekt

Die als dritter Parameter von AxeDevTools.a11yCheck übergebene Rückruffunktion wird auf dem results Objekt ausgeführt. Dieses Objekt hat zwei Komponenten: ein passes Array und ein violations Array. Das passes Array verfolgt alle bestandenen Tests und enthält detaillierte Informationen zu jedem Test. Dies führt zu effizienteren Tests, insbesondere bei manuellen Tests, da der Benutzer die bereits bestandenen Tests einfach ermitteln kann. Ebenso werden alle fehlgeschlagenen Tests und detaillierte Informationen zu jedem einzelnen Test im violations Array gespeichert.

url

Die URL der getesteten Seite.

timestamp

Datum und Uhrzeit der Fertigstellung der Analyse.

passes und violations Array

• description – Eine Textzeichenfolge, die beschreibt, was die Regel bewirkt
• help - Hilfetext, der den durchgeführten Test beschreibt
• helpUrl - Eine URL, die weitere Informationen zu den Einzelheiten des Verstoßes bereitstellt. Links zu einer Seite auf der Website der Deque University.
• id - Eine eindeutige Kennung für die Regel; siehe Liste der Regeln
• impact - Die Schwere des Verstoßes. Kann einer der folgenden Werte sein: geringfügig, mittelschwer, schwerwiegend oder kritisch , wenn die Regel nicht erfüllt wurde, bzw. null wenn die Überprüfung bestanden wurde.
• tags - Ein Array von Tags, die dieser Regel zugewiesen sind. Die Tags können im option Objekt verwendet werden, um auszuwählen, welche Regeln ausgeführt werden (siehe Optionsparameter oben).
• nodes - Ein Array aller Elemente, die von der Regel getestet wurden
  • html - Ein HTML-Ausschnitt des Elements
  • impact - Die Schwere des Verstoßes. Kann einer der folgenden Werte sein: geringfügig, mittelschwer, schwerwiegend oder kritisch , wenn der Test fehlgeschlagen ist, bzw. null wenn der Check bestanden wurde.
  • target - Ein Array von Selektoren, wobei jedes Element einer Ebene eines Iframes oder Frames entspricht. Wenn ein Iframe oder Frame vorhanden ist, sollten in target zwei Einträge vorhanden sein. Wenn drei Iframe-Ebenen vorhanden sind, sollten in target vier Einträge vorhanden sein.
  • any - Eine Reihe von Checks, bei denen mindestens einer erfolgreich sein muss. Jeder Eintrag im Array enthält:
    • id - Eindeutige Kennung für diese Prüfung. Check-IDs können mit Regel-IDs identisch sein.
    • impact - Der Schweregrad der Prüfung. Kann einen der folgenden Typen aufweisen: geringfügig, mittelschwer, schwerwiegend oder kritisch. Jede Prüfung, die Teil einer Regel ist, kann unterschiedliche Auswirkungen haben. Für die Regel wird die höchste Auswirkung aller fehlgeschlagenen Prüfungen gemeldet.
    • message - Die Beschreibung, warum diese Prüfung bestanden hat oder fehlgeschlagen ist.
    • data - Zusätzliche, optionale Informationen, die für die Art der Prüfung spezifisch sind. Eine Farbkontrastprüfung würde beispielsweise die Vordergrundfarbe, die Hintergrundfarbe, das Kontrastverhältnis usw. umfassen.
    • relatedNodes - Ein optionales Array mit Informationen zu anderen Knoten, die mit dieser Prüfung in Zusammenhang stehen. Beispielsweise würde bei einem Verstoß gegen die Prüfung auf doppelte IDs die anderen Selektoren mit derselben doppelten ID auflisten. Jeder Eintrag im Array enthält die folgenden Informationen:
      • target - Ein Array von Selektoren für den zugehörigen Knoten
      • html - Die HTML-Quelle des zugehörigen Knotens
  • all - Ein Array von Checks, die alle bestanden haben müssen. Jeder Eintrag im Array enthält dieselben Informationen wie das any Array.
  • none - Ein Array von Checks, von denen keine bestanden haben darf. Jeder Eintrag im Array enthält dieselben Informationen wie das any Array.

Beispiel zwei

In diesem Beispiel übergeben wir den Selektor für das gesamte Dokument, übergeben keine Optionen (was bedeutet, dass alle aktivierten Regeln ausgeführt werden), und verfügen über eine einfache Rückruffunktion, die das gesamte Ergebnisobjekt in die Konsole loggt:

AxeDevTools.run(document, function (err, results) {
  if (err) throw err;
  console.log(results);
});

passes Array

• passes[0] ...

  • help - "Elements must have sufficient color contrast"
  • helpURL - "https://dequeuniversity.com/courses/html-css/visual-layout/color-contrast"
  • id - "color-contrast"
    • nodes
    • target[0] - "#js_off-canvas-wrap > .inner-wrap >.kinja-title.proxima.js_kinja-title-desktop"

• passes[1] ...

Im obigen Beispiel enthält das Array passes zwei Einträge, die den beiden getesteten Regeln entsprechen. Das erste Element im Array beschreibt eine Farbkontrastprüfung. Die help, helpUrl, und id Felder werden für jeden Eintrag im passes Array zurückgegeben. Das target Array enthält ein Element mit dem Wert:

#js_off-canvas-wrap > .inner-wrap >.kinja-title.proxima.js_kinja-title-desktop

Das von target[0] ausgewählte Element wurde auf die Farbkontrastregel überprüft und hat bestanden.

Jeder nachfolgende Eintrag im Pass-Array weist das gleiche Format auf, enthält jedoch Einzelheiten zu den unterschiedlichen ausgeführten Regeln.

violations Array

• violations[0]

  • help - "<button> elements must have alternate text"
  • helpURL - "https://dequeuniversity.com/courses/html-css/forms/form-labels#id84_example_button"
  • id - "button-name"
    • nodes
    • target[0]
    • "post_5919997 > .row.content-wrapper > .column > span > iframe" * target[1]
    • "#u_0_1 > .pluginConnectButton > .pluginButtonImage > button"

• violations[1] ...

Das violations Array enthält einen Eintrag für einen Test, der überprüft, ob Schaltflächen gültigen Alternativtext haben (die button-name Regel). Dieser erste Eintrag im Array hat die Felder help, helpUrl und id .

Das target Array zeigt, wie wir die Selektoren angeben, wenn sich der angegebene Knoten innerhalb eines iframe oder frame befindet. Das erste Element im target Array (target[0]) gibt den Selektor für die iframe Schaltfläche an. Das zweite Element im target -Array (target[1]) gibt den Selektor für die eigentliche Schaltfläche an, beginnt jedoch innerhalb des in target[0] ausgewählten Iframes.

Jeder nachfolgende Eintrag im Verstoß-Array weist das gleiche Format auf, enthält jedoch Einzelheiten zu den Regeln, die zu Verstößen gegen die Barrierefreiheit geführt haben.

Beispiel drei

In diesem Beispiel übergeben wir den Selektor für das gesamte Dokument, aktivieren zwei zusätzliche Best-Practice-Regeln und verfügen über eine einfache Rückruffunktion, die das gesamte Ergebnisobjekt im Konsolenprotokoll protokolliert:

AxeDevTools.run(
  document,
  {
    rules: {
      'heading-order': { enabled: true },
      'label-title-only': { enabled: true }
    }
  },
  function (err, results) {
    if (err) throw err;
    console.log(results);
  }
);