2️⃣ 2.4.11 - Fokus nicht überdeckt - Minimum
AA 2.2
Design Umsetzung
Anwendung von
Ziel
Sicherstellen, dass Benutzeroberflächenkomponenten mit Tastaturfokus sichtbar bleiben und nicht vollständig verdeckt werden.
Beschreibung
- Elemente, die den Tastaturfokus erhalten, müssen zumindest teilweise sichtbar sein.
- Verhindern, dass fokussierte Elemente von fixierten Komponenten wie Kopf- oder Fußbereichen vollständig verdeckt werden.
- Inhalte dürfen nur teilweise durch vom Autor erstellte Inhalte überdeckt werden.
Anforderungen
- Vermeidung von Designs mit fixierten Komponenten, die den Fokus vollständig verdecken könnten.
- Gestaltung von Benachrichtigungen oder Overlays so, dass sie fokussierte Elemente nicht vollständig überdecken.
- Anwendung von CSS-Techniken wie
scroll-padding, um sicherzustellen, dass fokussierte Elemente nicht verdeckt werden. - Implementierung von Modalen oder Overlays, die den Fokus erhalten und Interaktionen außerhalb blockieren.
- Prüfung der Seite auf typische Fehler wie überlappende Sticky Header oder Footer.
- Überprüfung, ob fixierte oder schwebende Elemente fokussierte Komponenten nicht vollständig verdecken.
- Sicherstellen, dass fokussierte Komponenten im Ansichtsfenster sichtbar bleiben.
- Einsatz von Tools zur Analyse von Fokusmanagement und Layout-Verhalten.
Code-Beispiele
Anwendung von scroll-padding für sichtbare Fokuselemente
html { scroll-padding-top: 50px; /* Abstand für fixierten Header */ scroll-padding-bottom: 50px; /* Abstand für fixierten Footer */}