Zum Inhalt springen
Elemente, die den Tastaturfokus erhalten, müssen immer zumindest teilweise sichtbar sein.
Stufe:
AA
Prinzip:
Bedienbar
Rolle:
Design
Entwicklung

Ziel dieses Kriteriums ist, dass das aktuell per Tastatur fokussierte Bedienelement im Viewport immer zumindest teilweise sichtbar bleibt. Für sehende Tastaturnutzer ist der sichtbare Fokus entscheidend, um zu wissen, wo sie sich auf der Seite befinden und wie sie weiter interagieren können. Wird das fokussierte Element vollständig verdeckt, entsteht schnell der Eindruck, die Seite reagiere nicht mehr. Das Kriterium erlaubt, dass fokussierte Elemente teilweise von anderen Inhalten überlagert werden, zum Beispiel durch:

  • Sticky Footer:
    Eine Seite hat eine fest am unteren Rand des Viewports fixierte Fußzeile. Beim Navigieren mit der Tab-Taste wird der Inhalt automatisch so nach oben gescrollt, dass das aktuell fokussierte Element vollständig sichtbar bleibt und nicht von der Fußzeile überdeckt wird (zum Beispiel durch scroll-padding).
  • Modales Cookie-Banner:
    Eine Website zeigt ein seitenbreites Cookie-Einwilligungsfenster an, das die restliche Seite blockiert, bis es bestätigt oder abgelehnt wird. Der Fokus liegt innerhalb dieses Dialogs, und der überwiegende Teil der Fokusmarkierung bleibt sichtbar, da das Dialogfenster selbst im Viewport verbleibt.
  • Sticky Benachrichtigung:
    Eine Benachrichtigung ist als fixierter Header umgesetzt. Der Tastaturfokus wird gezielt auf diese Benachrichtigung gesetzt, sodass zumindest ein Teil der Fokusmarkierung sichtbar ist. Sobald die Benachrichtigung den Fokus verliert, verschwindet sie wieder und verdeckt keine anderen Bedienelemente; der vorherige Fokusindikator ist erneut (teilweise) sichtbar.

Vollständiges Verdecken ist jedoch nicht zulässig. Je stärker ein Element verdeckt wird, desto schlechter ist die Nutzbarkeit – idealerweise sollte gar keine Überdeckung auftreten. Dieser Idealfall ist im AAA-Kriterium »Focus Not Obscured (Enhanced)« geregelt.

Problematische Fälle entstehen häufig durch fixierte Banner, Benachrichtigungen oder nicht-modale Overlays. Diese sind nur zulässig, wenn sie den Fokus selbst übernehmen, sich bei Fokusverlust schließen oder der Nutzer das verdeckte fokussierte Element per Tastatur wieder sichtbar machen kann (zum Beispiel durch Scrollen oder Schließen per Escape). Korrekt umgesetzte modale Dialoge bestehen das Kriterium immer, da sie den Fokus binden.

Bewertet wird primär das fokussierte Element selbst, nicht der Fokusindikator – auch wenn ein verdeckter Fokusindikator in der Praxis meist zusätzlich gegen »Fokus sichtbar« verstößt. Insgesamt soll sichergestellt werden, dass Nutzer jederzeit erkennen können, welches Element aktuell den Tastaturfokus hat.

Verwandte Erfolgskriterien