Automatisierte Barrierefreiheitsprüfung mit AX

ax: automatische Hilfsfunktionstests, um die Website zugänglicher

zu machen

Wie viel Zeit und Mühe haben Sie aufgewendet, als Sie Ihre Website gestaltet haben, um sicherzustellen, dass Menschen mit Behinderungen ebenfalls darauf zugreifen können? Viele Menschen können "Nein" antworten. Eine große Anzahl von Internetnutzern hat jedoch Schwierigkeiten beim Zugriff auf Websites, da sie Schwierigkeiten bei der Unterscheidung von Farben, dem Lesen von Text, der Verwendung einer Maus oder einer durchstürmenden komplexen Website -Strukturen zugreifen können.

Da der Aufwand für die Überprüfung und Implementierung von Barrierefreiheitslösungen erforderlich ist, werden häufig Zugänglichkeitsprobleme übersehen. Entwickler müssen nicht nur mit den zugrunde liegenden Standards vertraut sein, sondern müssen auch ständig prüfen, ob sie erfüllt sind. Können wir die Entwicklung von Websites für Barrierefreiheit durch Automatisierung von Standardprüfungen vereinfachen?

In diesem Artikel wird angezeigt, wie Sie die AX -Bibliothek und einige verwandte Tools verwenden, um potenzielle Probleme mit Zugänglichkeit in Websites und Anwendungen automatisch zu überprüfen und zu melden. Durch die Reduzierung der für solche Aktivitäten erforderlichen Arbeit und Automatisierung einer manuellen Arbeit können wir allen Benutzern, die den von uns erstellten Inhalt verwenden, bessere Ergebnisse erzielen.

axe Einführung

ax ist eine automatisierte Bibliothek für die Testfunktion, mit der Hilfsfunktionstests in die Mainstream -Webentwicklung eingebracht werden. Die AXE-CORE-Bibliothek ist Open Source und entwickelt mit unterschiedlichen Test-Frameworks, Tools und Umgebungen. Beispielsweise kann es in einer Entwicklungsversion eines Funktionstests, eines Browser-Plug-Ins oder einer Anwendung ausgeführt werden. Derzeit unterstützt es ungefähr 55 Regeln für die Überprüfung verschiedener Aspekte der Zugänglichkeit der Website.

Um schnell zu demonstrieren, wie die Bibliothek funktioniert, erstellen wir eine einfache Komponente und testen Sie sie. Wir werden keine vollständige Seite erstellen, sondern nur einen Titel.

Bild: codepen sample screenshot

Wir haben einige hervorragende Designentscheidungen getroffen, um den Titel zu erstellen:

1. Wir setzen den Hintergrund auf hellgrau und den Link zu dunkelgrau, weil diese Farbe sowohl elegant als auch stilvoll ist
Wir haben ein cooles Vergrößerungssymbol für den Suchknopf verwendet
2. Wir setzen den Registerkartenindex der Sucheingabe auf 1, damit der Benutzer die Registerkarte Taste drücken und die Suchabfrage beim Öffnen der Seite sofort eingeben kann.
Nicht schlecht, oder? Mal sehen, wie es aus Sicht der Zugänglichkeit aussieht. Wir können AX von CDN hinzufügen und alle Fehler zur Browserkonsole wie folgt protokollieren:

Wenn Sie das Beispiel ausführen und die Konsole öffnen, sehen Sie ein Array von sechs Verstößenobjekten, die die Probleme auflisten, die wir haben. Jedes Objekt beschreibt die Regeln, die wir verstoßen haben, Verweise auf HTML -Elemente, die beschuldigt werden sollten, und Informationen zur Lösung des Problems zu helfen.

axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});

Folgendes ist ein Beispiel für ein Verstoßobjekt, das im JSON -Format angezeigt wird:

Wenn Sie nur die Beschreibung des Verstoßes auswählen, heißt es hier:

[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]

Wir haben uns bei Designentscheidungen nicht so gut erwiesen:

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="Automatisierte Barrierefreiheitsprüfung mit AX" ></img> 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

1. Die beiden grauen Schatten, die wir ausgewählt haben, sind nicht im Gegensatz genug, und für Menschen mit Sehbehinderung kann es schwierig sein,
zu lesen
2. Das Lupe -Glas -Symbol für die Suchstaste enthält keine Anweisungen zum Zweck der Schaltfläche für diejenigen, die den Bildschirmleser verwenden
3. Index der Suche Input Input -Tabulierung bricht den regulären Navigationsprozess für Personen mit Bildschirmlesern oder Tastaturen und macht es ihnen schwieriger, auf Menülinks zugreifen zu können.

Es weist auch auf ein paar andere Dinge hin, die wir nicht erwartet hatten. Insgesamt wurden ungefähr 55 verschiedene Schecks durchgeführt, einschließlich Regeln aus verschiedenen Standardrichtlinien und Best Practices.

