Focus-Indikator – Sichtbare Tastaturnavigation ermöglichen
Ein Focus-Indikator zeigt visuell an, welches Element aktuell den Tastaturfokus besitzt. Er ist essenziell für alle, die Webseiten ohne Maus, also über die Tastatur, bedienen – z. B. mittels Tab, Enter, Arrow Keys.
Die WCAG 2.1 fordert in Richtlinie 2.4.7 – Sichtbarer Fokus, dass interaktive Elemente bei Tastaturbedienung klar hervorgehoben werden müssen.
Typische Beispiele für Fokus-Indikatoren
| Element | Standard-Stil | Empfehlung |
|---|---|---|
| <button> | blauer oder schwarzer Rahmen | gut sichtbar, mit :focus-visible anpassen |
| <a> | Browser-spezifischer Outline | farblich und visuell konsistent gestalten |
| <input> | Rahmen oder Schatten | auch bei :focus kontrastreich anzeigen |
Wichtige Hinweise & Best Practices
- Nie outline: none ohne sichtbaren Ersatz!
- Verwende :focus-visible, um Fokus nur bei Tastaturbedienung zu zeigen
- Der Indikator sollte ausreichend kontrastreich sein (mind. 3:1 laut WCAG)
- Alle interaktiven Elemente müssen fokussierbar und gekennzeichnet sein
- Einheitliches Fokus-Design für bessere UX
Beispiel: CSS für sicheren Fokus-Indikator
button:focus-visible,
a:focus-visible {
outline: 3px solid #ff9900;
outline-offset: 2px;
}Mehr zu unseren Leistungen im Bereich Digitale Barrierefreiheit erfahren Sie hier.
