Legen Sie Ihre Maus in die Schublade, öffnen Sie Ihre eigene Website und drücken Sie die Tabulatortaste. Nach wenigen Minuten wissen Sie, ob Menschen, die keine Maus benutzen können, mit Ihrer Website wirklich zurechtkommen: ob sie sehen, wo sie sich befinden, ob sie das Menü erreichen, den Cookie-Hinweis schließen, das Kontaktformular ausfüllen und ein Pop-up wieder verlassen können. Für diesen Test brauchen Sie weder Software noch technisches Wissen. Sie brauchen eine Tastatur, zehn Minuten und einen Notizblock. Dieser Artikel führt Sie Schritt für Schritt durch den Test, gibt Ihnen eine Checkliste zum Ausdrucken und erklärt, wie sich die häufigsten Probleme beheben lassen.
Warum Bedienbarkeit per Tastatur wichtig ist
Viele Menschen fassen nie eine Maus an. Die Tastatur, oder etwas, das sich wie eine Tastatur verhält, ist ihr Weg durch jede Website.
- Menschen mit motorischen Einschränkungen, etwa mit Zittern, Lähmungen oder eingeschränkter Handbewegung, können eine Tastatur oft viel leichter bedienen als einen kleinen Mauszeiger.
- Menschen, die mit Schaltern arbeiten (ein oder zwei große Tasten, manchmal mit dem Kopf oder per Atem bedient) oder mit einer Bildschirmtastatur, nutzen denselben Mechanismus. Das W3C, die Organisation hinter den Webstandards, erklärt, dass sich solche Hilfsmittel wie eine Tastatur verhalten: Was mit der Tastatur funktioniert, funktioniert auch mit ihnen.
- Menschen, die per Sprachsteuerung arbeiten, sagen etwa „Klick auf Senden“ oder „nächstes Feld“. Laut W3C hilft die Bedienbarkeit per Tastatur auch denen, die eine Website mit der Stimme steuern.
- Nutzerinnen und Nutzer von Screenreadern, also blinde oder sehbehinderte Menschen, die sich die Seite von einer Computerstimme vorlesen lassen, bewegen sich mit Tastaturbefehlen durch Seiten und Formulare.
- Geübte Nutzer, die einfach lieber die Tastatur verwenden, weil es schneller geht, besonders bei langen Formularen.
Die Bedienbarkeit per Tastatur ist Teil der Web Content Accessibility Guidelines (WCAG), des internationalen Standards des W3C, auf dem die meisten europäischen Regeln zur Barrierefreiheit aufbauen. Die Grundanforderungen „Tastatur“ und „Keine Tastaturfalle“ gehören zur Stufe A, der grundlegendsten Stufe des Standards.
Bereiten Sie Ihren Computer vor
Unter Windows können Sie in allen gängigen Browsern sofort mit der Tabulatortaste von Link zu Link und von Schaltfläche zu Schaltfläche springen. Diesen Schritt können Sie überspringen.
Auf einem Mac springt die Tabulatortaste standardmäßig nur zwischen Textfeldern. Ändern Sie deshalb zuerst zwei Einstellungen:
- Öffnen Sie das Apple-Menü, wählen Sie Systemeinstellungen, klicken Sie in der Seitenleiste auf Tastatur und aktivieren Sie Tastaturnavigation.
- Wenn Sie in Safari testen, wählen Sie Safari > Einstellungen, klicken Sie auf Erweitert und aktivieren Sie die Option, mit der die Tabulatortaste jedes Objekt auf einer Webseite hervorhebt (auf Englisch: Press Tab to highlight each item on a webpage). Ohne diese Option erreicht Safari Links nur mit Wahltaste+Tab.
In Chrome auf dem Mac finden Sie eine vergleichbare Option unter Einstellungen > Darstellung: Die Tabulatortaste hebt dann auch Links hervor, nicht nur Formularfelder. Starten Sie den Browser neu, nachdem Sie diese Einstellungen geändert haben.
Die sechs Tasten, die Sie brauchen
- Tab springt vorwärts zum nächsten Link, zur nächsten Schaltfläche oder zum nächsten Formularfeld.
- Umschalt+Tab springt zurück zum vorherigen.
- Eingabetaste folgt einem Link oder drückt eine Schaltfläche.
- Leertaste drückt eine Schaltfläche, setzt ein Häkchen und scrollt auf den meisten Seiten nach unten, wenn nichts ausgewählt ist.
- Pfeiltasten wechseln zwischen Optionen innerhalb einer Gruppe: Optionsfelder, eine Auswahlliste, ein Schieberegler, Reiter innerhalb eines Bereichs.
- Escape schließt ein Pop-up, ein Menü oder eine Auswahlliste.
Jede Stelle, an der die Tabulatortaste landet, nennen wir einen Stopp. Der Rahmen oder die Markierung, die zeigt, auf welchem Stopp Sie gerade sind, heißt Fokusanzeige. Der größte Teil dieses Tests besteht darin, diesen Stopps zu folgen und die Fokusanzeige im Blick zu behalten.
Der Test, Schritt für Schritt
Wählen Sie eine wichtige Seite, etwa Ihre Startseite, eine Produktseite oder Ihre Kontaktseite. Klicken Sie einmal in die Adressleiste des Browsers, drücken Sie dann die Tabulatortaste und gehen Sie die folgenden Punkte durch.
Sehen Sie immer, wo Sie sind?
Jeder einzelne Stopp braucht eine sichtbare Fokusanzeige: einen Rahmen, eine Unterstreichung, eine andere Farbe. Wenn Sie Tab drücken und sich scheinbar nichts ändert, ist der Fokus an einer Stelle gelandet, die Sie nicht sehen. Das verstößt gegen die WCAG-Anforderung „Fokus sichtbar“. Achten Sie auch auf Stopps, die hinter einer fixierten Kopfzeile oder einem Cookie-Hinweis verschwinden. WCAG 2.2 hat dafür eine eigene Anforderung ergänzt, „Fokus nicht verdeckt“.
Ist die Reihenfolge logisch?
Die Stopps sollten der Seite so folgen, wie Sie sie lesen: von oben nach unten, von links nach rechts, das Menü vor dem Inhalt, die Felder eines Formulars in der Reihenfolge, in der sie erscheinen. Springt der Fokus von der Kopfzeile in die Fußzeile und dann zurück in die Mitte, verlieren Menschen den Überblick.
Gibt es einen Link „Zum Hauptinhalt springen“?
Auf den meisten gut gebauten Websites zeigt schon der allererste Druck auf Tab einen Link wie „Zum Hauptinhalt springen“ oder „Zum Inhalt“. Betätigen Sie ihn mit der Eingabetaste, dann sollte der nächste Tab im Hauptinhalt landen und nicht wieder im Menü. Ohne diesen Link muss sich jemand mit Tastatur auf jeder Seite durch sämtliche Menüpunkte tabben.
Funktionieren Menüs und Auswahllisten?
Öffnen Sie das Hauptmenü und etwaige Untermenüs mit der Eingabetaste oder der Leertaste, bewegen Sie sich mit Tab oder den Pfeiltasten hindurch und schließen Sie sie mit Escape. Ein Untermenü, das sich nur öffnet, wenn man mit der Maus darüberfährt, ist ein häufiger Fehler.
Kommen Sie immer wieder heraus?
Die WCAG nennen das eine Tastaturfalle: Der Fokus gerät in einen Bereich, oft eine eingebettete Karte, ein Chatfenster oder ein Video, und die Tabulatortaste bringt Sie nicht mehr heraus. Wenn Sie feststecken, versuchen Sie Escape und Umschalt+Tab. Hilft beides nicht, ist es eine Falle.
Übernehmen Pop-ups den Fokus und geben ihn zurück?
Wenn sich ein Pop-up-Fenster öffnet (eine Newsletter-Anmeldung, ein Login-Fenster, eine Bildansicht), sollte der Fokus hineinspringen. Solange es offen ist, sollte Tab darin bleiben, Escape sollte es schließen, und danach sollte der Fokus zu der Schaltfläche zurückkehren, die es geöffnet hat. So beschreibt es auch die Anleitung des W3C.
Können Sie ein Formular ausfüllen und absenden?
Füllen Sie jedes Feld aus, setzen Sie die Häkchen, wählen Sie in den Auswahllisten und senden Sie ab. Versuchen Sie es dann noch einmal mit einem absichtlichen Fehler, etwa einer E-Mail-Adresse ohne „@“. Erreichen Sie die Fehlermeldung, und sagt sie Ihnen, was Sie korrigieren müssen?
Können Sie den Cookie-Hinweis schließen?
Er ist oft das Erste auf der Seite. Erreichen Sie die Schaltflächen mit Tab, wählen Sie mit der Eingabetaste und prüfen Sie, ob der Hinweis wirklich verschwindet.
Karussells und Videoplayer
Eine Bildergalerie, die sich länger als fünf Sekunden von selbst bewegt, braucht laut der WCAG-Anforderung „Pausieren, beenden, ausblenden“ eine Möglichkeit, sie anzuhalten oder zu stoppen. Prüfen Sie, ob Sie diese Schaltfläche und die Pfeile für vor und zurück erreichen. In einem Videoplayer prüfen Sie, ob Sie Wiedergabe, Lautstärke, Untertitel und Vollbild erreichen und den Player mit Tab wieder verlassen können.
Ihre Checkliste zum Ausdrucken
- Der erste Druck auf Tab zeigt einen Link „Zum Hauptinhalt springen“, und er funktioniert.
- Jeder Stopp hat eine deutlich sichtbare Fokusanzeige.
- Kein Stopp verschwindet hinter einer fixierten Kopfzeile, einer Chat-Schaltfläche oder einem Cookie-Hinweis.
- Die Reihenfolge der Stopps folgt der sichtbaren Reihenfolge der Seite.
- Alles, was Sie mit der Maus anklicken können, können Sie auch mit der Tastatur erreichen und bedienen.
- Menüs und Untermenüs öffnen sich mit der Eingabe- oder Leertaste und schließen sich mit Escape.
- Sie stecken nie fest: Tab oder Escape bringt Sie immer weiter.
- Pop-ups übernehmen beim Öffnen den Fokus, halten ihn, schließen sich mit Escape und geben den Fokus zurück.
- Formulare lassen sich ausfüllen und absenden, und Fehlermeldungen sind erreichbar und verständlich.
- Der Cookie-Hinweis lässt sich mit der Tastatur lesen und schließen.
- Bewegte Bildergalerien lassen sich anhalten, und ihre Schaltflächen sind erreichbar.
- Videoplayer lassen sich mit der Tastatur starten, stoppen und verlassen.
Was Sie notieren, wenn etwas nicht klappt
Eine Notiz wie „das Menü geht nicht“ schickt eine Entwicklerin auf die Suche. Eine genaue Notiz lässt sie das Problem in wenigen Minuten beheben. Notieren Sie bei jedem Problem drei Dinge:
- Wo: die Adresse der Seite und die Stelle auf der Seite, zum Beispiel „Startseite, Hauptmenü, Punkt Leistungen“.
- Was Sie gedrückt haben: die Tasten in der Reihenfolge, zum Beispiel „sechsmal Tab, dann Eingabetaste“.
- Was passiert ist, und was Sie erwartet haben: „Das Untermenü hat sich nicht geöffnet; ich habe die Seiten unter Leistungen erwartet“.
Ein Bildschirmfoto oder eine kurze Bildschirmaufnahme hilft ebenfalls. Notieren Sie auch den Browser und den Computer, denn Safari auf dem Mac verhält sich manchmal anders als Chrome unter Windows.
Wie sich die häufigsten Probleme beheben lassen
Sie müssen das nicht selbst reparieren. Wenn Sie die Ursache kennen, wird das Gespräch mit Ihrer Entwicklerin, Ihrem Entwickler oder dem Support Ihres Website-Baukastens aber deutlich einfacher.
Der Fokusrahmen wurde entfernt
Browser zeichnen automatisch einen Fokusrahmen. Manchmal entfernen Gestalter ihn, weil sie ihn unschön finden, und vergessen dann, etwas anderes an seine Stelle zu setzen. WebAIM, eine bekannte Fachstelle für Barrierefreiheit an der Utah State University, rät davon ab, diesen Rahmen zu entfernen. Die Lösung ist ein deutlicher Rahmen im eigenen Design:
/* Vermeiden: versteckt den Rahmen für alle */
a:focus {
outline: none;
}
/* Besser: ein deutlicher Rahmen, sobald jemand die Tastatur nutzt */
a:focus-visible {
outline: 3px solid #1a5e3a;
outline-offset: 2px;
}Die erste Regel versteckt, wo Sie sich befinden. Die zweite zeichnet eine dicke grüne Linie mit etwas Abstand um einen Link, sobald ihn jemand mit der Tastatur erreicht. Wenn Sie einen Website-Baukasten verwenden, suchen Sie in den Einstellungen Ihres Themes nach einem Feld für eigene Gestaltungsregeln.
Eine „Schaltfläche“, die keine ist
Manchmal wird eine Schaltfläche aus einem einfachen Kasten gebaut, der nur auf einen Mausklick reagiert. Er sieht aus wie eine Schaltfläche, ist aber mit Tab nicht erreichbar, und die Eingabetaste bewirkt nichts. Eine echte Schaltfläche löst das, denn Browser geben echten Schaltflächen die Tastaturbedienung gratis dazu:
<!-- Funktioniert nur mit der Maus --> <div class="btn" onclick="openMenu()">Menü</div> <!-- Funktioniert mit Maus, Tastatur, Sprachsteuerung und Screenreader --> <button type="button" onclick="openMenu()">Menü</button>
Dasselbe gilt für Links: Einen echten Link erreichen Sie mit Tab und folgen ihm mit der Eingabetaste; Text, der nur wie ein Link aussieht, oft nicht.
Was automatische Prüfungen sehen und was nicht
Automatische Prüfungen auf Barrierefreiheit sind nützlich, aber sie können keine Tasten drücken und beurteilen, was dann passiert. Sie finden manche Ursachen, etwa eine fehlende Beschriftung an einem Formularfeld, aber nicht, ob sich ein Menü öffnet, ob der Fokus in einem Chatfenster hängen bleibt oder ob die Reihenfolge der Stopps sinnvoll ist. Deshalb lohnt sich dieser Zehn-Minuten-Test, auch wenn Ihre Website eine automatische Prüfung besteht.
Der optionale „zweite Blick mit KI“ von ibin kann Ihnen einen Vorsprung verschaffen. Er folgt der Tastaturreihenfolge durch die Seite, zählt die Stopps und weist auf Stopps ohne sichtbaren Rahmen hin. Sehen Sie das als Liste von Stellen, die Sie zuerst selbst prüfen, nicht als abschließendes Urteil.
Probieren Sie es auf Ihrer eigenen Website aus
Beginnen Sie heute mit einer Seite: Gehen Sie die Checkliste durch und notieren Sie, was Ihnen auffällt. Prüfen Sie diese Seite danach kostenlos mit ibin, um die Probleme zu finden, die automatische Prüfungen erkennen können, mit Bildern der betroffenen Stellen und verständlichen Hinweisen zur Behebung. Die Anleitungen erklären die Lösungen ausführlicher, und wenn Sie sich mit Ihrer E-Mail-Adresse anmelden, können Sie bis zu 200 Seiten Ihrer Website kostenlos prüfen lassen.
Sehen Sie, wie Ihre Website abschneidet
Prüfen Sie kostenlos eine Seite, ohne Konto. Sie erhalten eine klare Liste, was zuerst zu beheben ist, mit Bildern, wo jedes Problem liegt.
