Automatisches Accessibility-Testing?
Wie gut funktioniert automatisches Accessibility-Testing und wann macht dies Sinn?
Barrierefreiheit ist heute ein zentrales Thema in der Entwicklung von Webseiten und digitalen Produkten. Nicht nur aufgrund von rechtlichen Vorgaben wie dem BFSG, sondern auch aus eigenem Anspruch heraus sollten digitale Anwendungen für alle Menschen zugänglich gemacht werden. Automatisierte Accessibility-Test-Tools sind dabei eine wertvolle Unterstützung, um z.B. Webseiten auf ihre Barrierefreiheit zu überprüfen. Insbesondere wenn sie in den bestehenden Entwicklungsworkflow und Continuous Integration (CI)-Pipelines eingebunden werden, können sie zielgerichtet helfen. Eine besonders wirkungsvolle Kombination ist die Integration von Tools wie Cypress für klassische UI-Tests und axe-core-basierten Accessibility-Tools in CI-Pipelines.
Automatisierte Accessibility-Tests: Funktionsweise und Vorteile
Klassische Testing-Methoden, die in der Regel Performance fokussiert sind, lassen Aspekte der Barrierefreiheit oft außer Acht. Hier setzen automatisierte Accessibility-Tests an, die bereits während der Entwicklung verwendet werden können, um potenzielle Barrieren frühzeitig zu erkennen.
Gängige Accessibility-Tools und Plugins
axe-core ist eine der am weitesten verbreiteten Bibliotheken für automatisierte Accessibility-Tests. Es wird von vielen bekannten Tools genutzt, darunter:
- WAVE: Ein einfaches Tool zur visuellen Identifikation von Accessibility-Problemen.
- Siteimprove Accessibility Checker: Ein umfangreicher Checker, der auch Berichte und Empfehlungen bietet.
- Accessibility Insights: Bietet sowohl automatische als auch manuelle Testfunktionen.
- Tenon: Eine flexible API-Lösung, die individuell angepasst werden kann.
Diese Tools erkennen gängige Barrierefreiheitsfehler wie fehlende Alt-Texte, unzureichenden Farbkontrast oder Probleme bei der Tastaturnavigation automatisch. Sie kommen allerdings nicht ohne manuelle Prüfungen aus, da nicht alle Barrieren maschinell erkannt werden können.
Cypress-Tests und Integration von Accessibility-Tests
Cypress ist ein automatisiertes Testframework, das sich auf End-to-End-Tests spezialisiert und weit verbreitet ist. Es ermöglicht es Entwicklern, User-Flows zu testen und sicherzustellen, dass Funktionalität und Benutzererfahrung einwandfrei funktionieren.
Die Integration von axe-core-basierten Accessibility-Tests in Cypress-Tests ist ein logischer nächster Schritt, um Barrierefreiheit in den Entwicklungsprozess einzubinden. Ein einfaches Beispiel wäre, bei jedem neuen Build automatisch die Website auf Barrierefreiheit zu testen und sicherzustellen, dass keine neuen Barrieren eingeführt werden.
Vorteile der Kombination von Cypress und Accessibility-Tests
- Frühe Erkennung von Problemen: Durch die Integration in den Entwicklungsworkflow werden Barrieren erkannt, bevor sie sich auf die Nutzererfahrung auswirken. Dies minimiert den Aufwand für nachträgliche Korrekturen und reduziert die Kosten.
- Automatisierung: In CI-Pipelines können Accessibility-Tests neben den klassischen UI-Tests automatisch ausgeführt werden, sodass mit jedem Commit geprüft wird, ob die Webanwendung barrierefrei ist.
- Konsistenz: Da Cypress und Accessibility-Tests in den CI-Prozess integriert sind, werden sie regelmäßig und konsistent durchgeführt. Dies stellt sicher, dass jede Änderung auf ihre Auswirkungen auf die Barrierefreiheit überprüft wird.
- Schnelle Rückmeldung: Die Ergebnisse automatisierter Accessibility-Tests stehen sofort nach jedem Build bereit. Dadurch können Entwickler sofort auf Barrieren reagieren und diese noch im Entwicklungszyklus beheben.
- Kosteneffizienz: Statt manuell jeden Aspekt der Barrierefreiheit zu überprüfen, lassen sich automatisierte Tests regelmäßig durchführen und decken die häufigsten Fehlerquellen ab.
Die Grenzen automatisierter Tools
Obwohl automatische Tools mächtig sind, gibt es Bereiche, in denen sie an ihre Grenzen stoßen:
- Falsch-negative oder falsch-positive Ergebnisse: Automatische Tools können Probleme übersehen oder Probleme melden, die in der Praxis keine Barriere darstellen. Entwickler müssen die Ergebnisse kritisch hinterfragen und bewerten.
- Usability-Test: Die reine technische Barrierefreiheit sagt nichts über die tatsächliche Benutzererfahrung aus, die etwa Menschen mit Seh- oder Mobilitätseinschränkungen haben.
Manuelle Prüfungen sind unverzichtbar: Viele Aspekte der Barrierefreiheit, wie die sinnvolle Reihenfolge von Inhalten oder die Verständlichkeit von Texten, können nicht automatisiert geprüft werden. Dies erfordert nach wie vor manuelle Tests durch Experten.
Ein optimaler Workflow könnte so aussehen
- Cypress Tests für Accessibility: Tests werden bei jedem Push automatisch durchgeführt. Tools wie Cypress unterstützen die Integration von axe-core, sodass Accessibility-Tests bei jedem CI-Lauf durchgeführt werden.
- Manuelles Accessibility Audit: Nach der automatisierten Testphase wird die Anwendung von Experten manuell geprüft und erkannte Schwachstellen können behoben werden.
- Nutzerfeedback: Echte Nutzer, vor allem Personen mit Behinderungen, sollten in den Testprozess einbezogen werden, um die tatsächliche Nutzbarkeit sicherzustellen.
Ein Beispiel für eine Cypress-Integration
- Cypress-Tests starten: Bei jedem Commit startet die CI-Pipeline, und Cypress führt die normalen Funktionstests durch, um sicherzustellen, dass alle User-Flows einwandfrei funktionieren.
- Accessibility-Tests laufen parallel: Gleichzeitig wird **axe-core** verwendet, um die Webseite auf gängige Accessibility-Probleme zu scannen (z. B. fehlende ARIA-Labels oder unzureichender Farbkontrast).
- Reporting und Fehleranalyse: Sollten Fehler gefunden werden, werden diese im Testreport vermerkt und dem Entwicklerteam sofort zur Verfügung gestellt. Das Team kann dann direkt im Code Anpassungen vornehmen, bevor der nächste Commit erfolgt.
Ein typischer Cypress-Test mit “axe-core” könnte wie folgt aussehen:
/// <reference types=“cypress“ />
describe(‚Accessibility Testing‘, () => {
it(‚Tests homepage for accessibility issues‘, () => {
cy.visit(‚https://beispiel.de‘);
cy.injectAxe();
cy.checkA11y();
});
});
// Basic usage after interacting with the page it(‚Has no a11y violations after button click‘, () => { // Interact with the page, then check for a11y issues cy.get(‚button‘).click() cy.checkA11y()})
Weitere Infos und Quellen zur Integration:
https://circleci.com/blog/cypress-accessibility-testing/
https://github.com/component-driven/cypress-axe
Mit dieser einfachen Integration prüft Cypress die Webseite auf Barrierefreiheitsfehler bei jedem Testdurchlauf. Das spart Zeit und verbessert die Qualität der Anwendung
Fazit: Wann machen automatische Accessibility-Tests Sinn?
Automatisierte Accessibility-Tests sind ein wertvolles Instrument, das vor allem bei der kontinuierlichen Überwachung und Fehlererkennung in frühen Entwicklungsstadien Sinn macht. Automatische Tests legen eine wertvolle Grundlage, können jedoch keine vollständige manuelle Prüfung ersetzen. Besonders bei komplexen Projekten können automatisierte Tools sehr gut unterstützen. Um die Barrierefreiheit zu gewährleisten und um z.B. den Kriterien von Verordnungen wie dem Barrierefreiheits-Stärkungs-Gesetz (BFSG) zu entsprechen, sollte der Prozess durch eine manuelle Prüfung ergänzt werden. Hierzu empfehlen wir manuelle Accessibility Audits und Nutzerfeedbacks aus der Zielgruppe.
Du möchtest wissen, welche Bausteine alle zu einer Barrierefreien Website gehören und wie sie ineinandergreifen?
Lerne unser vollständiges Leistungsspektrum zu Barrierefreien Websites hier kennen.
Mit einem Klick auf Social Media teilen
Kontakt. Auf Augenhöhe.
Sie sehen gerade einen Platzhalterinhalt von HubSpot. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen