Referenz der Browser-JavaScript-API für Axe DevTools für Web

Einführung

Die Axe DevTools API ist als Verbesserung gegenüber der vorherigen Generation von Accessibility-APIs konzipiert. Sie bietet folgende Vorteile:

• Läuft in jedem modernen Browser
• Entwickelt, um mit bestehender Testinfrastruktur zu arbeiten
• Läuft lokal; keine Verbindung zu einem Drittanbieter-Server erforderlich
• Führt Überprüfungen auf Verstöße in mehreren Ebenen verschachtelter iframes durch
• Bietet eine Liste von Regeln und Elementen, die die Zugänglichkeitsprüfung bestanden haben, und stellt sicher, dass die Regeln für das gesamte Dokument ausgeführt wurden

Erste Schritte

Dieser Abschnitt beschreibt kurz, wie die Axe DevTools APIs verwendet werden, um den Inhalt von Webseiten zu analysieren und ein JSON-Objekt zurückzugeben, das alle gefundenen Zugänglichkeitsverstöße auflistet.

Die Axe DevTools API kann als Teil eines umfassenderen Prozesses verwendet werden, der auf vielen, wenn nicht allen Seiten einer Website durchgeführt wird. Die API analysiert den Inhalt von Webseiten und gibt ein JSON-Objekt zurück, das alle gefundenen Zugänglichkeitsverstöße auflistet. So beginnen Sie:

1. Laden Sie die Seite im Testsystem
2. Optional können Konfigurationseinstellungen für die JavaScript-API gesetzt werden (AxeDevTools.configure)
3. JavaScript-API „analyze“ aufrufen (AxeDevTools.run)
4. Entweder anhand der Ergebnisse prüfen oder sie für die spätere Verarbeitung speichern

API-Referenz

Übersicht

Die Axe DevTools APIs sind in der JavaScript-Datei axe-devtools.js verfügbar. Sie muss in der zu testenden Webseite eingebunden werden. Parameter werden als JavaScript-Funktionsparameter gesendet. Ergebnisse werden im JSON-Format zurückgegeben.

API-Hinweise

• Ein Regeltest besteht aus Untertests. Jeder Untertest wird in einem Array von 'checks' zurückgegeben.
• Der "helpUrl" im Ergebnisobjekt verweist auf eine umfassendere Beschreibung des Zugänglichkeitsproblems und der empfohlenen Abhilfemaßnahmen. Alle Links verweisen auf die Hilfeseiten der Deque University.

AxeDevTools.init

Zweck

Initialisieren Sie die Axe DevTools API, um eine der integrierten Standardregelsätze zu nutzen.

Beschreibung

Initialisiert die Axe DevTools-Engine, überschreibt den Standardregelsatz und aktiviert einen der Standardregeluntergruppen.

Synopsis

AxeDevTools.init(ruleSetID);

Parameter

• ruleSetID - optional String, der den Regelsatz identifiziert. Aktuell gültige Werte sind:

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

Rückgabewert: undefined

AxeDevTools.ruleSets

Zweck

Ein Array der Standardregelsatzdefinitionen

Beschreibung

Bietet direkten Zugriff auf das Array der Standardregelsatzdefinitionen. Das Array besteht aus JavaScript-Objekten mit folgender Struktur:

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

Beispiel Eins

Wie man das Array filtert, um die WCAG 2 Stufe A und AA Regelsatzdefinition zu finden.

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

AxeDevTools.getRules

Zweck

Um Informationen über alle 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, das verwendet wird, um die zurückgegebenen Regeln zu filtern. Wenn nicht angegeben, werden alle Regeln zurückgegeben.

Rückgabewerte: Array von Regeln, die dem Eingabefilter entsprechen, wobei jeder Eintrag im Format von {ruleId: <id>, description: <desc>} ist

Die aktuelle Liste der unterstützten Tags ist in der folgenden Tabelle aufgeführt:

Beispiel 1

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

Aufruf: 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

