Onlineshop mit der Tastatur: 604 von 631 Elementen ohne sichtbaren Fokus
Ein Einzelhändler aus Bayern betreibt einen großen Onlineshop mit Filtern, Kundenkonto und Merkliste. In der Kurzprüfung zeigte sich, dass Kunden, die mit der Tastatur statt mit der Maus unterwegs sind, an fast keiner Stelle sehen, wo sie gerade stehen.
Ein Rahmen, der fast überall fehlt
Wer blind ist oder die Hand nicht gut bewegen kann, bedient eine Website oft allein mit der Tastatur. Mit der Tabulatortaste springt der Kunde von Link zu Link, und ein Rahmen zeigt an, wo er gerade ist. In diesem Shop war der Rahmen bei 604 von 631 Bedienelementen abgeschaltet, auf allen drei geprüften Seiten.
Die Ursache ist eine einzige Regel im Stylesheet, die den Rahmen ausblendet und nichts an seine Stelle setzt. Ersetzt wird sie in der Vorlage durch einen Umriss von zwei Pixeln, der sich deutlich vom Hintergrund abhebt, und dann gilt das für den ganzen Shop.
Zugeklappte Menüs liegen trotzdem im Weg
Am Handy kam ein zweites Problem dazu. Das zugeklappte Hauptmenü, das Anmeldefenster und die gerade nicht sichtbaren Folien des Sliders bleiben in der Reihenfolge der Tabulatortaste. Wer sich durch die Seite bewegt, landet also immer wieder in Feldern und Links, die gerade niemand sieht.
Knöpfe ohne Namen, Bilder mit Dateinamen
Die Schaltflächen für das Kundenkonto und den Warenkorb im Seitenkopf haben keinen Namen. Die Vorlesesoftware sagt dort nur, dass es eine Schaltfläche ist, aber nicht, wohin sie führt.
Auf der Startseite tragen außerdem 18 Bilder als Beschreibung einen Dateinamen aus Zahlen und Unterstrichen, fünf weitere nur die Worte „Bild von“ ohne Objekt. Das Feld für den Alternativtext lässt sich in der Mediathek ausfüllen, bei den Kategoriekacheln reicht der Name der Kategorie.
Hellgrau auf Weiß und ein gesperrter Zoom
121 Stellen hatten zu wenig Kontrast. 60 davon betreffen das Grau, in dem unter jedem Produktfoto Hersteller und Kategorie stehen, mit 3,09 zu 1 statt 4,5 zu 1. Dazu kamen die Preise auf der Produktseite, ein Aktionsbanner mit weißer Schrift auf Hellblau und der Platzhaltertext im Suchfeld. Außerdem ließ sich der Shop am Handy nicht größer ziehen, weil das Vergrößern im Code gesperrt ist. Wer schlecht sieht, kommt dann an kleine Schrift nicht heran.
Was schon gut gelöst war
Die Filter auf der Kategorieseite sind vollständig beschriftet, alle 105 Felder. Von 972 Einträgen, die die Vorlesesoftware auf der Startseite findet, hatten nur sieben keinen Namen.
Eine Erklärung, die sich selbst widerspricht
Die Informationen zur Barrierefreiheit trugen das Datum vom 28. Juni 2025, dem Tag, an dem das Gesetz in Kraft trat. Der Text sagt, der Shop erfülle WCAG 2.1 AA, und zählt direkt darunter acht Punkte auf, die nicht erfüllt sind. Beides zugleich geht nicht. Die acht Punkte nennen außerdem nur Bereiche wie „Kontraste“, aber nicht, welche Seiten betroffen sind und bis wann sie behoben werden.
Beim selben Shop habe ich auch mitgeschrieben, was er vor der Zustimmung im Cookie-Banner lädt. Das steht im Fallbeispiel zum Cookie-Banner.