Ratgeber: Tastaturfokus muss auch auf farbigen Karten erkennbar bleiben

Die aktive Stelle wiederfinden

Auf einer Webseite kann man mit der Tabulatortaste von Link zu Link und von Feld zu Feld wechseln. Ohne sichtbare Markierung wird dabei unklar, welche Aktion die Eingabetaste auslösen würde. Die CSS-Pseudoklasse :focus-visible erlaubt eine Gestaltung, wenn der Browser eine sichtbare Fokusmarkierung für erforderlich hält. MDN beschreibt dafür browserseitige Heuristiken. Diese technische Einordnung beruht auf der am 21. Oktober 2026 geprüften Dokumentation und ist keine Meldung über eine heute neu veröffentlichte Funktion.

Eine kleine Kartenreihe als Probe

Baue für deine Prüfung drei Karten: eine helle, eine dunkle und eine mit einem kräftigen Foto. Jede enthält einen echten Link und eine Schaltfläche. Beginne vor der Kartenreihe und gehe ausschließlich mit der Tastatur weiter. Notiere für jede Station, ob die Markierung vollständig sichtbar ist. Ein Rahmen kann auf weißem Hintergrund gut wirken und am Rand eines Fotos verschwinden. Er kann außerdem von einem beschnittenen Elternbereich abgeschnitten werden. Solche Fälle erkennt ein einzelner Screenshot der Startansicht nicht.

Verwende beim Entwurf eine deutlich erkennbare Kontur mit Abstand zum Element. Der konkrete Farbwert gehört zum eigenen Design und muss gegen die tatsächlich benachbarten Farben geprüft werden. Eine zusätzliche Form oder Kontur ist hilfreicher als eine minimale Farbänderung, die leicht übersehen wird. Entferne die Browsermarkierung erst, wenn ein brauchbarer Ersatz vorhanden ist.

Eingabearten bewusst wechseln

Die Markierung hängt nicht einfach an der Regel „Maus aus, Tastatur an“. Insbesondere Textfelder benötigen auch bei anderen Eingaben Aufmerksamkeit. Prüfe deshalb eine Folge aus Mausklick, Tippen, Tabulator und erneutem Klick. Beobachte, ob du jederzeit erklären kannst, wo die nächste Eingabe ankommt. Verlasse dich dabei nicht auf eine selbst erfundene globale Erkennung der zuletzt verwendeten Eingabeart; das kann native Browserentscheidungen unnötig überlagern.

Auch ein per Skript gesetzter Fokus gehört zur Prüfung. Öffne beispielsweise einen Bearbeitungsbereich und kontrolliere, ob der neue Einstiegspunkt nachvollziehbar ist. Die Lesereihenfolge sollte dem sichtbaren Aufbau entsprechen, statt überraschend zwischen weit entfernten Bereichen zu springen.

Eine brauchbare Abnahmeregel

Formuliere für den Bauauftrag: Alle bedienbaren Elemente werden auf jeder verwendeten Fläche mit der Tastatur erreicht und dort sichtbar markiert. Ergänze Vergrößerung, einen schmalen Bildschirm und einen langen Kartentitel als Prüffälle. Dokumentiere konkrete Stellen, an denen die Kontur fehlt oder abgeschnitten wird. Ein bestandener Test dieser Beispiele ist keine vollständige Barrierefreiheitszertifizierung, liefert aber eine nachvollziehbare Grundlage für eine wesentliche Bedienfunktion.