Um das Format der von Axe DevTools verwendeten Daten zu konfigurieren. Dies kann verwendet werden, um neue Regeln hinzuzufügen, die in der Bibliothek registriert werden müssen, um ausgeführt zu werden.

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 die gültigen Name/Wert-Paare sind:
  • branding - gemischt (optional) Wird verwendet, um das Branding der helpUrls festzulegen.
    • brand - Zeichenkette (optional) legt die Markenbezeichnung fest--Standard: „worldspace“
    • application - Zeichenkette (optional) legt die Anwendungsbezeichnung fest--Standard: „AxeDevToolsAPI“
  • reporter - Wird verwendet, um das Ausgabeformat festzulegen, das die AxeDevTools.run-Funktion an die Callback-Funktion übergeben wird
    • v1 um das Format der Vorgängerversion zu nutzen: AxeDevTools.configure({ reporter: "v1" });
    • v2 um das Format der aktuellen Version zu nutzen: AxeDevTools.configure({ reporter: "v2" });
  • checks - Wird verwendet, um Prüfungen zur Liste der durch Regeln verwendeten Prüfungen hinzuzufügen oder die Eigenschaften bestehender Prüfungen zu überschreiben.
    • Das Attribut „prüfungen“ ist ein Array von Prüfungsobjekten.
    • Jedes Prüfungsobjekt kann die folgenden Attribute enthalten:
    • id - Zeichenkette (erforderlich). Dies identifiziert die Prüfung eindeutig. Wenn die Prüfung bereits existiert, werden alle bereitgestellten Prüfungseigenschaften überschrieben. Die unten mit erforderlich, wenn neu gekennzeichneten Eigenschaften sind optional, wenn die Prüfung überschrieben wird.
    • evaluate - Funktion (erforderlich, wenn neu). Dies ist die Funktion, die die Funktionalität der Prüfung umsetzt.
    • after - Funktion (optional). Diese Funktion wird für Prüfungen aufgerufen, die seitenbasiert arbeiten, um die Ergebnisse von iframes zu verarbeiten.
    • options - gemischt (optional). Dieses options Objekt wird an die evaluate Funktion übergeben und soll zur Konfiguration von Prüfungen verwendet werden. Es ist die am häufigsten überschriebenen Eigenschaft für bestehende Prüfungen.
    • matches - Zeichenkette (optional). Diese CSS-Selektor-Zeichenkette filtert die Knoten, die an die evaluate Funktion übergeben werden.
    • enabled - Boolescher Wert (optional, Standard true). Dies zeigt an, ob die Prüfung standardmäßig ein- oder ausgeschaltet ist. Prüfungen, die ausgeschaltet sind, werden nicht ausgewertet, selbst wenn sie in eine Regel aufgenommen werden. Das Überschreiben dieses Wertes ist eine gängige Methode, um eine bestimmte Prüfung über mehrere Regeln hinweg zu deaktivieren.
  • rules - Wird verwendet, um Regeln zum bestehenden Regelwerk hinzuzufügen oder die Eigenschaften bestehender Regeln zu überschreiben. Das rules-Attribut ist ein Array von rule-Objekten. Jedes rule-Objekt kann die folgenden Attribute enthalten:
    • id - Zeichenkette (erforderlich). Dies identifiziert die Regel eindeutig. Wenn die Regel bereits existiert, wird sie mit allen bereitgestellten Attributen überschrieben. Die unten als erforderlich markierten Attribute sind nur für neue Regeln erforderlich.
    • selector - Zeichenkette (optional, Standard *). Ein CSS-Selektor, der verwendet wird, um die Elemente zu identifizieren, die in die Regel zur Bewertung einfließen.
    • excludeHidden - Boolescher Wert (optional, Standard true). Dies gibt an, ob versteckte Elemente zur Bewertung in die Regel einfließen.
    • enabled - Boolescher Wert (optional, Standard true). Ob die Regel aktiviert ist (ein häufiger Attribut zum Überschreiben).
    • pageLevel - Boolescher Wert (optional, Standard false). Dies zeigt an, ob die Seite nur dann arbeitet, wenn der Geltungsbereich die gesamte Seite ist. Ein Beispiel für eine solche Regel ist die Verweissprung-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, Standard []). Dies ist die Liste der Prüfungen, bei denen, falls eine fehlschlägt, ein Verstoß erzeugt wird.
    • none - Array (optional, Standard []). Dies ist eine Liste der Prüfungen, bei denen, wenn keine erfolgreich ist, ein Verstoß erzeugt wird.
    • tags - Array (optional, Standard []). Eine Liste der Tags, die klassifizieren der Regel zugeordnet sind. In der Praxis müssen Sie einige gültige Tags angeben, andernfalls wird die Standardevaluierung die Regel nicht heranziehen. Üblicherweise werden der Standard (WCAG 2 und/oder Section 508), die WCAG 2 Ebene, der Section 508 Absatz und die WCAG 2 Erfolgskriterien einbezogen. Tags werden erstellt, indem alle Buchstaben in Kleinbuchstaben umgewandelt, Leerzeichen und Punkte entfernt und das Ergebnis zusammengefügt wird. Zum Beispiel würde WCAG 2 A Erfolgskriterien 1.1.1 zu [„wcag2a“, „wcag111“] werden.
    • matches - Zeichenkette (optional, Standard *). Ein CSS-Selektor, der Elemente ausschließt, die ihm nicht entsprechen.

