Warum springt der Cursor oder Fokus auf meiner Website umher?

Springende Fokussierung durch Quellcode-Reihenfolge

Eine Fokussierung, die in alle Richtungen springt, entsteht meist, weil die Reihenfolge der Elemente im Quellcode nicht der Reihenfolge entspricht, in der sie auf dem Bildschirm sichtbar sind. Wer mit der Tabulatortaste durch eine Seite navigiert, erwartet, dass die Fokussierung sauber von oben nach unten und von links nach rechts verläuft — logisch nach der Leserichtung. Wenn ein Menü, ein Pop-up oder eine Seitenleiste per CSS an einer anderen Stelle auf dem Bildschirm positioniert ist als dort, wo das Element im Code steht, springt die Fokussierung sichtbar hin und her: erst nach unten, dann wieder ganz nach oben, dann zu einer Schaltfläche, die visuell bereits passiert wurde.

Eine häufige Ursache ist ein `tabindex`-Wert, der manuell auf eine Zahl größer als Null gesetzt wurde, was dazu führt, dass Elemente aus der natürlichen Reihenfolge herausgezogen werden. Auch Cookie-Banner, Filter, die dynamisch geladen werden, und modale Fenster, die den Fokus nicht richtig halten, verursachen diesen Effekt — die Fokussierung verschwindet dann manchmal sogar ganz aus dem Sichtbereich, hinter dem Banner oder unter einer noch offenen Overlay. Wer dies überprüfen möchte, tut dies am besten, indem er selbst nur mit der Tastatur durch den Bestellprozess navigiert. wie Sie testen, ob ein Webshop per Tastatur bedienbar ist beschreibt, wie dieser Test in der Praxis funktioniert. Häufig zeigt sich, dass die Fokusreihenfolge mit denselben Elementen zusammenhängt, die auch Probleme bei Cookie-Bannern und Pop-upsverursachen, weil diese als erste über die Seite gelegt werden.

Wo dies in WCAG 2.1 steht: Kriterium 2.4.3

Diese Anforderung ist in WCAG 2.1 unter Erfolgskriterium 2.4.3, "Focus Order", aufgeführt, das verlangt, dass die Reihenfolge, in der Elemente Fokus erhalten, die Bedeutung und Bedienbarkeit der Seite beibehält. Dies ist ein Level-A-Kriterium und damit auch Teil von Level AA, auf das EN 301 549 in der Praxis hinausläuft. Die Untersuchung der ACM zur Barrierefreiheit von Webshops zeigt, dass solche Navigations­probleme in der Praxis regelmäßig auftreten und von Nutzern als störend empfunden werden. Ein automatischer Scan kann zwar signalisieren, ob ein `tabindex` mit einem positiven Wert vorhanden ist, aber ob die Fokusreihenfolge auch wirklich logisch für jemanden wirkt, der die Seite nicht sieht, ist etwas, das ein automatisierter Barrierefreiheitstest nicht vollständig feststellen kann — das bleibt vom manuellen Durchlaufen abhängig.