Wie eine Seite mit der Tastatur bedienbar wird

So funktioniert es

Mit der Tabulatortaste springt der Fokus von einem Bedienelement zum nächsten: Links, Buttons, Formularfelder. Enter öffnet einen Link, Leertaste oder Enter lösen einen Button aus. So arbeiten Menschen, die keine Maus führen können, Screenreader-Nutzer und viele, die schlicht schneller tippen als klicken.

Damit das klappt, braucht es drei Dinge: Jedes Element ist per Tastatur erreichbar, die Reihenfolge folgt dem, was man sieht, und das gerade fokussierte Element ist sichtbar hervorgehoben, meist durch einen Rahmen.

WCAG 2.2 verlangt Bedienbarkeit per Tastatur (Kriterium 2.1.1) ohne Falle, aus der man nicht mehr herauskommt (2.1.2), eine sinnvolle Fokus-Reihenfolge (2.4.3), einen sichtbaren Fokus (2.4.7) und dass der Fokus nicht ganz von anderem verdeckt wird, etwa von einem festen Kopfbereich (2.4.11).

Worauf es ankommt

• Kein tabindex über 0. Ein Wert wie tabindex="3" zieht ein Element in der Reihenfolge vor alle anderen. Die Reihenfolge folgt dann nicht mehr der Seite. tabindex="0" (in die natürliche Reihenfolge aufnehmen) und tabindex="-1" (nur per Skript fokussierbar) sind in Ordnung.
• Reihenfolge über den Code. Die Tab-Reihenfolge folgt dem HTML. Stimmt sie nicht, ordne das HTML um, statt Elemente per CSS optisch zu verschieben.
• Ein sichtbarer Fokus. outline: none ohne Ersatz macht die Seite blind bedienbar. Ein deutlicher Fokusrahmen genügt, siehe unten.
• Echte Bedienelemente. a, button, input und select sind von sich aus fokussierbar und bedienbar. Ein div mit Klick-Funktion ist es nicht.
• Menüs, Dialoge und Slider lassen sich öffnen, bedienen und mit Escape schließen; im offenen Dialog bleibt der Fokus im Dialog.

Ein Fokusrahmen, der bei Tastaturbedienung erscheint, nicht beim Mausklick:

:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

Wähle eine Farbe, die sich vom Hintergrund abhebt. Für den sichtbaren Fokus drückt bytereport im Browser bis zu 40-mal Tab und vergleicht bei jedem erreichten Element Umriss, Schatten, Rahmen, Hinter- und Schriftfarbe und Unterstreichung mit und ohne Fokus.

So richtest du es ein

Fokusstile und Tab-Reihenfolge stecken im Theme: im CSS und in den Vorlagen für Menü, Slider und Popups. Viele Themes und Resets entfernen den Fokusrahmen; wer das Theme pflegt, ersetzt ihn durch einen eigenen Stil. Probier es selbst: Klick in die Adresszeile, drück wiederholt Tab und schau, ob du jederzeit siehst, wo du bist, und ob du alles erreichst, was du mit der Maus erreichst.