Rückgabewerte: Nichts

AxeDevTools.reset

Zweck

Setzen Sie 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

Rückgabewerte: nicht definiert

AxeDevTools.run

Zweck

Analysieren Sie die aktuell geladene Seite.

Beschreibung

Führt mehrere Regeln gegen die bereitgestellte HTML-Seite aus und gibt die resultierende Liste der Probleme 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 wird typischerweise das document oder ein spezifischer Selektor wie Klassenname, ID, Selektor usw. sein.
• options: (optional) Eine Menge von Optionen, die in Regeln oder Prüfungen übergeben werden und diese vorübergehend ändern. Dies steht im Gegensatz zu AxeDevTools.configure, das dauerhafter ist. Siehe oben für weitere Informationen
• callback: (optional) Die Callback-Funktion, die entweder null oder ein Fehlerergebnis als ersten Parameter und das Ergebnisobjekt erhält, wenn die Analyse erfolgreich abgeschlossen wurde, oder undefined, wenn nicht.

context-Parameter

Standardmäßig testet AxeDevTools.run das gesamte Dokument. Das context-Objekt ist ein optionaler Parameter, der angibt, welches Element getestet werden soll und welches nicht. Es kann eine der folgenden Optionen ü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. Dies beinhaltet:
   • Ein CSS-Selektor als Klassenname (z.B. .classname)
   • Ein CSS-Selektor als Knotename (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, wird include standardmäßig auf das gesamte document festgelegt.

• 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 innerhalb von iframes (oder iframes innerhalb von iframes innerhalb von iframes) befinden. In diesem Fall wählen die ersten n-1 Selektoren das/die iframe(s) aus, und der n-te Selektor wählt den/die Bereich(e) innerhalb des iframes aus.

context-Parameterbeispiele

1. Das erste Element in der $fixture-NodeList ein-, aber dessen erstes Kind ausschließen

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

2. Das Element mit der ID von fix ein-, aber alle darin enthaltenen divs ausschließen

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

3. Das gesamte Dokument ein-, außer Strukturen, deren Eltern die Klasse exclude1 oder exclude2 enthalten

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

options-Parameter

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

• Alle Regeln ausführen, die einem der Barrierefreiheitsstandards entsprechen.
• Alle im System definierten Regeln ausführen, außer der Liste der angegebenen Regeln.
• Einen spezifischen Satz von Regeln ausführen, der als Liste von Regel-IDs bereitgestellt wird.

options-Parameterbeispiele

1. Nur Regeln für einen Barrierefreiheitsstandard ausführen

   Es gibt bestimmte Standards, die definiert sind, um einen Satz von Regeln auszuwählen. Die definierten Standards und Tag-String sind wie folgt definiert:

   Tag-Name	Barrierefreiheitsstandard
   wcag2a	WCAG 2.0 Level A
   wcag2aa	WCAG 2.0 Level AA
   wcag2aaa	WCAG 2.0 Level AAA
   wcag21a	WCAG 2.1 Level A
   wcag21aa	WCAG 2.1 Level AA
   wcag21aaa	WCAG 2.1 Level 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 Stufe A-Regeln auszuführen, geben Sie options wie folgt an:

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

   Um sowohl WCAG 2.0 Stufe A- als auch Stufe AA-Regeln 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 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. Keine andere Regel wird ausgeführt.

3. Führen Sie alle aktivierten Regeln aus, außer einer Liste von Regeln

   Der Standardbetrieb für AxeDevTools.run ist das Ausführen aller WCAG 2.0 Stufe A- und Stufe AA-Regeln. Wenn bestimmte Regeln nicht ausgeführt werden sollen, geben Sie options wie folgt an:

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

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

4. Führen Sie eine angepasste Menge von Regeln mithilfe von Tags und Regelaktivierung aus

   Ein angepasster Satz kann definiert werden, indem runOnly mit type kombiniert wird, die auf die gewünschten Tags gesetzt sind, und die rules-Option verwendet wird. Dadurch können Sie Regeln mit nicht spezifizierten Tags einschließen und Regeln mit dem angegebenen Tag oder den angegebenen Tags ausschließen.

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

   Dieses Beispiel umfasst alle Stufe A-Regeln mit Ausnahme von valid-lang und schließt auch die Stufe AA Farbkontrastregel ein.

5. Führen Sie nur einige Tags aus, aber schließen Sie andere aus

   Die runOnly-Option kann ein Objekt mit einer include- und exclude-Eigenschaft akzeptieren. Nur die Prüfungen, die mit einem einbezogenen Tag übereinstimmen, werden ausgeführt, außer denen, die ein Tag aus der Ausschlussliste teilen.

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

   Dieses Beispiel schließt zuerst 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 asynchrone AxeDevTools.run-Funktion abgeschlossen ist. Der callback-Funktion werden zwei Parameter übergeben. Der erste Parameter ist ein Fehler, der innerhalb von Axe DevTools geworfen 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.

Versprechen zurückgeben

Wenn der Callback nicht definiert wurde, gibt Axe DevTools stattdessen ein Versprechen zurück. Axe DevTools bietet jedoch keine Unterstützung für die Polyfill-Versprechenbibliothek. Daher steht diese Funktion auf Systemen ohne Unterstützung für Versprechen nicht zur Verfügung. Wenn Sie unsicher sind, ob die Systeme, auf denen Sie Axe DevTools benötigen, Versprechen unterstützen, empfehlen wir die Verwendung des von AxeDevTools.run bereitgestellten Callbacks.

error Ergebnis

Dies kann entweder null oder ein Objekt sein, das eine Instanz von Error ist. Wenn Sie ständig Fehler erhalten, melden Sie dieses Problem bitte an Deque Systems.

results Objekt

Die als dritter Parameter an AxeDevTools.a11yCheck übergebene Callback-Funktion 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 detaillierte Informationen zu jedem Test. Dies führt zu effizienteren Tests, insbesondere bei manuellen Tests, da der Benutzer leicht feststellen kann, welche Tests bereits bestanden wurden. Ebenso verfolgt das violations-Array alle fehlgeschlagenen Tests und detaillierte Informationen zu jedem einzelnen.

url

Die URL der getesteten Seite.

timestamp

Das Datum und die Uhrzeit, zu der die Analyse abgeschlossen wurde.

passes und violations-Array

• description - Ein Textstring, der beschreibt, was die Regel tut
• help - Hilfetext, der den durchgeführten Test beschreibt
• helpUrl - Eine URL, die weitere Informationen über die Einzelheiten des Verstoßes bereitstellt. Verlinkt auf eine Seite der Deque University.
• id - Eine eindeutige Kennung für die Regel; sehen Sie die Liste der Regeln
• impact - Die Schwere des Verstoßes. Kann einer von geringfügig, moderat, ernsthaft oder kritisch sein, wenn die Regel fehlschlug, oder null, wenn die Prü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 oben Optionsparameter).
• nodes - Ein Array aller Elemente, die von der Regel getestet wurden
  • html - Ein Ausschnitt des HTML des Elements
  • impact - Der Schweregrad des Verstoßes. Kann leicht, mäßig, schwerwiegend oder kritisch sein, wenn der Test fehlgeschlagen ist, oder null, wenn der Test bestanden wurde.
  • target - Ein Array von Selektoren, bei dem jedes Element einer Ebene von iframe oder frame entspricht. Gibt es ein iframe oder frame, sollten zwei Einträge in target vorhanden sein. Gibt es drei iframe-Ebenen, sollten vier Einträge in target vorhanden sein.
  • any - Ein Array von Prüfungen, von denen mindestens eine bestanden sein muss. Jeder Eintrag im Array enthält:
    • id - Eindeutige Kennung für diese Prüfung. Prüfungs-IDs können mit Regel-IDs übereinstimmen.
    • impact - Der Schweregrad der Prüfung. Kann leicht, mäßig, schwerwiegend oder kritisch sein. Jede Prüfung, die Teil einer Regel ist, kann unterschiedliche Auswirkungen haben. Die höchste Auswirkung aller fehlgeschlagenen Prüfungen wird für die Regel gemeldet.
    • message - Die Beschreibung, warum diese Prüfung bestanden oder fehlgeschlagen ist.
    • data - Zusätzliche, optionale Informationen spezifisch für die Art der Prüfung. Zum Beispiel würde eine Farbkontrast-Prüfung die Vordergrundfarbe, Hintergrundfarbe, das Kontrastverhältnis usw. einschließen.
    • relatedNodes - Ein optionales Array mit Informationen über andere Knoten in Bezug auf diese Prüfung. Zum Beispiel würde ein Verstoß gegen den doppelten ID-Check die anderen Selektoren mit der gleichen doppelten ID auflisten. Jeder Eintrag im Array enthält die folgenden Informationen:
      • target - Ein Array von Selektoren für den zugehörigen Knoten
      • html - Der HTML-Quellcode des zugehörigen Knotens
  • all - Ein Array von Prüfungen, bei denen alle bestanden sein müssen. Jeder Eintrag im Array enthält die gleichen Informationen wie das any-Array.
  • none - Ein Array von Prüfungen, bei denen alle nicht bestanden sein dürfen. Jeder Eintrag im Array enthält die gleichen Informationen wie das any-Array.

