Sichtbarer Fokus: Verbergen Sie niemals den Umriss
Verhindern Sie, dass Nutzer sich auf der Seite verirren.
Sichtbarer Fokus: Verbergen Sie niemals den Umriss ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Wo bin ich gerade?
Ein Tastaturbenutzer kann immer nur eines sehen: welches Steuerelement den Fokus hat. Diese sichtbare Markierung wird als Fokusindikator bezeichnet. 👀
Der Browser stellt einen kostenlos bereit
Standardmäßig zeichnet der Browser beim Navigieren mit Tab einen Fokusrahmen um das aktive Element. Er ist die integrierte Markierung für „Sie befinden sich hier“.
Die häufigste a11y-Sünde
Designer stört der Rahmen oft und sie entfernen ihn. Diese eine Regel, outline none, macht Tastaturbenutzer sofort blind. Bitte veröffentlichen Sie sie niemals ohne Ersatz.
:focus { outline: none; } /* harmful on its own */Nur entfernen, wenn Sie ihn ersetzen
Sie dürfen den Standardrahmen entfernen, aber nur, wenn Sie einen deutlichen Ersatz hinzufügen. Ein fokussiertes Steuerelement darf niemals genauso aussehen wie ein inaktives.
button:focus { outline: 3px solid #1565C0; }Machen Sie ihn unübersehbar
Ein guter Indikator ist leicht zu erkennen: ein dicker Rahmen, ein Ring oder eine deutliche Farbänderung. Unauffälligkeit ist hier der Feind, nicht Ihr Freund.
focus-visible ist intelligenter
Der Selektor focus-visible zeigt den Ring für Tastaturbenutzer an, blendet ihn bei einfachen Mausklicks jedoch aus. So erhalten Sie Sicherheit ohne visuelle Unruhe.
button:focus-visible { outline: 3px solid #1565C0; }Auch hier zählt der Kontrast
Ein Rahmen, der mit dem Hintergrund verschmilzt, hilft niemandem. Ihr Fokusstil benötigt ausreichend Kontrast, um sich vom Seiteninhalt abzuheben.
Den Ring nicht abschneiden
Achten Sie auf overflow hidden bei einem übergeordneten Element. Dadurch kann der Fokusrahmen abgeschnitten werden, sodass die untere Kante unbemerkt verschwindet.
offset schafft Abstand
Verwenden Sie outline-offset, um den Ring vom Element wegzuschieben. Ein kleiner Abstand macht den Indikator deutlich leichter erkennbar.
a:focus-visible { outline: 2px solid #1565C0; outline-offset: 2px; }Das ist eine WCAG-Anforderung
Das ist nicht bloß Feinschliff. WCAG verlangt einen sichtbaren Fokusindikator für jedes interaktive Element. Wird er ausgeblendet, kann die Konformität scheitern.
Mit Tab durch Ihre eigene Website navigieren
Der schnellste Test kostet nichts: Navigieren Sie mit Tab durch Ihre Seite. Wenn Sie den Fokus auch nur einmal verlieren, muss Ihr Indikator verbessert werden.
Schnelltest
Wählen Sie die sicherste Vorgehensweise für die Fokusgestaltung.
Zusammenfassung: Fokus sichtbar halten
Entfernen Sie den Fokusring niemals, ohne ihn zu ersetzen. Bevorzugen Sie focus-visible, sorgen Sie für starken Kontrast und Abstand und testen Sie selbst mit Tab. ✅
Häufig gestellte Fragen
Ist die Lektion „Sichtbarer Fokus: Verbergen Sie niemals den Umriss“ kostenlos?
Ja — der vollständige Text von „Sichtbarer Fokus: Verbergen Sie niemals den Umriss“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Sichtbarer Fokus: Verbergen Sie niemals den Umriss“?
Verhindern Sie, dass Nutzer sich auf der Seite verirren. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Sichtbarer Fokus: Verbergen Sie niemals den Umriss“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Tab, Shift+Tab, Enter, Space: Die wichtigsten Tasten
- Sichtbarer Fokus: Verbergen Sie niemals den Umriss
- Eine logische Tab-Reihenfolge folgt den Inhalten
- Tastaturfallen erkennen