Ohne Maus durch Ihre Website. So prüfen Sie es in fünf Minuten.
Viele Menschen bedienen das Web nur mit der Tastatur: weil sie die Maus nicht führen können, weil sie einen Screenreader nutzen oder einfach schneller sind. Hier sehen Sie, worauf es ankommt, und üben es gleich.
Ihre Eingaben bleiben in Ihrem Browser. Wir speichern und übertragen nichts.
Was unser Scanner bei jeder Seite misst
Schalten Sie die Prüfungen ein und sehen Sie, wie eine gut gebaute Seite reagiert. Fokus-Reihenfolge, Zoom und Textabstände prüft der Scanner auf jeder Seite automatisch.
Textabstände 1.4.12
Größere Zeilen-, Wort- und Buchstabenabstände, wie sie zum Beispiel Menschen mit Leseschwäche einstellen. Nichts darf abgeschnitten werden oder übereinanderliegen.
Zoom auf 200 % 1.4.4 · 1.4.10
Doppelte Schriftgröße auf schmalem Bildschirm. Alles muss lesbar und bedienbar bleiben, ohne seitliches Scrollen.
Fokus-Reihenfolge 2.4.3 · 2.4.7
So springt man mit der Tab-Taste durch die Seite. Die Reihenfolge muss dem Sinn folgen, und man muss immer sehen, wo man ist.
Üben Sie: Drücken Sie die Tab-Taste
Klicken Sie einmal in den leeren Bereich über dem Übungsfeld und drücken Sie dann mehrmals Tab. Mit Umschalt + Tab geht es zurück. Rechts sehen Sie, wo der Fokus gerade ist und welchen Weg er genommen hat.
Ihre eigene Seite in fünf Minuten
Legen Sie die Maus beiseite. Öffnen Sie Ihre Startseite und eine wichtige Seite wie Kontakt, Warenkorb oder Buchung.
- Gleich am AnfangDrücken Sie einmal Tab. Erscheint ein Link »Zum Inhalt springen« oder landet der Fokus sichtbar auf dem ersten Element? Wer sonst durch das ganze Menü muss, verliert Zeit (2.4.1).
- Sehen, wo man istTabben Sie weiter. Ist jedes Mal klar erkennbar, welches Element den Fokus hat? Ein dünner, blasser Rahmen reicht oft nicht (2.4.7, 2.4.11).
- ReihenfolgeFolgt der Fokus der Lesereihenfolge: Kopf, Inhalt, Fuß, und in Formularen von oben nach unten? Springt er wild hin und her, ist die Reihenfolge falsch (2.4.3).
- Alles erreichbarLässt sich jedes Menü, jeder Schieberegler, jedes Akkordeon und jeder Cookie-Hinweis mit Tab, Enter, Leertaste und Pfeiltasten bedienen (2.1.1)?
- Keine FalleKommen Sie aus jedem Dialog, Video-Player und eingebetteten Element wieder heraus, mit Tab oder Esc (2.1.2)?
- Nichts verdecktVerschwindet der fokussierte Link nie hinter einem klebenden Kopf, Chat-Knopf oder Cookie-Banner (2.4.11)?
- Keine ÜberraschungenPassiert beim bloßen Fokussieren nichts Unerwartetes, etwa ein Seitenwechsel oder ein sich öffnendes Fenster (3.2.1)?
Welche Taste was tun sollte
| Taste | Erwartete Wirkung |
|---|---|
| Tab | Zum nächsten Link, Knopf oder Formularfeld. |
| Umschalt + Tab | Zurück zum vorherigen Element. |
| Enter | Link öffnen, Knopf auslösen, Formular absenden. |
| Leertaste | Knopf auslösen, Kontrollkästchen umschalten, Seite nach unten blättern. |
| Pfeiltasten | Innerhalb einer Gruppe wechseln: Optionsfelder, Auswahllisten, Reiter, Menüs, Schieberegler. |
| Esc | Dialog, Menü oder Tooltip schließen. |
| Pos1 / Ende | In Listen und Reitern zum ersten bzw. letzten Eintrag. |
Typische Fehler und das betroffene Kriterium
- outline: none ohne ErsatzDer Browser-Rahmen wird per CSS entfernt, eine eigene Fokus-Anzeige fehlt.2.4.7
- Klickbare div- und span-ElementeSieht aus wie ein Knopf, ist aber keiner: per Tab nicht erreichbar, Enter wirkt nicht.2.1.1
- tabindex größer als 0Erzwingt eine eigene Reihenfolge, die fast immer von der Lesereihenfolge abweicht.2.4.3
- Dialoge ohne Fokus-SteuerungDer Fokus bleibt hinter dem Dialog, oder man kommt nicht mehr heraus.2.1.2
- Klebender Kopf verdeckt den FokusBeim Zurück-Tabben verschwindet der fokussierte Link unter der fixierten Kopfzeile.2.4.11
- Menü nur bei MausberührungUntermenüs öffnen sich nur mit Hover und lassen sich per Tastatur nicht erreichen.1.4.13
Mehr als fünf Minuten?
Unser kostenloser Check macht den Tastatur-Durchgang auf Ihrer Startseite automatisch und hält die Fokus-Reihenfolge mit nummerierten Screenshots fest.
Weiter mit
Bin ich betroffen?
Fünf Fragen zum Barrierefreiheitsstärkungsgesetz. Am Ende steht eine klare Einschätzung mit nächsten Schritten, zum Ausdrucken oder als PDF.
Erklärung zur Barrierefreiheit erstellen
Felder ausfüllen, Vorschau ansehen, als HTML oder Text kopieren. Aufgebaut nach Anlage 3 BFSG und der EU-Mustererklärung.
Kontrast-Checker mit Farbkorrektur
Zwei Farben, ein Ergebnis: Kontrastverhältnis, AA und AAA. Fällt eine Kombination durch, schlagen wir den nächstliegenden Farbton vor, der besteht.
Checklisten für Ihr Team
Je eine Liste für Design, Entwicklung, Redaktion und Einkauf. Fortschritt bleibt in Ihrem Browser gespeichert, druckbar.