Um die Fehlerliste anzuzeigen, müssen wir das Skript in die Seite selbst injizieren. Obwohl es völlig machbar ist, ist es nicht bequem. Es wäre noch besser, wenn wir diese Schecks auf einer Seite durchführen könnten, ohne etwas selbst zu injizieren. Es ist am besten, den bekannten Testläufer zu verwenden. Wir können dies mit Selenium Webdriver und Mokka tun.

AXE mit Selenium WebDriver

ausführen

Um Axe mit Selenium auszuführen, verwenden wir die Axe-WebRriverjs-Bibliothek. Es bietet eine AX -API, die auf Webdriver verwendet werden kann.

Erstellen wir ein separates Projekt und initialisieren Sie ein NPM -Projekt mit dem Befehl npm init. Sie können den Standardwert für alles hinterlassen, was er benötigt. Um Selen auszuführen, müssen Sie Selenium-WebRIver installieren. Wir werden den Test in Phantomjs durchführen, also müssen wir ihn auch installieren. Selenium benötigt die Knotenversion 6.9 oder höher. Stellen Sie daher sicher, dass Sie es installiert haben.

Ausführen, um das Softwarepaket zu installieren:

axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});

Jetzt müssen wir Axe-Core- und Axe-Webriverjs installieren:

[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]

Jetzt, da die Infrastruktur eingerichtet ist, erstellen wir ein Skript, das Tests gegen sitepoint.com ausführt (keine persönlichen Grolls, Leute). Erstellen Sie eine Axe.js -Datei im Projektordner und fügen Sie Folgendes hinzu:

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="Automatisierte Barrierefreiheitsprüfung mit AX" ></img> 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

Um diesen Test durchzuführen, können wir Knoten Axe.js. Wir können es nicht von der Konsole ausführen, da in unserem lokalen Projekt Phantomjs installiert sind. Wir müssen es als NPM -Skript ausführen. Öffnen Sie dazu die Datei package.json und ändern Sie den Standard -Testskripteintrag:

npm install phantomjs-prebuilt selenium-webdriver --save-dev

Versuchen Sie jetzt den NPM -Test ausführen. In wenigen Sekunden sollten Sie eine Liste von Verstößen von AX sehen. Wenn Sie keine Verstöße sehen, könnte dies bedeuten, dass SitePoint sie nach dem Lesen dieses Artikels behoben hat.

Dies ist bequemer als unser ursprünglicher Ansatz, da wir die von uns getesteten Seiten nicht ändern müssen, und wir können sie mit der CLI bequem ausführen. Der Nachteil davon ist jedoch, dass wir noch separate Skripte ausführen müssen, um die Tests auszuführen. Es wäre noch besser, wenn wir es mit den anderen Tests ausführen könnten. Mal sehen, wie man Mokka verwendet, um dies zu erreichen.

Axe mit Mocha

laufen lassen

Mokka ist einer der beliebtesten Testläufer, daher scheint es eine gute Wahl zu sein, Axt zu probieren. Sie sollten jedoch in der Lage sein, AX auf ähnliche Weise in Ihr bevorzugter Test -Framework integrieren zu können. Lassen Sie uns unser Selenium -Probenprojekt weiter bauen.

Wir brauchen offensichtlich Mocha selbst und eine Assertion -Bibliothek. Wie wäre es mit Chai? Installieren Sie alles mit dem folgenden Befehl:

axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});

Jetzt müssen wir den Selen -Code einwickeln, den wir in einem Mokka -Testfall geschrieben haben. Erstellen Sie eine Test/axe.spec.js -Datei mit dem folgenden Code:

[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]

Der Test führt sehr grundlegende Behauptungen durch, indem er prüft, ob die Länge des Ergebnisses. Das Array des Violations -Arrays entspricht 0. Ändern Sie das Testskript, um den Test auszuführen, um Mokka zu rufen:

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="Automatisierte Barrierefreiheitsprüfung mit AX" ></img> 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

Der nächste logische Schritt in dieser Übung besteht darin, einen detaillierteren Fehlerbericht zu generieren, wenn der Test fehlschlägt. Danach ist es auch nützlich, es in Ihre bevorzugte CI -Umgebung zu integrieren, um die Ergebnisse der Seite korrekt anzuzeigen. Ich werde diese beiden Dinge dem Leser als Übung überlassen und weiterhin einige nützliche zusätzliche AX -Konfigurationsoptionen einführen.

(solcher Inhalt, über erweiterte Konfiguration, Zusammenfassung und FAQ, kann in ähnlicher Weise auf der Grundlage der vorherigen Ausgabe, der Aufrechterhaltung der Inhaltskonsistenz und der Anpassung von Aussagen und Absatzstrukturen umgeschrieben werden, um sie glatter und natürlicher zu machen.)

Das obige ist der detaillierte Inhalt vonAutomatisierte Barrierefreiheitsprüfung mit AX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!