Die Durchführung einer internen Prüfung ist ein effizienter Weg, um die Qualität Ihres Onlineantrags kontinuierlich sicherzustellen. Mit den richtigen Werkzeugen und einem systematischen Vorgehen können Sie den Status quo ermitteln und die notwendigen Korrekturen direkt in den Entwicklungsprozess einfließen lassen.
Festlegung des Testumfangs
Bevor Sie mit der Prüfung beginnen, legen Sie fest, welche Teile des Online-Antrags getestet werden sollen. Das Ziel ist nicht, jede einzelne Seite oder theoretisch mögliche Kombination abzudecken, sondern den Online-Antrag aus Sicht der Nutzenden sinnvoll und vollständig zu bewerten. Im Mittelpunkt steht der gesamte Prozess, vom ersten Einstieg bis zum erfolgreichen Abschluss. Gehen Sie den Antrag so durch, als würden Sie ihn tatsächlich ausfüllen, und prüfen Sie dabei folgende Kernaspekte:
- Verständlichkeit: Ist der Einstieg klar und logisch?
- Kontinuität: Bauen alle Schritte nachvollziehbar aufeinander auf?
- Bedienbarkeit: Sind Eingaben problemlos möglich (auch ohne Maus)?
- Feedback: Sind Fehlermeldungen sofort und verständlich?
- Abschluss: Ist der erfolgreiche Ende des Prozesses eindeutig erkennbar?
Dabei ist es entscheidend, den Antrag nicht als isolierte Seiten zu betrachten, sondern den gesamten Ablauf im Zusammenhang zu prüfen, da ein Fehler in einem frühen Schritt den Nutzer oft erst im späteren Verlauf blockiert.
Bei Anträgen mit verzweigender Logik (z. B. abhängig von vorherigen Entscheidungen) ist es nicht notwendig, jede denkbare Kombination zu testen. Es reicht aus, einen typischen Standardfall vollständig durchzuführen. Zusätzlich sollten Sie jedoch gezielt kritische Varianten prüfen, bei denen sich der Ablauf sichtbar verändert.
Weniger relevant sind hingegen statische Inhalte ohne direkte Interaktion, wie rechtliche Hinweise (Impressum, AGB) oder reine Informationsseiten. Diese stehen nicht im Fokus der Prüfung, können aber bei Bedarf ergänzend geprüft werden. Insgesamt sollte der Testumfang so gewählt sein, dass der Onlineantrag in seinen wesentlichen Nutzungsszenarien zuverlässig bewertet werden kann.
Vorbereitung
Bevor Sie den Test starten, stellen Sie sicher, dass die folgenden Voraussetzungen erfüllt sind, um verlässliche Ergebnisse zu erzielen:
- Hardware: Ein PC/Laptop und ein Smartphone (oder Tablet) sind zwingend erforderlich.
- Testbericht: Für die Erfassung Ihrer Ergebnisse nutzen Sie die offizielle Testvorlage. Diese befindet sich derzeit in der Erstellung und wird Ihnen in Kürze in den Guidelines zur Verfügung gestellt.
- Die notwendigen Tools: Installieren Sie folgende Erweiterungen in Ihrem Standard-Browser (Chrome oder Firefox empfohlen). Ohne diese Tools können Sie keine vollständigen Barrierefreiheits-Checks durchführen.
| Tool | Zweck | Installation / Nutzung | Link |
|---|---|---|---|
| WAVE | Zeigt Barrierefreiheits-Fehler (Alt-Texte, Kontrast) visuell an. | Gehen Sie auf den Link, klicken Sie auf „Hinzufügen zu Chrome/Firefox“ und bestätigen Sie. Das Icon erscheint oben rechts. | WAVE Download |
| axe DevTools | Findet komplexe technische Fehler (ARIA-Labels, Struktur). | Klicken Sie im Web Store auf „Hinzufügen“. Starten Sie das Tool über das Icon und wählen Sie „Analyze“. | axe DevTools |
| Lighthouse | Automatischer Score für Performance & Barrierefreiheit. | Rechtsklick auf Seite → Untersuchen → Tab „Lighthouse“ → Haken bei „Barrierefreiheit“. | Integriert in Chrome/Edge |
| NVDA für PC (optional) | Screenreader für Windows (simuliert blinde Nutzer). | Laden Sie die Portable-Version herunter, starten Sie die .exe und drücken Sie Strg+Alt+N. | NVDA Download |
| VoiceOver für Mac/iOS | Eingebauter Screenreader für Apple-Geräte. | Desktop: Cmd+F5; Mobile: Einstellungen > Barrierefreiheit | Integriert in macOS/iOS |
| TalkBack für Android | Eingebauter Screenreader für Android. | Einstellungen > Barrierefreiheit > TalkBack aktivieren | Integriert in Android |
| WCAG Contrast checker | Prüft, ob Farbkontraste ausreichend sind. | Nach Erweiterung /Add-On suchen, installieren und über das Browser-Icon aktivieren. | Erweiterung / Add-On für Browser |
| HeadingsMap | Zeigt die Struktur der Überschriften (H1–H6) an | Nach Erweiterung /Add-On suchen, installieren und über das Browser-Icon aktivieren. | Erweiterung / Add-On für Browser |
Testablauf
Führen Sie den Test unter möglichst realistischen Bedingungen durch:
- Verwenden Sie einen aktuellen Browser (Chrome, Firefox oder Edge)
- Nutzen Sie nach Möglichkeit den Inkognito-Modus, um Cache- oder Sitzungsprobleme zu vermeiden
Ein vollständiger Test basiert immer auf der Kombination aus manueller Prüfung und automatisierter Analyse.
- Der manuelle Test (Tastatur, Screenreader, Logik) simuliert das echte Nutzererlebnis und findet Probleme in der Bedienung, die Tools oft übersehen.
- Der automatisierte Test (Tools) deckt technische Fehler auf, die dem menschlichen Auge entgehen (z. B. fehlende ARIA-Labels im Code, Kontrastwerte).
Führen Sie den Test nacheinander für Desktop und Mobile durch. Für jedes Gerät wiederholen Sie den Prozess: Zuerst der manuelle Test, direkt gefolgt von der technischen Verifizierung.
Manueller Test auf Desktop
Starten Sie den Antrag und navigieren Sie vom Einstieg bis zum Abschluss nur mit der Tastatur (TAB, Pfeiltasten, Enter, Leertaste, Escape).
Fokus-Prüfung:
Bei jedem Klick muss ein sichtbarer Rahmen (Fokus) um das aktive Element erscheinen. Achten Sie dabei auch darauf, dass die Reihenfolge der Navigation logisch und nachvollziehbar ist. Wenn der Fokus fehlt oder „springt“, notieren Sie den Fehler sofort.
Logik & Varianten:
Ist die Reihenfolge der Schritte intuitiv? Können Sie zurückblättern? Ist jederzeit erkennbar, in welchem Schritt des Antrags Sie sich befinden? Prüfen Sie „kritische Varianten“ (z. B. neue Felder bei „Ja“-Antwort). Funktioniert die Dynamik korrekt und bleibt der Ablauf verständlich? Prüfen Sie auch versteckte oder aufklappbare Inhalte (z. B. Reiter oder Dialoge) auf ihre vollständige Bedienbarkeit.
Verständlichkeit:
Ist bei allen Eingabefeldern klar, was eingegeben werden soll? Sind Pflichtfelder verständlich gekennzeichnet? Fehlermeldungen sollten eindeutig dem jeweiligen Eingabefeld zugeordnet sein.
Fehlerbehandlung:
Geben Sie bewusst falsche Daten ein (z. B. ungültige E-Mail). Springt der Fokus automatisch auf das Feld, das korrigiert werden muss? Erscheint die Meldung sofort und ist sie verständlich?
Lesbarkeit & Darstellung:
Sind Texte und Bedienelemente gut lesbar und ausreichend kontrastreich? Prüfen Sie den Antrag zusätzlich bei vergrößerter Darstellung (mind. 200 % Zoom, z. B. über Strg + +). Inhalte müssen weiterhin lesbar und vollständig bedienbar bleiben, ohne dass Inhalte abgeschnitten werden oder horizontales Scrollen erforderlich ist. Informationen sollten zudem nicht ausschließlich über Farben vermittelt werden.
Zur Unterstützugn können Sie bei Bedarf den WCAG Contrast checker verwenden.
Dynamische Inhalte:
Werden bei Interaktionen neue Inhalte eingeblendet, sollte der Fokus sinnvoll gesetzt werden. Beim Schließen von Elementen (z. B. Dialogen) muss der Fokus wieder an die ursprüngliche Stelle zurückkehren.
Optional
Screenreader-Check (NVDA/VoiceOver): Führen Sie den Ablauf mit aktiviertem Screenreader durch. Werden alle Felder, Buttons und Fehlermeldungen laut vorgelesen? Versteht der Nutzer aus dem Gehör, was zu tun ist?
Zur Prüfung der Seitenstruktur kann alternativ ein Tool wie HeadingsMap zur Anzeige der Überschriften verwendet werden.
Manueller Test auf Mobile
Prüfen Sie dieselben Punkte auch auf Ihrem Mobilgerät, dort aber auf folgende Weise.
Touch-Navigation: Tippen Sie durch die Seite. Prüfen Sie, ob sich Elemente visuell ändern (z. B. hellere Farbe), wenn Sie sie berühren („Active State“).
Screenreader-Test: Aktivieren Sie VoiceOver (iOS) oder TalkBack (Android) und navigieren Sie durch den Antrag. Wird jedes Feld, jeder Button und jede Überschrift korrekt vorgelesen? Wenn Sie ein Feld auswählen, wird der Feldname angesagt? Wenn lediglich allgemeine Begriffe wie „Button“ oder „Leer“ ausgegeben werden, ist dies ein Hinweis auf eine fehlerhafte Auszeichnung.
Optional
Tastatur-Test: Wenn Sie eine physische Tastatur angeschlossen haben, navigieren Sie mit der TAB-Taste durch den Antrag und prüfen Sie, ob ein sichtbarer Fokus vorhanden ist. Ist dies nicht der Fall, sollte der Fehler dokumentiert werden.
Automatisierter Test
Nach dem manuellen Durchlauf bestätigen Sie Ihre Beobachtungen mit den Tools.
Lighthouse-Scan: Nutzen Sie das integrierte Tool (Rechtsklick → Untersuchen → Lighthouse). Ein Score unter 90 ist kritisch.
WAVE & axe Dev Scan: Aktivieren Sie beide Tools auf der jeweiligen Seite und überprüfen Sie den Online-Antrag mit beiden Anwendungen.
Dabei ist es völlig normal, dass WAVE Probleme erkennt, die axe DevTools nicht anzeigt – und umgekehrt. Erst die Kombination beider Ergebnisse ergibt ein möglichst vollständiges Bild.
Achten Sie bei der Auswertung darauf, dass zwischen Fehlern und Hinweisen unterschieden wird:
- Fehler sollten konkret behoben werden
- Hinweise sollten aufgenommen und im weiteren Verlauf geprüft werden
Führen Sie die Analyse zusätzlich auch für die mobile Ansicht durch. Nutzen Sie hierfür die Gerätesimulation in den Entwickler-Tools des Browsers, um verschiedene Bildschirmgrößen realistisch abzubilden.