Ohne Maus ans Ziel: Tastatur und Fokus

Die Grundregeln

• Alles erreichbar: Jede Funktion lässt sich mit der Tastatur bedienen (2.1.1 Tastatur). Tab und Umschalt+Tab springen zwischen Bedienelementen, Enter löst Links und Buttons aus, die Leertaste Buttons und Checkboxen.
• Keine Falle: Man kommt aus jedem Element mit der Tastatur wieder heraus (2.1.2 Keine Tastaturfalle).
• Logische Reihenfolge: Der Fokus folgt dem Sinn der Seite (2.4.3 Fokus-Reihenfolge).
• Immer sichtbar: Man sieht, wo der Fokus ist (2.4.7 Fokus sichtbar), und er wird nicht verdeckt (2.4.11 Fokus nicht verdeckt (Minimum)).
• Abkürzen: Ein Link „Zum Inhalt springen“ führt an der Navigation vorbei (2.4.1 Blöcke umgehen).

Echte Buttons statt klickbarer divs

Ein <button> ist von Haus aus fokussierbar, reagiert auf Enter und Leertaste und wird als Schaltfläche angesagt. Ein <div> mit Klick-Handler kann nichts davon. Nehmen Sie für Aktionen <button>, für Seitenwechsel <a href>. Das spart Code und Fehler.

<div class="btn" onclick="save()">
  Speichern
</div>

<button type="button" class="btn">
  Speichern
</button>

Der Button ist fokussierbar, reagiert auf Enter und Leertaste und hat die richtige Rolle.

tabindex: 0 und -1 ja, positive Werte nein

tabindex="0" nimmt ein Element in die normale Reihenfolge auf, etwa ein eigenes Widget. tabindex="-1" macht ein Element per Skript fokussierbar, ohne es in die Tab-Reihenfolge zu stellen, zum Beispiel eine Überschrift, auf die Sie nach einem Seitenwechsel springen. Positive Werte wie tabindex="3" bringen die Reihenfolge durcheinander und sind fast nie die richtige Lösung. Ordnen Sie lieber das HTML so, wie es gelesen werden soll.

Seitenwechsel in Single-Page-Apps

Bei einer klassischen Website lädt nach einem Klick eine neue Seite, und der Screenreader beginnt oben. In einer Single-Page-App tauscht JavaScript nur den Inhalt aus. Der Fokus bleibt auf dem geklickten Link, der vielleicht gar nicht mehr existiert, und niemand erfährt, dass sich etwas geändert hat.

Bewährt hat sich: Nach jedem Routenwechsel den Seitentitel (document.title) aktualisieren (2.4.2 Seite mit Titel) und den Fokus auf die neue Hauptüberschrift setzen. Alternativ kündigen Sie den Wechsel über eine Live-Region an, siehe Muster Statusmeldung.

router.on('change', view => {
  main.innerHTML = view.html;
});

router.on('change', view => {
  main.innerHTML = view.html;
  document.title = view.title;
  const h1 = main.querySelector('h1');
  h1.setAttribute('tabindex', '-1');
  h1.focus();
});

Dialoge, Menüs und Fokus-Rückgabe

Öffnet sich ein modaler Dialog, gehört der Fokus hinein. Solange er offen ist, bleibt Tab im Dialog, Escape schließt ihn, und danach kehrt der Fokus zu dem Element zurück, das ihn geöffnet hat. Das native <dialog>-Element mit showModal() erledigt vieles davon. Wie es aussieht und sich anfühlt, zeigt das Muster Modaler Dialog; für Menüs das Muster Aufklapp-Navigation.

Wichtig: Ein Fokus-Einschluss ist nur bei echten modalen Dialogen richtig. Überall sonst ist er eine Tastaturfalle.

Eigene Tastenkürzel mit Bedacht

Kürzel aus nur einem Buchstaben, etwa „s“ für Suche, lösen bei Sprachsteuerung versehentlich aus. 2.1.4 Tastaturkurzbefehle verlangt, dass man solche Kürzel abschalten oder umbelegen kann oder dass sie nur wirken, solange das zugehörige Element den Fokus hat. Kürzel mit Strg oder Alt sind davon nicht betroffen.

Checkliste zum Abhaken

Passende WCAG-Kriterien

• 2.1.1 Tastatur
• 2.1.2 Keine Tastaturfalle
• 2.1.4 Tastaturkurzbefehle
• 2.4.1 Blöcke umgehen
• 2.4.3 Fokus-Reihenfolge
• 2.4.7 Fokus sichtbar
• 2.4.11 Fokus nicht verdeckt (Minimum)
• 2.4.2 Seite mit Titel

Werkzeuge und Muster dazu

• Tastatur-TestFokus sichtbar machen und üben
• Modaler DialogFokus beim Öffnen hinein, Escape schließt, Fokus zurück.
• Navigation mit Untermenüs, die nicht nur mit der Maus funktioniertUntermenüs per Button, Escape schließt, normale Links.
• Statusmeldungen, die ankommen, ohne den Fokus zu stehlenMeldungen per Live-Region ansagen, ohne Fokuswechsel.
• Kostenlos prüfenIhre Startseite in zwei Minuten automatisch prüfen

Häufige Fragen

Quellen

• W3C WAI-ARIA Authoring Practices: Developing a Keyboard Interface
• W3C: Understanding 2.1.1 Keyboard
• W3C: Understanding 2.4.3 Focus Order
• W3C: Understanding 2.1.4 Character Key Shortcuts
• W3C: WCAG 2.2