Barrierefreier Onlineshop: die Stellen im Kaufprozess, an denen Shops durchfallen

Die üblichen Shop-Checklisten sind nach Kategorien sortiert: Bilder, Farben, Formulare, Tastaturbedienung. Das ist ordentlich und geht an der Sache vorbei, weil ein Kauf keine Sammlung von Elementen ist, sondern eine Kette. Reißt ein Glied, ist der Kauf beendet — und zwar unabhängig davon, wie gut die übrigen fünf sind.

Der zweite Grund ist praktischer Natur: Die Stellen, an denen es wirklich klemmt, sind die Übergänge. Was passiert, nachdem ein Filter gesetzt wurde. Was angesagt wird, wenn ein Artikel in den Warenkorb wandert. Was mit dem Fokus geschieht, wenn ein Schritt der Kasse abgeschlossen ist. In einer nach Themen sortierten Liste tauchen diese Momente gar nicht auf, weil sie zu keiner Kategorie gehören.

Der Prüfmaßstab dieser Seite ist einfach: Ein Kauf muss vom ersten Klick bis zur Bestätigung mit der Tastatur allein durchführbar sein, und jede Zustandsänderung muss hörbar sein. Wenn das gelingt, sind Sie über den größten Teil des Wegs.

Hier bricht fast jeder Shop, und zwar an derselben Stelle: Ein Filter wird gesetzt, die Liste darunter tauscht sich aus, und akustisch passiert nichts. Ob es jetzt drei Ergebnisse sind oder dreihundert, bleibt offen. Der Fokus springt in manchen Umsetzungen an den Seitenanfang zurück, sodass man sich durch die gesamte Filterleiste erneut arbeiten muss, um den zweiten Filter zu setzen.

• 01Trefferzahl nach jeder Änderung in eine höfliche Live-Region geben: „14 Ergebnisse“. Das erfüllt 4.1.3 Statusmeldungen und ist die wirksamste Einzelmaßnahme dieser Seite.
• 02Der Fokus bleibt beim Filter, den man gerade bedient hat. Er springt weder in die Liste noch an den Seitenanfang — das verlangt 2.4.3 Fokus-Reihenfolge.
• 03Gesetzte Filter bekommen Entfernen-Schaltflächen mit vollständigem Namen: „Filter Farbe: rot entfernen“ statt eines Kreuzes, das als „Schaltfläche“ angesagt wird.
• 04Ein Filter, der sich nur über einen Schieberegler bedienen lässt, braucht zusätzlich zwei Eingabefelder für Von und Bis. Schieberegler sind mit der Tastatur bedienbar, aber unzumutbar langsam.

Die Produktseite ist der Teil, den die üblichen Checklisten abdecken — Alt-Texte, Bildergalerie, Kontraste. Was sie nicht abdecken, ist die Variantenauswahl, und die ist der eigentliche Fall.

Wenn Größe und Farbe als Kachelraster umgesetzt sind, sind sie in der Regel keine Formularelemente, sondern Schaltflächen mit Hintergrundfarbe. Ein Screenreader sagt dann „Schaltfläche“, ohne mitzuteilen, welche Farbe das ist und welche gerade gewählt ist. Nicht verfügbare Kombinationen sind ausgegraut, also nur farblich unterschieden — das bricht 1.4.1 Benutzung von Farbe.

• 01Varianten als echte Formularelemente umsetzen: eine Gruppe von Optionsfeldern mit Beschriftung, oder eine Auswahlliste. Die Kacheloptik bleibt erhalten, die Bedienung wird die native.
• 02Nicht verfügbare Kombinationen zusätzlich zur Farbe kennzeichnen — im Namen des Elements: „Rot, Größe 42, nicht verfügbar“.
• 03Der Preis ändert sich bei Variantenwechsel. Diese Änderung muss angesagt werden, sonst kauft jemand einen anderen Preis, als er gehört hat.
• 04Produktbilder brauchen Alt-Texte, die den Artikel beschreiben, nicht den Dateinamen. Bei einer Galerie mit acht Ansichten desselben Artikels reicht ein aussagekräftiger Text für das erste Bild; die übrigen dürfen leer bleiben, wenn sie nichts Neues zeigen.

Der Warenkorb hat zwei Momente, an denen es klemmt. Der erste ist das Hinzufügen: In modernen Shops lädt die Seite dabei nicht neu, sondern ein Zähler oben rechts erhöht sich und eine Kurzmeldung blendet sich für vier Sekunden ein. Wer nicht hinsieht, erfährt nichts — und wer den Zähler mit dem Screenreader sucht, findet nur eine Zahl ohne Zusammenhang.

Der zweite Moment ist die Mengenänderung. Wird die Menge über zwei kleine Schaltflächen mit Plus und Minus geändert, heißen diese in der Regel „Plus“ und „Minus“ — bei fünf Positionen im Warenkorb gibt es dann zehn Schaltflächen mit denselben zwei Namen, und keine sagt, wozu sie gehört.

• 01Das Hinzufügen in einer höflichen Live-Region ansagen, mit Artikel und neuem Gesamtstand: „Artikelname in den Warenkorb gelegt, 3 Artikel, 89,90 Euro.“
• 02Mengenschaltflächen vollständig benennen: „Menge von Artikelname erhöhen“. Das ist über ein zusätzliches Attribut möglich, ohne die Optik zu ändern.
• 03Ein Mengenfeld zum direkten Eintippen behalten. Wer zwölf Stück will, soll nicht zwölfmal klicken müssen.
• 04Nach dem Entfernen einer Position den Fokus an eine sinnvolle Stelle setzen — auf die nächste Position oder auf die Überschrift des Warenkorbs. Ein Fokus, der ins Nichts fällt, landet am Seitenanfang, und der Nutzer verliert die Orientierung vollständig.

