Automatisierte A11y-Tests mit Playwright & Axe

Barrierefreiheit ist kein nice-to-have Feature, sondern im öffentlichen Bereich bereits eine gesetzliche Vorschrift. Ab Juli 2025 sind Richtlinien zur Gewährleistung der Barrierefreiheit auch von Unternehmen einzuhalten.

Zur Sicherstellung der Barrierefreiheit von Webseiten und mobilen Anwendungen wird eine Kombination aus automatisierten und manuellen Tests empfohlen. Wir präsentieren in diesem Blogbeitrag einen kurzen Überblick automatisierte A11y-Tests durch das End-to-End-Testing-Framework Playwright in Kombination mit Axe.

WARUM AXE & PLAYWRIGHT?

Die Kombination von Playwright und Axe bietet eine leistungsstarke Lösung für automatisierte A11y-Tests. Dabei übernimmt das Open-Source-Testautomatisierungstool Playwright die Benutzerinteraktionen und Seitennavigation. Playwright unterstützt umfassende Tests auf gängigen Betriebssystemen, unterschiedlichen Endgeräten und modernen Rendering-Engines, einschließlich Chromium, WebKit und Firefox. Die Integration des @axe-core/playwright-Pakets ermöglicht detaillierte Accessibility-Prüfungen durch die Nutzung der Axe-Barrierefreiheitstest-Engine.

FLAKINESS-VERMEIDENDE, ROBUSTE TESTS

Playwright bietet robuste Tests, die eine geringe Flakiness aufweisen. Die Auto-Wait-Funktion sorgt automatisch dafür, dass Aktionen wie beispielsweise Klicks erst ausgeführt werden, wenn das Ziel-Element vorhanden und interaktionsfähig ist, was künstliche Timeouts überflüssig macht. Zudem werden speziell für dynamische Webseiten konzipierte Assertions automatisch wiederholt, bis die erforderliche Bedingung erfüllt oder ein Timeout erreicht ist. Dadurch werden die Tests noch stabiler und verlässlicher.

PLAYWRIGHT-TOOLING

Playwright bietet eine Vielzahl nützlicher Funktionen, die die Erstellung und Analyse von Tests erleichtern sollen:

Codegen generiert Tests in der gewünschten Programmiersprache basierend auf der Aufzeichnung simulierter Benutzerinteraktion
Inspector bietet unter anderem Funktionen wie die Extraktion von Selektoren oder das Untersuchen der Seiten
Trace-Viewer bietet eine umfangreiche Untersuchung bei Testfehlern anhand enthaltener Screencasts der Testausführung, live DOM-Snapshots…

A11Y-SCANS MIT AXE

Standardmäßig prüft Axe derzeit nach den Web Content Accessibility Guidelines (WCAG) 2.1 AA-Standards sowie zusätzliche „Best Practice“-Regeln, die über die Anforderungen der WCAG hinausgehen. Der Grad der Zugänglichkeit kann bei Bedarf durch Anpassung der zu prüfenden Regeln definiert werden. Die A11y-Tests können gesamte Seiten oder nur spezifische Bereiche abdecken. Dafür können separate Testfälle erstellt oder die Barrierefreiheitsscans in bestehende Testfälle eingebettet werden, was eine nahtlose Integration in den bestehenden Workflow ermöglicht.

FAZIT

In der praktischen Anwendung zeigte sich die Prüfung der Barrierefreiheit mit Playwright in Kombination mit Axe als einfach integrier- und umsetzbar. Axe ermöglicht eine äußerst effiziente Analyse jener Barrierefreiheitsaspekte, die automatisiert geprüft werden können. Im Hinblick auf bestehende als auch bevorstehende gesetzliche Vorgaben sowie dem Ziel, die Zugänglichkeit zu Informationen für alle zu gewährleisten, ist die automatisierte Prüfung der WCAG-Konformität von großer Bedeutung. Denn generell sollte Barrierefreiheit kein nachträglicher Gedanke, sondern ein integraler Bestandteil der Entwicklung sein.