Beispiel Zwei

In diesem Beispiel werden wir den Selektor für das gesamte Dokument übergeben, keine Optionen übergeben, was bedeutet, dass alle aktivierten Regeln ausgeführt werden, und eine einfache Callback-Funktion haben, die das gesamte Ergebnisobjekt im Konsolenprotokoll protokolliert:

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 passes-Array zwei Einträge, die den zwei getesteten Regeln entsprechen. Das erste Element im Array beschreibt eine Farbkontrast-Prü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 einem Wert von:

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

Das durch target[0] ausgewählte Element wurde auf die Farbkontrastregel geprüft und bestanden.

Jeder nachfolgende Eintrag im Erfolg-Array hat dasselbe Format, wird jedoch die verschiedenen Regeln im Detail beschreiben, die ausgeführt wurden.

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ültige Alternativtexte haben (die button-name-Regel). Dieser erste Eintrag im Array hat die help-, helpUrl- und id-Felder.

Das target-Array demonstriert, wie wir die Selektoren angeben, wenn der spezifizierte Knoten in einem iframe oder frame ist. Das erste Element im target-Array (target[0]) spezifiziert den Selektor zum iframe, der die Schaltfläche enthält. Das zweite Element im target-Array (target[1]) spezifiziert den Selektor zur tatsächlichen Schaltfläche, beginnt jedoch innerhalb des iframes, das in target[0] ausgewählt wurde.

Jeder nachfolgende Eintrag im Verstöße-Array hat dasselbe Format, wird jedoch die Regeln im Detail beschreiben, die Barrierefreiheitsverstöße erzeugt haben.

Beispiel Drei

In diesem Beispiel übergeben wir den Selektor für das gesamte Dokument, aktivieren zwei zusätzliche Best-Practice-Regeln und haben eine einfache Callback-Funktion, 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);
  }
);