Tastaturbedienung barrierefrei: Fokus und Reihenfolge

Viele Menschen nutzen keine Maus. Sie springen mit der Tabulatortaste von Element zu Element. Hier siehst du, wie Fokus und Reihenfolge aussehen müssen, damit die Tastaturbedienung barrierefrei ist.

Zum Vergleich Prüfung für deine Website

Selbst vergleichen

Bedienung mit der Tastatur: vorher und nachher

Vorher: Fokus auf „Kontakt“, aber nicht zu sehen Nachher: Fokus mit doppeltem Rahmen, sofort erkennbar

In beiden Hälften steht der Fokus auf „Kontakt“. Nur rechts sieht man es. Den Regler bedienst du mit der Maus, mit dem Finger oder mit den Pfeiltasten.

Warum es zählt

Warum die Tastaturbedienung barrierefrei sein muss

Blinde Menschen bedienen Websites fast immer mit der Tastatur, weil sie den Mauszeiger nicht sehen. Dazu kommen Menschen mit Zittern, Lähmungen oder Schmerzen in den Händen, die eine Maus nicht genau führen können, und alle, die mit Spracheingabe, Schaltern oder Mundstäben arbeiten. Sie alle brauchen eine Seite, die sich vollständig über die Tastatur bedienen lässt.

Die häufigsten Probleme sind ein unsichtbarer Fokus, eine Reihenfolge, die kreuz und quer über die Seite springt, und Elemente, die mit der Tastatur gar nicht erreichbar sind. Oft stecken dahinter Klickflächen, die als einfache Container gebaut wurden statt als echte Knöpfe, oder ein Fokusrahmen, der aus optischen Gründen entfernt wurde.

Besonders tückisch sind Tastaturfallen. Ein Dialog öffnet sich, der Fokus springt hinein, kommt aber nicht wieder heraus, oder ein eingebetteter Kartenausschnitt hält ihn fest. Wer keine Maus nutzt, ist dann auf der Seite gefangen. WCAG 2.2 hat die Regeln zum Fokus zusätzlich verschärft, er darf nun auch nicht mehr von festen Kopfzeilen verdeckt werden.

WCAG 2.2

Was die WCAG hier verlangen

2.1.1 Stufe A

Tastatur

Alle Funktionen sind mit der Tastatur bedienbar, ohne bestimmte Zeitvorgaben für einzelne Tastendrücke.
2.1.2 Stufe A

Keine Tastaturfalle

Der Fokus kann jedes Element mit der Tastatur auch wieder verlassen.
2.4.3 Stufe A

Fokus-Reihenfolge

Die Reihenfolge folgt der Bedeutung und Bedienung, meist von oben nach unten und von links nach rechts.
2.4.7 Stufe AA

Fokus sichtbar

Das Element mit dem Tastaturfokus ist jederzeit deutlich erkennbar.
2.4.11 Stufe AA

Fokus nicht verdeckt

Neu in WCAG 2.2: Der Fokus wird nicht vollständig von Kopfzeilen, Bannern oder Chatfenstern verdeckt.

Lösung

So machst du deine Seite mit der Tastatur bedienbar

Selbst ohne Maus testen

Leg die Maus zur Seite und geh deine wichtigsten Wege mit Tab, Umschalt und Tab, Enter, Leertaste und den Pfeiltasten durch. Du merkst sofort, wo es hakt.
Echte Elemente verwenden

Knöpfe sind Buttons, Verweise sind Links, Auswahlfelder sind Select-Felder. Diese Elemente sind von Haus aus fokussierbar und bedienbar, nachgebaute Container nicht.
Fokus deutlich gestalten

Entferne nie den Fokusrahmen ohne Ersatz. Ein kräftiger Rahmen mit mindestens drei zu eins Kontrast und etwas Abstand zum Element ist auf jedem Hintergrund zu erkennen.
Sprunglink anbieten

Ein Link „Zum Inhalt springen“ ganz am Anfang erspart Tastaturnutzern, sich bei jedem Seitenwechsel durch das gesamte Menü zu tippen.

Vorher

<div class="knopf"
  onclick="senden()">
  Senden
</div>

*:focus { outline: none; }

Nachher

<button type="submit">
  Senden
</button>

:focus-visible {
  outline: 3px solid #0d100e;
  outline-offset: 3px;
}

Ein div ist mit der Tastatur nicht erreichbar, und ohne Fokusrahmen sieht niemand, wo er ist. Ein echter Button und ein deutlicher Rahmen lösen beides.

Fragen

Fragen zu Bedienung mit der Tastatur

Wie teste ich die Tastaturbedienung?

Drück auf deiner Seite immer wieder die Tabulatortaste und beobachte, wohin der Fokus springt. Jedes Element, das man anklicken kann, muss erreichbar sein, sichtbar markiert werden und sich mit Enter oder Leertaste auslösen lassen.

Darf ich den Fokusrahmen entfernen?

Nur wenn du ihn durch einen eigenen, mindestens ebenso deutlichen Rahmen ersetzt. Mit :focus-visible erscheint er nur bei Tastaturbedienung und stört Mausnutzer nicht.

Was ist eine Tastaturfalle?

Eine Stelle, an der der Fokus hineinkommt, aber nicht wieder heraus, etwa ein Dialog ohne Schließen per Escape oder ein eingebetteter Inhalt, der alle Tasten abfängt.

Weitere Ratgeber zur Barrierefreiheit

Wie steht deine Website da?

Wir prüfen deine Seite auf diese und alle anderen Barrieren und schicken dir einen Bericht, der sagt, was zuerst dran ist.

Anfrage für eine Prüfung senden Zum Schnelltest

Tastatur­bedienung barriere­frei: Fokus und Reihenfolge