Grundlagen des Testens auf Barrierefreiheit
Lernziele
Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:
- Erkennen der Bedeutung des Testens auf Barrierefreiheit
- Zusammenfassen der Vor- und Nachteile, die sich durch die Automatisierung des Testens auf Barrierefreiheit ergeben
- Benennen der Tools, die für die Automatisierung von Barrierefreiheitstests verwendet werden können
- Beschreiben von Strategien für das Schreiben eigener automatisierter Barrierefreiheitstests.
Warum testen wir auf Barrierefreiheit?
Barrierefreiheitstests helfen dabei sicherzustellen, dass digitale Produkte – wie Websites und Apps – von jedermann genutzt werden können, einschließlich Personen mit Behinderungen. Das bedeutet, dass Barrieren für den Zugang gefunden und beseitigt werden müssen, bevor Benutzer überhaupt auf sie stoßen. Es wäre natürlich ideal, wenn es schon von vornherein gar keine Einschränkungen der Barrierefreiheit gäbe, doch in Wirklichkeit können sich bei der Entwicklung Fehler einschleichen. Wann immer Sie etwas entwickeln, muss es Ihr Ziel sein sicherzustellen, dass keiner dieser Fehler jemals bei Ihren Benutzern auftritt.
In einer idealen Welt würden Barrierefreiheitstests während des gesamten Entwicklungszyklus stattfinden, beginnend mit der Entwurfsphase, während der Entwicklung und sogar noch nach der Bereitstellung. Mit diesem proaktiven Ansatz stellen Sie sicher, dass Sie Barrierefreiheit bei jedem Schritt berücksichtigen und einbeziehen.
Durch die Durchführung von Barrierefreiheitstest unterstützen Sie die folgenden Punkte:
- Schaffen eines inklusiven digitalen Erlebnisses, das gleichen Zugang bietet.
- Erfüllen der regulatorischen und rechtlichen Anforderungen.
- Erreichen eines breiteren Benutzerspektrums.
- Verbessern der allgemeinen Benutzererfahrung.
In diesem Modul behandeln wir automatisierte und manuelle Tests. Beides ist für umfassende Barrierefreiheitstests von entscheidender Bedeutung. Beginnen wir mit einem Blick auf automatisierte Barrierefreiheitstests.
Die Vor- und Nachteile bei der Automatisierung von Barrierefreiheitstests
Wie Sie vermutlich bereits wissen, können Sie mit automatisierten Barrierefreiheitstests schnell feststellen, ob Ihr digitales Produkt den Normen für Barrierefreiheit entspricht. Beispielsweise kann automatisierte Testsoftware eine Website durchsuchen und eine Reihe von Zugangsbarrieren identifizieren, von fehlendem Alt-Text über unzureichenden Farbkontrast bis hin zu fehlenden Überschriften. Die Automatisierung des Testprozesses steigert die Effizienz, verbessert die Konsistenz und ermöglicht eine bessere Skalierbarkeit.
Zwar haben automatisierte Tests viele Vorteile, trotzdem darf man nicht vergessen, dass dabei erhebliche Barrierefreiheitsprobleme sowie subtilere Zugangsbarrieren, die menschliches Verstehen und Kontext erfordern, übersehen werden können. Beispielsweise wird ein automatisierter Test nicht unbedingt Bilder von Texten markieren, die als Überschriften verwendet werden. Und er kann die realen Auswirkungen von Zugangsbarrieren auf Benutzer nicht beurteilen. Für eine möglichst umfassende Bewertung der Zugänglichkeit sollten Sie immer manuelle Barrierefreiheitstests in Verbindung mit automatisierten Tests durchführen.
Verwenden Sie bei der Automatisierung Ihrer eigenen Barrierefreiheitstests eine Mischung aus vordefinierten Testprogrammen und benutzerdefinierten Testfällen, um Einschränkungen der Barrierefreiheit bei Ihren Benutzeroberflächen zu finden. Die mobilen Test-Frameworks für iOS und Android enthalten einfache Barrierefreiheitsprüfungen. Bei der Funktionsentwicklung mit nativem Code fügen Sie Tests hinzu, um einfache Prüfungen durchzuführen, die die Test-Frameworks unterstützen. Weitere Informationen über Tests für mobile Geräte finden Sie unter den Ressourcen am Ende dieses Moduls.
Verwenden von Tools zum Testen der Barrierefreiheit
Es gibt eine Reihe von automatisierten und halbautomatisierten Tools, die Sie zur Durchführung von Barrierefreiheitstests verwenden können. Die meisten von ihnen vergleichen Inhalte mit den Barrierefreiheitsrichtlinien für Webinhalte (Web Content Accessibility Guidelines, WCAG) und ermitteln Zugangsbarrieren. Hier eine Auflistung einiger nützlicher Tools.
Tool |
Präsentationselement |
Funktion |
---|---|---|
Ein Open Source-Testtool für Websites und andere HTML-basierte Benutzeroberflächen, das umfassende Barrierefreiheitstests ermöglicht |
Ermöglicht das Aufspüren von Barrierefreiheitsfehlern während er Programmierung und lässt sich in Ihre bestehende Testumgebung integrieren, so dass Sie Barrierefreiheitstests automatisieren können |
|
Ein kostenloses Paket von Evaluierungstools, das Ihnen hilft, häufige Zugangsbarrieren zu erkennen, die Benutzer mit Behinderungen betreffen – wie etwa geringen Kontrast und fehlenden Alt-Text |
Verwendet Symbole und Indikatoren zur Hervorhebung vieler Barrierefreiheitsprobleme und zur Erleichterung der menschlichen Bewertung von Webinhalten |
|
Ein automatisiertes Open-Source-Tool, das auf Barrierefreiheitsprobleme prüft, einschließlich WCAG-Verstößen |
Führt Zugangsprüfungen durch und vergibt eine Punktzahl auf der Basis von 100, die das Niveau der Barrierefreiheit einer Seite angibt |
|
Linters |
Automatisierte Tools – wie etwa GitHub: infofarmer / eslint-plugin-jsx-a11y und GitHub: reactjs / react-a11y – die von Anfang an in den Entwicklungszyklus einbezogen werden können, um Probleme mit der und Verstöße gegen die Barrierefreiheit zu verhindern |
Analysiert Quellcode wie HTML, CSS und JavaScript auf Zugangsbarrieren wie Tastaturnavigation und die falsche Verwendung von Überschriften und Orientierungspunkten |
Eine Reihe von Open-Source-JavaScript-Bibliotheken, die von Salesforce erstellt wurden und die Sie bei der Erstellung automatisierter Barrierefreiheitstests unterstützen |
Ermöglicht Ihnen, maschinell erkennbare statische DOM-Barrierefreiheitsprobleme zu erkennen |
Beachten Sie, dass die mit diesen Tools durchgeführten Tests nicht allumfassend sind. Selbst wenn Ihr Code jeden Test besteht, ist das keine Garantie dafür, dass Ihr Produkt völlig barrierefrei ist. Diese Tests bringen jedoch die wesentlichen Probleme hinsichtlich der Barrierefreiheit zutage, und ihre Nutzung hilft sicherzustellen, dass Ihr Code nicht durch eine Regression unzugänglich wird. Es wird empfohlen, zusätzlich zu den automatisierten Tests immer auch manuelle Tests durchzuführen, um eine umfassende Bewertung der Barrierefreiheit zu gewährleisten. Mehr über manuelle Tests erfahren Sie später.
Schreiben eigener Barrierefreiheitstests
Wenn Sie viel Arbeit in die Barrierefreiheit einer Komponente gesteckt haben, möchten Sie sicherstellen, dass die Komponente auch barrierefrei bleibt. Sie können automatisierte Tests für eine Vielzahl von Barrierefreiheitsaspekten schreiben, einschließlich der erwarteten Tastaturfunktionalität und der Richtigkeit der ARIA-Werte für HTML-Elemente.
Beispiel: Testen einer Lightning-Schaltfläche
Hier sehen Sie etwas Pseudocode für einen Jest-Test für Lightning Web Components (LWC), der eine Lightning-Schaltfläche erstellt und überprüft, ob die Struktur der Komponente barrierefrei ist.
registerSa11yMatcher(); const element = createButton({ label: 'Submit', variant: 'brand-outline', title: 'This is a submit button', }); const button = shadowQuerySelector(element, 'button'); return Promise.resolve().then(async () => { await expect(button).toBeAccessible(); });
In diesem Beispielcode registrieren Sie zunächst sa11y, damit Sie Komponenten auf Barrierefreiheit prüfen können. Anschließend erstellen Sie die Schaltfläche mit einer Bezeichnung, einer bestimmten Variante und einem Titel. Suchen Sie dann diese Schaltfläche und weisen Sie sie einer Variablen zu. Um schließlich Barrierefreiheitstests einzubeziehen, erstellen Sie einen asynchronen Funktionsaufruf, um die Schaltfläche auf Barrierefreiheit zu prüfen.
Bei der Prüfung von Elementen auf Barrierefreiheit in Jest legen Sie die HTML-Struktur des geprüften Elements zugrunde und validieren sie anhand der WCAG-Normen. Dazu gehört auch, dass alle Aria-Attribute für das dargestellte Element richtig sind.
Dies sind einige Grundlagen von Barrierefreiheitstests. Sind Sie bereit, diese Grundsätze in die Praxis umzusetzen? Lesen Sie weiter, um zu erfahren, wie Sie Tastatur- und Bildschirmlesetests durchführen.
Ressourcen
- Website: Deque: Axe
- Website: WAVE: Web Accessibility Evaluation Tools
- Website: Google Chrome Documentation Introduction to Lighthouse
- Website: GitHub: infofarmer/eslint-plugin-jsx-a11y
- Website: GitHub: reactjs/react-a11y
- Website: GitHub: salesforce/sa11y
- Website: iOS-Dokumentation: Accessibility Inspector
- Website: Android-Dokumentation: Test your app's accessibility
- Website: GitHub: google/Accessibility-Test-Framework-for-Android
- Website: npm: Pa11y
- Website: Squizlabs: HTML_CodeSniffer