Fokus nicht verdeckt (Erweitert)

Was gefordert wird

2.4.11 erlaubt eine teilweise Verdeckung, solange ein Teil des fokussierten Elements sichtbar bleibt. 2.4.12 hebt diese Ausnahme auf: Das fokussierte Element muss vollständig sichtbar sein. Beim Tabben auf eine Schaltfläche muss diese vollständig im Viewport erscheinen, ohne dass irgendetwas sie überlagert — kein fixierter Header, der den oberen Rand abschneidet, keine Chat-Schaltfläche, die die untere rechte Ecke verdeckt.

Dieses Kriterium ist AAA und für die meisten Teams ein angestrebtes Ideal. Es ist jedoch das richtige Ziel für Design-Systeme in Behörden, Gesundheitswesen und Bildungseinrichtungen, wo Tastaturzuverlässigkeit nicht verhandelbar ist.

Erfüllungshinweise

• scroll-padding-top und scroll-padding-bottom am Scroll-Container großzügig setzen — geringfügig mehr als die Gesamthöhe aller fixierten Elemente.
• Chat-Widgets automatisch ausblenden, wenn ein fokussierbares Element in deren Bereich gelangt, oder sie bei Fokus-Events aus dem Weg bewegen.
• Bei fixierten Fußleisten: nicht-fixierte Alternativen in Betracht ziehen oder diese beim Scrollen komprimieren, sodass sie nur Überschrifteninhalte, nicht aber Steuerelemente überlagern.
• Jede Seite mit sowohl fixiertem Header als auch fixierter Fußleiste auditieren. Das „sichere Band“ in der Mitte schrumpft schnell, besonders auf kleinen Viewports.
• Bei 200 % Browser-Zoom und bei 400 % testen (gemäß 1.4.10 Reflow) — fixierte Elemente, die bei 100 % funktionierten, können den Bildschirm nun ausfüllen.

Häufige Fehler

• Fixierter Header, der die oberen 4 Pixel jedes Fokusrahmens verdeckt — für 2.4.11 ausreichend, schlägt bei 2.4.12 fehl.
• Skip-Link-Ziele, die ganz oben in <main> landen und deren Fokusrahmen vom fixierten Header teilweise abgeschnitten wird.
• Schwebende „Hilfe“-Schaltflächen unten rechts, die eine 1-Pixel-Ecke fokussierter Steuerelemente in diesem Bereich überlagern.
• Werbebanner, die durch Marketing-Tags eingeblendet werden und im Design-System nicht in den scroll-padding-Werten berücksichtigt sind.
• Mobile untere Navigationsleisten, bei denen Tab in das letzte Formularfeld führt und der Fokusrahmen am unteren Rand leicht abgeschnitten erscheint.

Warum es wichtig ist

Für Nutzende mit Sehschwäche, die auf den Fokusindikator zur Orientierung angewiesen sind, kann selbst eine teilweise Verdeckung den Indikator faktisch unsichtbar machen — ein 2-Pixel-Rahmen mit dem obersten Pixel abgeschnitten sieht wie eine 1-Pixel-Linie aus und wird leicht mit einem normalen Rahmen verwechselt. Das erweiterte Erfolgskriterium behandelt den Fokusindikator als vollwertiges UI-Element, dem sein vollständiger Begrenzungsrahmen auf dem Bildschirm zusteht. Die Einhaltung von 2.4.12 zwingt Teams dazu, ihr Budget für fixierte Elemente zu überdenken, was das Layout häufig für alle verbessert.