Tastaturbedienung & Fokus: Ihre Seite ohne Maus vollständig bedienbar machen

Wer Ihre Seite ohne Maus nur mit der Tastatur bedient, bleibt an manchen Stellen „hängen" oder sieht nicht, welches Element gerade ausgewählt ist. EverAudit prüft Tastaturbedienung und Fokus-Verwaltung gegen WCAG 2.1.1 (Keyboard), 2.1.2 (No Keyboard Trap) und 2.4.7 (Focus Visible) und meldet Barrieren als kritischen bis schwerwiegenden Befund.

Was ist das Problem?#

Diese Kategorie bündelt mehrere verwandte Tastatur-Barrieren:

• Fokusfalle (focus-trap) — die Tab-Reihenfolge betritt einen Bereich erneut und kann ihn nicht verlassen; die Auswahl springt im Kreis.
• Unsichtbarer Fokus (focus-visible) — ein Bedienelement hat keinen sichtbaren :focus-Indikator, sodass Tastaturnutzer nicht sehen, wo sie sich befinden.
• Verschachtelte Bedienelemente (nested-interactive) — ein Button innerhalb eines Links oder umgekehrt; Fokus und Auslösung werden mehrdeutig.
• Scrollbarer Bereich ohne Tastaturzugang (scrollable-region-focusable) — ein scrollbarer Container lässt sich nur mit der Maus bewegen.
• Defekter Sprunglink (skip-link) — der „Zum Inhalt springen"-Link führt ins Leere oder das Ziel ist nicht fokussierbar.

Gemeinsam ist allen: Sie betreffen Besucher, die aus Notwendigkeit oder Präferenz keine Maus nutzen — etwa Menschen mit motorischen Einschränkungen, aber auch Power-User und Screenreader-Nutzer.

Warum prüft EverAudit das?#

Tastaturbedienbarkeit ist eine Grundvoraussetzung, keine Zusatzfunktion — WCAG verlangt seit der ersten Version, dass jede Funktion ohne Maus erreichbar ist. EverAudit stuft diese Regelfamilie als prio1/prio2 ein: Fokusfallen und unsichtbarer Fokus machen eine Seite für Tastaturnutzer praktisch unbedienbar und werden entsprechend hoch priorisiert; defekte Sprunglinks erschweren die Bedienung erheblich, blockieren sie aber nicht vollständig.

Welche Auswirkung hat das?#

Betroffene Besucher — etwa mit motorischen Einschränkungen, aber auch alle, die aus Effizienzgründen die Tastatur bevorzugen — kommen nicht weiter und verlassen Ihre Seite. Eine Fokusfalle in einem Cookie-Banner oder Modal kann im schlimmsten Fall die gesamte Seite für Tastaturnutzer blockieren, weil sie den Dialog nicht verlassen können. Fehlender Sprunglink bedeutet, dass jede einzelne Seite erst komplett durch das Hauptmenü durchgetabbt werden muss, bevor der eigentliche Inhalt erreichbar ist — eine erhebliche Hürde bei umfangreicher Navigation.

Wie beheben Sie Tastatur- und Fokus-Probleme?#

Sichtbaren Fokus ergänzen:

/* Fokus-Ring nie komplett entfernen */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

Fokusfallen in Modals korrekt verwalten — der Fokus muss innerhalb eines echten Dialogs kontrolliert bleiben, aber beim Schließen wieder auf das auslösende Element zurückspringen:

// beim Öffnen: Fokus ins Modal setzen
modal.querySelector('[data-autofocus]')?.focus();

// beim Schließen: Fokus zurück auf den Trigger
closeButton.addEventListener('click', () => {
  modal.close();
  triggerButton.focus();
});

Sprunglink reparieren — Ziel muss existieren und fokussierbar sein:

<a href="#main-content" class="skip-link">Zum Inhalt springen</a>
…
<main id="main-content" tabindex="-1">…</main>

Scrollbare Bereiche fokussierbar machen:

<div class="scroll-container" tabindex="0" role="region" aria-label="Tabelle: Preisübersicht">
  …
</div>

Konkretes Vorgehen:

1. Kompletten Flow ohne Maus durchgehen — Tab, Shift+Tab, Enter, Escape, Pfeiltasten.
2. Jeden Dialog/jedes Menü gezielt testen, ob er sich mit Escape oder Tab wieder verlassen lässt.
3. :focus-visible-Styles nie entfernen, auch nicht aus Design-Gründen — durch eigene, gut sichtbare Styles ersetzen, nicht per outline: none löschen.
4. Sprunglink-Ziel verifizieren — Anker-ID muss exakt zum href passen und im DOM existieren.
5. Verschachtelte Bedienelemente auflösen — Button und Link nebeneinander statt ineinander anordnen.

Fazit#

Tastaturbedienbarkeit ist die Grundlage, auf der jede weitere Barrierefreiheits-Maßnahme aufbaut: Ohne sie sind selbst gut beschriftete Buttons und Links für einen Teil Ihrer Besucher unerreichbar. Ein systematischer Tastatur-Test des kompletten Nutzerflows deckt die meisten dieser Probleme zuverlässig auf.