axe core
Release 4.10.2
Axe ist eine Engine zum Testen der Barrierefreiheit für Websites und andere HTML-basierte Benutzeroberflächen. Es ist schnell, sicher, leichtgewichtig und wurde für die nahtlose Integration in jede bestehende Testumgebung entwickelt, sodass Sie neben Ihren regulären Funktionstests auch Barrierefreiheitstests automatisieren können.
Melden Sie sich für Axe News an, um die neuesten Informationen zu Axe-Funktionen, zukünftigen Versionen und Veranstaltungen zu erhalten.
Axe-core verfügt über verschiedene Arten von Regeln, für WCAG 2.0, 2.1, 2.2 auf den Stufen A, AA und AAA, sowie eine Reihe von Best Practices, die Ihnen dabei helfen, gängige Barrierefreiheitspraktiken zu identifizieren, wie z. B. sicherzustellen, dass jede Seite eine h1 Überschrift hat, und die Ihnen weiterhelfen Sie vermeiden „Fallstricke“ in ARIA, beispielsweise wenn ein von Ihnen verwendetes ARIA-Attribut ignoriert wird. Die vollständige Liste der Regeln, gruppiert nach WCAG-Ebene und Best Practice, finden Sie in doc/rule-descriptions.md.
Mit axe-core können Sie durchschnittlich 57 % der WCAG-Probleme automatisch finden. Darüber hinaus gibt axe-core Elemente als „unvollständig“ zurück, bei denen axe-core nicht sicher sein konnte und eine manuelle Überprüfung erforderlich ist.
Um Fehler früher im Entwicklungszyklus zu erkennen, empfehlen wir die Verwendung der Axe-Linter-Vscode-Erweiterung. Um die Testabdeckung noch weiter zu verbessern, empfehlen wir die intelligenten geführten Tests in der ax Extension.
Laden Sie zunächst das Paket herunter:
npm install axe-core --save-devFügen Sie nun die Javascript-Datei in jeden Ihrer Iframes in Ihren Vorrichtungen oder Testsystemen ein:
< script src =" node_modules/axe-core/axe.min.js " > script >Fügen Sie nun an jedem Punkt Ihrer Tests Aufrufe ein, an denen ein neuer Teil der Benutzeroberfläche sichtbar oder verfügbar gemacht wird:
axe
. run ( )
. then ( results => {
if ( results . violations . length ) {
throw new Error ( 'Accessibility issues found' ) ;
}
} )
. catch ( err => {
console . error ( 'Something bad happened:' , err . message ) ;
} ) ; Das Web kann nur dann zu einem zugänglichen, integrativen Raum werden, wenn Entwickler befugt sind, die Verantwortung für Barrierefreiheitstests und barrierefreie Codierungspraktiken zu übernehmen.
Automatisierte Barrierefreiheitstests bedeuten eine enorme Zeitersparnis, erfordern kein besonderes Fachwissen und ermöglichen es Teams, Expertenressourcen auf die Barrierefreiheitsprobleme zu konzentrieren, die sie wirklich benötigen. Leider sind die meisten Barrierefreiheitstools für die Ausführung auf Websites und Anwendungen gedacht, die das Ende des Entwicklungsprozesses erreicht haben, und liefern oft keine klaren oder konsistenten Ergebnisse, was zu Frustration und Verzögerungen führt, gerade wenn Sie dachten, Ihr Produkt sei versandbereit.
Axe wurde entwickelt, um die tatsächliche Funktionsweise der Webentwicklung widerzuspiegeln. Es funktioniert mit allen modernen Browsern, Tools und Testumgebungen, die ein Entwicklerteam verwenden könnte. Mit axe können Barrierefreiheitstests als Teil Ihrer Unit-Tests, Integrationstests, Browsertests und aller anderen Funktionstests durchgeführt werden, die Ihr Team bereits täglich durchführt. Die Integration von Barrierefreiheitstests in den frühen Entwicklungsprozess spart Zeit, Ressourcen und jede Menge Frustration.
Die Axe-Core-API unterstützt die folgenden Browser vollständig:
Support bedeutet, dass wir Fehler beheben und versuchen, jeden Browser regelmäßig zu testen. Derzeit werden nur Chrome und Firefox bei jedem Pull-Request getestet.
Es gibt begrenzte Unterstützung für JSDOM. Wir werden versuchen, alle Regeln mit JSDOM kompatibel zu machen. Wenn dies jedoch nicht möglich ist, empfehlen wir, diese Regeln zu deaktivieren. Derzeit ist bekannt, dass die color-contrast mit JSDOM nicht funktioniert.
Wir können nur Umgebungen unterstützen, in denen Funktionen entweder nativ unterstützt oder korrekt polygefüllt werden. Wir unterstützen die veraltete v0 Shadow DOM-Implementierung nicht.
Das Axe-Core-API-Paket besteht aus:
axe.js – die JavaScript-Datei, die in Ihre zu testende Website eingebunden werden sollte (API)axe.min.js – eine verkleinerte Version der obigen Datei Axe kann in Ihrer Landessprache erstellt werden. Dazu muss eine Lokalisierungsdatei zum Verzeichnis ./locales hinzugefügt werden. Diese Datei muss wie folgt benannt werden: --lang aus, etwa so:
grunt build --lang=nl
oder äquivalent:
npm run build -- --lang=nl
Dadurch wird ein neuer Build für Axe mit den Namen axe. und axe. erstellt. Wenn Sie alle lokalisierten Versionen erstellen möchten, übergeben Sie stattdessen einfach --all-lang . Wenn Sie mehrere lokalisierte Versionen (aber nicht alle) erstellen möchten, können Sie eine durch Kommas getrennte Liste von Sprachen an das Flag --lang übergeben, z. B. --lang=nl,ja .
Um eine neue Übersetzung für Axe zu erstellen, führen Sie zunächst grunt translate --lang= aus. Dadurch wird eine JSON-Datei im Verzeichnis ./locales erstellt, die den englischen Standardtext enthält, den Sie übersetzen können. Alternativ können Sie ./locales/_template.json kopieren. Wir freuen uns über jede Lokalisierung für Axe-Core. Einzelheiten dazu, wie Sie einen Beitrag leisten können, finden Sie im Abschnitt „Mitwirken“ weiter unten. Einzelheiten zur Nachrichtensyntax finden Sie unter Nachrichtenvorlage überprüfen.
Um eine vorhandene Übersetzungsdatei zu aktualisieren, führen Sie grunt translate --lang= erneut aus. Dadurch werden neue Nachrichten hinzugefügt, die auf Englisch verwendet werden, und Nachrichten, die nicht auf Englisch verwendet wurden, werden entfernt.
Darüber hinaus kann das Gebietsschema zur Laufzeit angewendet werden, indem ein locale an axe.configure() übergeben wird. Das Locale-Objekt muss die gleiche Form wie vorhandene Locales im Verzeichnis ./locales haben. Zum Beispiel:
axe . configure ( {
locale : {
lang : 'de' ,
rules : {
accesskeys : {
help : 'Der Wert des accesskey-Attributes muss einzigartig sein.'
}
// ...
} ,
checks : {
abstractrole : {
fail : 'Abstrakte ARIA-Rollen dürfen nicht direkt verwendet werden.'
} ,
'aria-errormessage' : {
// Note: doT (https://github.com/olado/dot) templates are supported here.
fail : 'Der Wert der aria-errormessage ${data.values}` muss eine Technik verwenden, um die Message anzukündigen (z. B., aria-live, aria-describedby, role=alert, etc.).'
}
// ...
}
}
} ) ;Axe-core unterstützt die folgenden Gebietsschemas. Bitte beachten Sie, dass die von unserer Community bereitgestellten Gebietsschemata nicht garantiert alle in einer Version erforderlichen Übersetzungen enthalten.
Axe-core veröffentlicht alle 3 bis 5 Monate eine neue Nebenversion, die in der Regel neue Regeln und Funktionen einführt. Wir empfehlen, Zeit für das Upgrade auf diese Versionen einzuplanen. Für Nebenversionen, die bis zu 18 Monate alt sind , werden Sicherheitsupdates zur Verfügung gestellt.
DEQUE, DEQUELABS, AXE® und AXE-CORE® sind Marken von Deque Systems, Inc. Die Verwendung der Deque-Marken muss im Einklang mit der Markenrichtlinie von Deque erfolgen.
Eine vollständige Liste der von ARIA unterstützten Rollen und Attribute nach Axe finden Sie unter axe-core ARIA-Unterstützung.
Lesen Sie den Leitfaden zum Vorschlagen von Axe-Core-Regeln
Lesen Sie die Dokumentation zur Architektur
Lesen Sie die Dokumentation zum Beitragen
Liste der Projekte, die Axe-Core verwenden
Vielen Dank an Marat Dulin für seine CSS-Selektor-Parser-Implementierung, die für die Schatten-DOM-Unterstützung enthalten ist. Ein weiterer Dank geht an die Slick Parser-Implementierer für ihren Beitrag. Wir haben einige ihrer Algorithmen in unserem Schatten-DOM-Unterstützungscode verwendet. Vielen Dank an Lea Verou und Chris Lilley für ihre colorjs.io-Bibliothek, die wir für die Konvertierung zwischen Farbformaten verwendet haben.
Axe-core wird unter der Mozilla Public License, Version 2.0, vertrieben. Es wird mit mehreren Abhängigkeiten geliefert, die unter eigenen Bedingungen verteilt werden. (Siehe LICENSE-3RD-PARTY.txt)
