Tastatur- und Screenreader-Tests Schritt für Schritt
Tastatur- und Screenreader-Tests
Tastatur- und Screenreader-Tests Schritt für Schritt | We.Inc
Manueller Test für jede Website: Tastaturprüfungen, NVDA- und VoiceOver-Befehle, ein Skip-Link, :focus-visible-CSS und eine Checkliste zum Abhaken.
Um eine Website per Tastatur zu testen, leg die Maus weg und nutze Tab, Shift+Tab, Enter, Leertaste und die Pfeiltasten, um alles zu erreichen und zu bedienen. Achte dabei auf einen sichtbaren Fokusrahmen und eine sinnvolle Reihenfolge. Schalte dann einen Screenreader ein, NVDA unter Windows oder VoiceOver auf dem Mac, und prüfe, ob Überschriften, Links, Schaltflächen und Formularfelder klar angesagt werden.
WCAG-2.2-Kriterien, die diese Tests abdecken
Kriterium
Stufe
Was du prüfst
2.1.1 Tastatur
Alles funktioniert ohne Maus
2.1.2 Keine Tastaturfalle
Der Fokus kann sich immer wieder wegbewegen
2.4.1 Blöcke umgehen
Eine Möglichkeit, wiederholte Navigation zu überspringen
2.4.3 Fokus-Reihenfolge
Die Tab-Reihenfolge folgt der Bedeutung der Seite
2.4.7 Fokus sichtbar
AA
Du siehst immer, wo der Fokus liegt
2.4.11 Fokus nicht verdeckt (Minimum)
AA
Fixierte Leisten verdecken das fokussierte Element nicht
4.1.2 Name, Rolle, Wert
Bedienelemente sagen an, was sie sind und welchen Zustand sie haben
Automatische Prüfprogramme finden fehlende Alt-Texte und zu geringen Kontrast, aber sie können nicht beurteilen, ob sich ein Menü mit Enter öffnen lässt oder ob ein Screenreader-Nutzer ein Formular versteht. Diese Seite führt dich der Reihe nach durch den manuellen Durchgang, mit einem Übungsbereich, der genau zeigt, welches Element den Fokus hat, und einer Checkliste, die sich deinen Fortschritt merkt.
Öffne die Seite, die du testen willst, in einem anderen Tab. Behalte diese Checkliste daneben.
Arbeite zuerst die Tastaturschritte ab und hake jeden Punkt ab. Der Fortschrittszähler aktualisiert sich dabei.
Übe im Übungsbereich hier: Gehe mit Tab hindurch, und die Fokusanzeige nennt das Element, das gerade den Fokus hat.
Starte dann einen Screenreader mit den Befehlen aus den Tabellen und wiederhole den Ablauf, indem du zuhörst.
Kopiere den Code für den Skip-Link und den Fokusstil, um die häufigsten Fehler zu beheben.
Teste die wichtigsten Abläufe, nicht jede Seite: das Menü, eine Suche, das Hauptformular, Checkout oder Buchung und jeden Dialog.
Zoome den Browser beim Tabben auf 200 Prozent. Fokusrahmen und fixierte Header kollidieren bei größeren Darstellungen oft.
Wenn du die Standardkontur entfernst, ersetze sie in derselben Regel. Lass outline: none nie allein stehen.
Verwende echte button- und a-Elemente. Ein klickbares div wird von Tab übersprungen und als einfacher Text angesagt.
Hör dir ein ganzes Formular mit dem Screenreader an, bevor du etwas änderst. Fehlende Beschriftungen fallen beim Zuhören sofort auf.
Häufige Fragen
Mit welchem Screenreader sollte ich testen?
Nutze nach Möglichkeit das, was deine Besucher nutzen. NVDA gibt es kostenlos für Windows von NV Access, und VoiceOver ist in jeden Mac und jedes iPhone eingebaut. Wenn der Großteil deines Traffics von Smartphones kommt, ergänze einen Durchgang mit VoiceOver auf dem iPhone oder TalkBack auf Android.
Wie starte und beende ich NVDA und VoiceOver?
NVDA startet nach der Installation mit Control+Alt+N, und Insert+Q beendet es. Auf dem Mac schaltet Command+F5 VoiceOver ein und aus. Ein einzelner Druck auf Control bringt NVDA mitten im Satz zum Schweigen.
Was ist ein Skip-Link?
Das ist der erste Link auf der Seite, meist verborgen, bis er den Fokus erhält, der direkt zum Hauptinhalt springt. Tastaturnutzer müssen sich dann nicht auf jeder Seite durch die gesamte Navigation tabben. Die WCAG führen ihn neben Landmarks und Überschriften als eine ausreichende Technik für 2.4.1 Blöcke umgehen.
Sollte ich :focus oder :focus-visible verwenden?
:focus-visible lässt den Browser entscheiden, wann ein Fokusrahmen nützlich ist. Tastaturnutzer sehen ihn also, während Mausklicks auf Schaltflächen meist keinen zeichnen. Laut MDN wird es seit März 2022 breit unterstützt. Gestalte :focus-visible und behalte für jedes interaktive Element einen sichtbaren Rahmen.
Was ist eine Tastaturfalle?
Eine Stelle, an die der Fokus gelangt und die er per Tastatur nicht mehr verlassen kann, etwa ein eingebetteter Player oder ein eigener Dialog, der Tab abfängt. Modale Dialoge sollten den Fokus halten, solange sie offen sind, aber Escape oder eine Schließen-Schaltfläche muss den Besucher immer hinauslassen.
Lesemodus und Fokusmodus
Screenreader lesen Webseiten in einem virtuellen Puffer, in dem einzelne Buchstaben springen: H zur nächsten Überschrift, K zum nächsten Link in NVDA. Landest du in einem Textfeld, wechselt der Reader in den Fokusmodus, damit Buchstaben stattdessen getippt werden. Mit NVDA+Space schaltest du manuell zwischen beiden um.
Deshalb kann ein eigenes Widget, das nur auf Pfeiltasten reagiert, kaputt wirken. Im Lesemodus fängt der Reader diese Tasten womöglich ab, bevor dein Skript sie mitbekommt. Verwende daher native Elemente oder folge den Mustern der ARIA Authoring Practices.
So klingt es richtig
Jedes Bedienelement sollte mit Name, Rolle und, wo relevant, Zustand angesagt werden: Suche, Eingabefeld; Menü, Schaltfläche, reduziert; Abonnieren, Kontrollkästchen, nicht aktiviert. Fehlt eines der drei, korrigiere das Markup, bevor du ARIA ergänzt.
Überschriften sollten eine Gliederung bilden, die du wie ein Inhaltsverzeichnis lesen könntest. Öffne die Überschriftenliste in der Elementliste von NVDA oder im VoiceOver-Rotor und prüfe, ob sie für sich allein verständlich ist.
Befunde festhalten
Beschreibe jedes Problem mit Seite, Schritten, erwartetem und tatsächlichem Verhalten sowie dem verletzten Kriterium. Mit diesem Format kann ein Entwickler es ohne Raten nachstellen.
Teste nach den Korrekturen mit denselben Schritten erneut. Gerade Fokusprobleme tauchen gern wieder auf, wenn ein Header oder Modal neu gestaltet wird.
Tasten für Tests nur mit der Tastatur
Standardverhalten der Browser-Tastatur
Taste
Was sie tun sollte
Tab / Shift+Tab
Zum nächsten oder vorherigen fokussierbaren Element springen
Enter
Einem Link folgen oder eine Schaltfläche drücken
Space
Eine Schaltfläche drücken, ein Kontrollkästchen anhaken, die Seite scrollen, wenn nichts fokussiert ist
Pfeiltasten
Innerhalb von Optionsgruppen, Auswahllisten, Menüs und Tab-Listen bewegen
Escape
Einen Dialog, ein Menü oder ein Popup schließen
NVDA-Befehle (Windows, Desktop-Layout)
Die NVDA-Taste ist standardmäßig Insert; laut Benutzerhandbuch geht auch Caps Lock. Einzelne Buchstabentasten funktionieren im Lesemodus.
Aus dem NVDA-Benutzerhandbuch
Aktion
Tasten
NVDA starten
Control+Alt+N
Sprachausgabe stoppen
Control
Ab hier vorlesen (alles lesen)
NVDA+Down Arrow
Zwischen Lese- und Fokusmodus wechseln
NVDA+Space
Elementliste (Links, Überschriften, Landmarks)
NVDA+F7
Nächste Überschrift / Landmark / nächster Link
Nächstes Formularfeld / nächste Schaltfläche
Nächste Tabelle / Liste
NVDA beenden
NVDA+Q
VoiceOver-Befehle (Mac)
VO steht für die VoiceOver-Sondertaste: Control und Option zusammen gedrückt oder Caps Lock allein.
Aus Apples VoiceOver-Benutzerhandbuch
Aktion
Tasten
VoiceOver ein- oder ausschalten
Command+F5
Den Rotor öffnen
VO+U
Rotor-Liste wechseln (Überschriften, Links und mehr)
Pfeil links oder rechts im Rotor
Durch die gewählte Liste gehen
Pfeil hoch oder runter im Rotor
Lösungen für die häufigsten Fehler
Skip-Link zum Inhalt
Klicke in das Ergebnis und drücke dann Tab. Der Link gleitet erst ins Bild, wenn er fokussiert ist, und sein Ziel ist das main-Element.
Ein Fokusrahmen, den nur Tastaturnutzer sehen
Tabbe zu den Schaltflächen im Ergebnis. Der versetzte Rahmen hält Abstand zum Rand der Schaltfläche, und Mausklicks lassen ihn meist verborgen.
Fokussierte Elemente nicht unter einem fixierten Header verschwinden lassen
scroll-padding-top reserviert oben Platz, wenn der Browser ein fokussiertes Element oder einen Anker in den sichtbaren Bereich scrollt.
Nur Tastatur
Nach dem Laden der Seite einmal Tab drücken
Ein Skip-Link erscheint und funktioniert mit Enter
Mit Tab durch die ganze Seite gehen
Jeder Link, jede Schaltfläche und jedes Feld wird in Lesereihenfolge erreicht
Den Fokusrahmen an jeder Station beobachten
Er ist immer sichtbar und nie hinter einem fixierten Header verborgen
Das Menü und alle Dropdowns öffnen
Enter oder Leertaste öffnet sie; Escape schließt sie und gibt den Fokus zurück
Eigene Widgets bedienen
Tabs, Schieberegler und Karussells reagieren auf die erwarteten Tasten
Einen Dialog öffnen und schließen
Der Fokus springt hinein, bleibt dort und kehrt danach zum Auslöser zurück
Das Hauptformular ausfüllen und absenden
Fehler sind erreichbar und der Fokus landet an einer sinnvollen Stelle
Versuchen, stecken zu bleiben
Keine Einbettung und kein Widget hält den Fokus gefangen
Screenreader
Seitentitel und erste Überschrift anhören
Sie sagen, auf welcher Seite du bist
Die Überschriftenliste öffnen
Die Überschriften bilden eine sinnvolle Gliederung mit einer h1
Die Landmark-Liste öffnen
Banner-, Navigations-, Haupt- und Fußbereich sind vorhanden
Durch die Links gehen
Jeder Linktext ist auch ohne Kontext verständlich
Jedes Formularfeld besuchen
Jedes Feld sagt eine Beschriftung, seinen Typ und an, ob es Pflicht ist
Eine Fehler- und eine Erfolgsmeldung auslösen
Beide werden angesagt, ohne dass du die Maus bewegst
Bilder prüfen
Informative Bilder haben Alt-Text; dekorative bleiben stumm
Eine Schaltfläche oder ein Kontrollkästchen umschalten
Der neue Zustand, etwa erweitert oder aktiviert, wird angesagt
Test-Checkliste
Zurücksetzen
Hake jeden Schritt beim Testen ab. Deine Häkchen bleiben nur auf dieser Seite.
{n} von {total} Schritten erledigt
Nichts auf der Seite hat den Fokus
{t}-Feld
kein zugänglicher Name
Tabbe in den Bereich, um zu beginnen
Übungsbereich für den Fokus
Gehe mit Tab durch diese Bedienelemente. Die Anzeige nennt das Element, das gerade den Fokus hat.