Das Adressformular ist die Station mit den meisten Einzelkriterien und zugleich die, für die es die klarsten Lösungen gibt. Drei Punkte tragen den Großteil.

1. 01Jedes Feld braucht eine fest verbundene Beschriftung. Ein Platzhaltertext im Feld ist keine Beschriftung: Er verschwindet beim Tippen, und dann weiß niemand mehr, was er gerade eingibt — insbesondere niemand, der vergrößert liest.
2. 02Jedes Feld braucht ein autocomplete-Attribut mit dem richtigen Wert. Das erfüllt 1.3.5 Eingabezweck bestimmen und hat den praktischen Nebeneffekt, dass Adressen aus dem Browser übernommen werden. Für viele Nutzende ist das der Unterschied zwischen zwei Minuten und einer Viertelstunde.
3. 03Fehler gehören an das Feld und zusätzlich in eine Zusammenfassung am Formularanfang, die als Meldung angesagt wird und Sprungmarken auf die betroffenen Felder enthält. Ein rot umrandetes Feld allein bricht 1.4.1 und 3.3.1 gleichzeitig.

Zum Kundenkonto gehört ein Punkt, der oft übersehen wird: das Verbot, das Passwort aus der Zwischenablage einzufügen. Es ist keine Sicherheitsmaßnahme — es verhindert die Benutzung eines Passwortmanagers und trifft damit ausgerechnet die Nutzer mit den sichersten Passwörtern. Für Menschen mit motorischen Einschränkungen ist es schlicht eine Sperre.

Hier liegt das Risiko, das ein Shopbetreiber am wenigsten in der Hand hat: Der Zahlungsschritt läuft in vielen Shops in einem eingebetteten Rahmen des Zahlungsdienstleisters. Was dort passiert, hat der Shop nicht gebaut — verantwortlich für den Ablauf ist er trotzdem.

• 01Prüfen Sie den eingebetteten Bereich mit der Tastatur. Kommt der Fokus hinein, kommt er wieder heraus, werden Fehler angesagt? Wenn nicht, ist das ein Punkt für Ihren Zahlungsdienstleister — fragen Sie schriftlich nach dessen Konformitätserklärung.
• 02Ein Zeitlimit auf dem Zahlungsschritt fällt unter 2.2.1. Wer länger braucht, muss verlängern können, ohne von vorn anzufangen.
• 03Die Bestellübersicht vor dem Absenden muss vollständig mit dem Screenreader erfassbar sein — Positionen, Versandkosten, Gesamtbetrag. Eine Tabelle mit Kopfzellen erledigt das; ein Raster aus Bereichen mit Hintergrundfarben nicht.
• 04Die endgültige Schaltfläche braucht einen Namen, der die Handlung benennt: „Zahlungspflichtig bestellen“. Das verlangt ohnehin schon das Fernabsatzrecht — hier fallen zwei Pflichten zusammen.

Nach dem Absenden gehört der Fokus auf die Überschrift der Bestätigungsseite, und die Bestellnummer gehört in den Text, nicht nur in eine grafisch gestaltete Kachel. Wer sie hört, kann sie notieren; wer sie nur sieht, kann sie abschreiben — beides muss gehen.

Die Station, die in Shop-Checklisten praktisch nie vorkommt, und die teuerste. Die Rechnung ist Teil der erbrachten Dienstleistung, und ein nicht getaggtes PDF wird vom Screenreader spaltenweise quer gelesen: Positionsnummer, Bezeichnung und Betrag landen in einer Zeile, die es auf dem Papier nie gab. Das Ergebnis ist nicht schwer lesbar, sondern inhaltlich falsch.

Dasselbe gilt für die Bestätigungsmail, wenn sie ausschließlich als Bild oder als Tabellenlayout ohne Textalternative verschickt wird. Eine reine Textfassung parallel zur gestalteten Version löst das vollständig und kostet einmalig eine Vorlage.

Wenn Sie an dieser Seite nur eine einzige Sache mitnehmen: Fragen Sie Ihren Shopanbieter, ob die erzeugten PDF-Dokumente getaggt sind. Bei den meisten Standardsystemen lautet die Antwort nein, und sie ist der Punkt, an dem eine Prüfung am schnellsten fündig wird.

Eine Einordnung ohne Produktnamen, weil sie sonst mit dem nächsten Versionswechsel falsch wäre: Die verbreiteten Shopsysteme haben in den vergangenen zwei Jahren erheblich nachgebessert, und das betrifft überwiegend die Standardvorlagen. Was daran hängt, ist die Frage, wie weit Ihr Theme davon abgewichen ist.

Der Glanz-K-Shop ist bei uns nach WCAG 2.1 AA umgesetzt worden, nicht nachgerüstet. Der Unterschied zeigt sich nicht am Ergebnis, sondern am Aufwand — und daran, dass niemand hinterher entscheiden musste, welche der bestehenden Masken man dafür wegwirft.

• BFSG: der Stand und der Selbsttest
• WCAG 2.1 AA auf Komponentenebene
• Projekt Glanz K