TDO Media
← Alle Blogartikel
Webseiten3 Min. Lesezeit

Eine Website ohne Maus auf Bedienbarkeit prüfen

Ein nachvollziehbarer Tastaturtest für Navigation, Formulare und Dialoge – mit kostenloser Prüfliste und einem Beispiel für eine konkrete Fehlermeldung.

Zwei Hände bedienen eine Tastatur vor einem unscharfen Monitor
KI-generiertes Bild

Mit der Maus erreichst du das Menü, füllst ein Formular aus und schließt einen Hinweis. Lege die Maus beiseite und wiederhole genau diese Aufgaben. Auf vielen Seiten zeigt sich erst dabei, ob Bedienelemente erreichbar sind, der Fokus sichtbar bleibt oder ein Dialog das Weiterarbeiten verhindert.

Beginne mit einem Weg, der für deine Besucher wichtig ist. Prüfe, ob du ihn vollständig mit der Tastatur durchlaufen kannst. Halte einen Fehler so fest, dass eine zweite Person ihn auf derselben Seite wiederholen kann.

Wähle einen konkreten Weg durch die Website

Teste beispielsweise den Weg von der Startseite über die Navigation zur Kontaktseite. Öffne die Seite neu und notiere Browser, Betriebssystem, Datum und die geprüfte URL. Für eine Formularübermittlung nutze eine freigegebene Testumgebung mit Testdaten. Auf einer echten Seite kannst du zunächst bis zur Schaltfläche gehen und die Übermittlung auslassen.

  • Tab bewegt den Fokus gewöhnlich zum nächsten erreichbaren Element. Mit Umschalt und Tab gehst du zurück.
  • Eingabe folgt einem fokussierten Link. Schaltflächen reagieren gewöhnlich auf Eingabe und Leertaste.
  • Pfeiltasten können innerhalb zusammengesetzter Elemente gebraucht werden, zum Beispiel bei der Auswahl in einer Gruppe von Optionsfeldern.

Prüfe, ob der Fokus sichtbar und nachvollziehbar bleibt

Der Fokus zeigt, welches Element deine nächste Tastatureingabe erhält. Drücke Tab mehrfach und benenne bei jedem Schritt das Element, auf dem du gerade bist. Achte auf helle und dunkle Bereiche der Seite. Ein dezenter Rand kann auf einem Hintergrund gut erkennbar sein und auf einem anderen verschwinden.

Vergleiche den Weg mit der Aufgabe. Wenn der Fokus von der Navigation in die Fußzeile springt und erst später zum Formular zurückkehrt, protokolliere die genaue Reihenfolge. Bleibt er auf einem Element unter einer festen Leiste, notiere zusätzlich, welcher Teil verdeckt ist.

Teste Menü, Formular und Dialog als ganze Aufgabe

Was ein vollständiger Tastaturtest abdeckt
BereichPrüfschrittErwartetes Ergebnis
MenüÖffnen, zum Ziel wechseln und zurückgehenDie Einträge sind erreichbar und der Fokus bleibt sichtbar
FormularFelder vorwärts und rückwärts ansteuern, in der Testumgebung einen Fehler auslösenEingaben bleiben möglich, die Meldung ist auffindbar und die Aufgabe lässt sich fortsetzen
Modaler DialogÖffnen, innerhalb des Dialogs navigieren und ihn schließenDer Fokus geht in den Dialog und danach normalerweise zur auslösenden Schaltfläche zurück

Eigene redaktionelle Darstellung

Bei einem modalen Dialog darf Tab innerhalb des offenen Dialogs bleiben. Entscheidend ist, dass er über die Tastatur geschlossen werden kann. Das W3C-Muster sieht dafür unter anderem Escape vor. Prüfe auch, ob eine sichtbare Schaltfläche zum Schließen erreichbar ist. Ist der Auslöser nach dem Schließen verschwunden, sollte der Fokus an einer sinnvollen Stelle weitergehen.

Schreibe eine Fehlermeldung, die sich wiederholen lässt

Fiktives Beispiel. Auf der Kontaktseite Tab bis zur Schaltfläche „Rückruf anfragen“, Eingabe drücken, danach zweimal Tab. Erwartet wird ein sichtbarer Fokus im geöffneten Dialog. Tatsächlich springt der Fokus zur Navigation hinter dem Dialog. Ergänze Browser, Betriebssystem und bei Bedarf die Fensterbreite.

Prüfe nach der Korrektur denselben Weg erneut. Gehe auch einen Schritt zurück und wieder vor. So fällt auf, wenn die Reparatur nur in einer Richtung funktioniert.

Halte den geprüften Weg und offene Stellen fest

Ein manueller Test zeigt konkrete Probleme auf den getesteten Seiten. Für eine umfassende Barrierefreiheitsprüfung sind weitere Aufgaben, Seiten und Prüfkriterien nötig. Notiere deshalb, welche Bereiche ihr abgedeckt habt und welche noch fehlen.

Kostenloses Prüfblatt für die Tastaturbedienung öffnen. Die Vorlage lässt sich ohne Anmeldung ausfüllen und drucken.

Häufige Fragen zum Thema

Muss jeder Text mit Tab erreichbar sein?

Normaler Lesetext braucht in der Regel keinen eigenen Tab-Stopp. Prüfe vor allem Links, Schaltflächen, Felder und andere Bedienelemente.

Ist eine Schleife im Dialog ein Tastaturfehler?

Ein modaler Dialog hält den Fokus absichtlich im Dialog. Problematisch wird es, wenn kein bedienbarer Weg herausführt oder der Fokus nach dem Schließen verloren geht.

Reicht ein automatischer Test für dieses Problem?

Ein automatischer Test kann Hinweise liefern. Ob du einen konkreten Weg tatsächlich zu Ende bedienen kannst und den Fokus jederzeit findest, lässt sich mit dem manuellen Ablauf unmittelbar prüfen.

Weiterlesen

Passende Themen für dich

Mehr zu TDO Media Weitere Blogartikel