Mit der Maus erscheint ein zusätzlicher Link, mit der Tastatur bleibt er verborgen. Oder die Tab-Taste erreicht einen Button, ohne dass seine Position sichtbar wird. Prüfe nicht nur, ob ein Element technisch fokussierbar ist, sondern ob die angebotene Aktion verständlich bedient werden kann.
Beginne am Seitenanfang ohne Mausbewegung. Folge der tatsächlichen Tab-Reihenfolge und notiere unsichtbare, doppelte oder überlagerte Fokusziele. Ein Element außerhalb des sichtbaren Bereichs kann trotz funktionierender Enter-Taste ein Problem bleiben.
Die Markierung gezielt gestalten
Ein einfaches Beispiel für eine eigene Fokusmarkierung:
.action:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}
Farbe und Umgebung müssen zusammenpassen. Eine vorhandene Browsermarkierung solltest du nicht entfernen, bevor ein brauchbarer Ersatz vorhanden ist. Die Beispielregel allein bestätigt keinen ausreichenden Kontrast auf sämtlichen Hintergründen.
Prüfe bei Hover-Aktionen zusätzlich, ob dieselbe Funktion über Fokus oder eine geeignete dauerhafte Bedienung erreichbar ist. Nutze für Aktionen Buttons und für Navigation echte Links, statt beliebige Container nur mit Klickhandlern auszustatten.
Teste die komplette Aufgabe: Menü öffnen, Ziel wählen, Dialog schließen und zur vorherigen Stelle zurückkehren. Nach dem Schließen soll der Fokus nicht unbemerkt verschwinden. Wiederhole den Ablauf bei vergrößerter Schrift. Dokumentiere konkrete Fundstellen statt einer pauschalen Aussage wie „Tastatur funktioniert“.