Die Fokusanzeige ist abgeschaltet

WCAG 2.4.7 (AA) · EN 301 549 9.2.4.7

Das CSS entfernt die Fokusumrandung ({selector}), ohne etwas Sichtbares an ihre Stelle zu setzen.

Warum das zählt

Wer mit der Tabulatortaste navigiert, muss sehen, wo er gerade ist. Ohne Fokusanzeige drückt die Person Tab und kann nicht erkennen, welches Element ausgewählt ist: Navigieren wird zum Raten. Es ist einer der am stärksten behindernden Fehler und einer der am leichtesten zu behebenden.

Ein einziges `outline: none` im Stylesheet eines Themes kann den gesamten Shop per Tastatur unbenutzbar machen.

So wird es behoben

Verwenden Sie outline: none nie ohne Ersatz. Passt der Standardrahmen nicht zu Ihrer Gestaltung, zeichnen Sie einen eigenen — mit mindestens 3:1 Kontrast zum Hintergrund.

a:focus, button:focus { outline: none; }

a:focus-visible, button:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}