Barrierefreier Onlineshop — der ganze Weg bis zur Bestätigung.

Was im Shop erfasst ist.

Nicht nur der Bestellabschluss. Zum elektronischen Geschäftsverkehr gehört auch, dass man sich über das Angebot informieren, es auswählen, sich identifizieren und bezahlen kann. Praktisch heißt das: der gesamte Weg von der Produktsuche bis zur Bestätigung.

Das ist die wichtigste Erkenntnis für die Planung, weil sie die Reihenfolge vorgibt. Es nützt nichts, das Impressum zu optimieren, solange die Variantenauswahl auf der Produktseite mit der Tastatur nicht erreichbar ist.

Der Kaufweg als Prüfraster.

Geh diesen Weg einmal selbst durch — ohne Maus, nur mit Tabulator, Pfeiltasten und Eingabetaste. Du brauchst dafür kein Spezialwissen und findest in zwanzig Minuten die Hälfte aller echten Probleme (Richtig prüfen).

Produktseiten.

Die Produktseite ist die Seite mit den meisten Fallen. Die häufigsten:

• Varianten als reine Farbflächen. Wer Farben nicht unterscheidet, hat keine Information. Es braucht den Namen als Text, nicht nur als Kurzinfo beim Darüberfahren.
• Bildergalerien, die nur per Wischen oder Klick bedienbar sind.
• Produktbilder ohne Textalternative — und umgekehrt Alternativtexte wie „IMG_2043“.
• Preisangaben nur optisch, etwa durchgestrichener Alt- und roter Neupreis ohne erklärenden Text.
• Verfügbarkeit nur als farbiger Punkt.
• In den Warenkorb ohne Rückmeldung: Optisch erscheint etwas, für einen Screenreader passiert nichts.

Der letzte Punkt ist der wichtigste und technisch am leichtesten behebbar: Änderungen, die ohne Seitenwechsel passieren, müssen angesagt werden (Varianten).

Filter und Suche.

Filter sind der Teil, an dem die meisten Shops scheitern, weil sie oft von einem Plugin stammen, das ohne Rücksicht auf Bedienbarkeit gebaut wurde. Zu prüfen: Sind die Filter per Tastatur erreichbar und auslösbar? Haben sie Beschriftungen, die auch ohne das Umfeld verständlich sind? Wird nach dem Filtern mitgeteilt, wie viele Ergebnisse es gibt?

Der dritte Punkt wird fast immer vergessen. Wenn sich die Ergebnisliste still austauscht, weiß ein Screenreader-Nutzer nicht, ob etwas passiert ist. Eine kurze angesagte Meldung wie „24 Ergebnisse“ löst das (Filter).

Warenkorb.

Hier geht es vor allem um Rückmeldung und um Tabellen. Der Warenkorb ist meist eine Tabelle — die braucht Kopfzeilen, damit klar ist, welche Zahl die Menge und welche der Preis ist. Mengenänderungen und das Entfernen von Artikeln müssen angesagt werden, und der neue Gesamtbetrag ebenfalls.

Außerdem: Ein Entfernen-Knopf, der nur ein Kreuz zeigt, braucht eine Beschriftung, die sagt, was entfernt wird — „Entfernen“ allein hilft nicht, wenn zehn davon untereinander stehen.

Kasse.

Die Kasse ist ein Formular, und für Formulare gelten klare Regeln: Jedes Feld hat eine sichtbare, dauerhaft zugeordnete Beschriftung. Platzhaltertexte im Feld sind keine Beschriftung, weil sie beim Tippen verschwinden. Pflichtfelder werden nicht nur farbig markiert. Die Reihenfolge beim Durchtabben entspricht der sichtbaren Reihenfolge (Barrierefreie Formulare).

Besonderheit bei moderneren Kassen aus Blöcken: Sie sind in der Grundform oft besser aufgestellt als eine über Jahre angepasste klassische Kasse mit fünf Plugins. Wer ohnehin vor der Umstellung steht, kann beides verbinden (Block-Kasse oder klassisch).

Fehlermeldungen.

Der häufigste echte Ausschluss im ganzen Shop. Typisch: Jemand füllt die Kasse aus, klickt auf Bestellen, die Seite springt nach oben, ein rotes Feld irgendwo meldet einen Fehler — und wer das rote Feld nicht sieht, sitzt vor einer Seite, auf der scheinbar nichts passiert ist.

Richtig ist: Der Fehler wird angesagt, der Text sagt im Klartext, welches Feld betroffen ist und was zu tun ist, der Fokus springt an die richtige Stelle, und die Markierung ist nicht nur farbig. „Bitte Felder prüfen“ ist keine Fehlermeldung (Kasse).

Zahlung und fremde Anbieter.

Hier ist der Teil, über den du nur begrenzt bestimmst. Zahlungsschritte laufen oft in einem eingebetteten Fenster oder auf der Seite des Anbieters, und deren Bedienbarkeit liegt nicht bei dir.

Was du trotzdem tun kannst und solltest: Die angebotenen Zahlungsarten mit der Tastatur durchprobieren und mindestens eine anbieten, die durchgängig bedienbar ist. Wenn eine Zahlungsart nicht nutzbar ist, ist der Kauf für die betroffene Person unmöglich — unabhängig davon, wer dafür verantwortlich ist. Dokumentiere, was du geprüft und beim Anbieter angesprochen hast; das gehört auch in die Erklärung (Erklärung).

Konto und Bestellhistorie.

Oft vergessen, aber Teil des Ganzen: Registrierung, Anmeldung, Passwort zurücksetzen, Adressverwaltung, Bestellübersicht. Die Bestellübersicht ist typischerweise eine Tabelle ohne Kopfzeilen, und das Zurücksetzen des Passworts scheitert gern an einer Bildabfrage, die nur optisch lösbar ist (Mein Konto).

Bestellbestätigung und Mails.

Shop-Mails sind HTML-Dokumente und folgen denselben Grundsätzen: ausreichende Kontraste, Informationen nicht allein über Farbe, aussagekräftige Linktexte, Tabellen mit Kopfzeilen und eine lesbare Fassung als reiner Text. Viele Shop-Mails sind durchgestaltete Grafikkästen, bei denen die wesentliche Information in einem Bild steckt (Shop-Mails).

Umsetzungsplan.

1. Kaufweg ohne Maus durchgehen und notieren, wo es endet.
2. Diese Abbrüche zuerst beheben — sie sind echte Ausschlüsse.
3. Formulare und Fehlermeldungen in Kasse und Konto in Ordnung bringen.
4. Kontraste und Fokus im gesamten Shop (Farben und Kontraste).
5. Produktseiten und Filter überarbeiten.
6. Zahlungsarten prüfen und mindestens eine bedienbare sicherstellen.
7. Erklärung veröffentlichen und einen Rückmeldeweg einrichten.
8. Redaktion einweisen, damit neue Produkte keine neuen Barrieren bringen.

Diese Reihenfolge ist nach Wirkung sortiert, nicht nach Aufwand. Die ersten drei Punkte sind der Unterschied zwischen „kann nicht kaufen“ und „kann kaufen“ — alles danach macht es besser, aber nicht erst möglich.

Wenn du nicht weiterkommst.

Wenn du wissen willst, ob dein Shop bedienbar ist, und keine Lust auf eine Liste mit dreihundert automatischen Befunden hast. Ich prüfe deine Website, sortiere die Mängel danach, wen sie tatsächlich aussperren, und behebe sie: Website prüfen lassen. Was das grob kostet und wovon es abhängt, steht unter Aufwand und Kosten.

Orientierungswerte, keine Fixpreise — nach einem kurzen Gespräch bekommst du ein Festpreisangebot.

Wer hilft.

Ich bin Manuel Killert, Webentwickler aus Quakenbrück. Ich baue Websites und Shops mit WordPress und repariere, was andere hinterlassen haben. Barrierefreiheit ist dabei kein Zusatzmodul, sondern Handwerk: ordentliches HTML, Beschriftungen, die stimmen, Bedienbarkeit per Tastatur, ausreichende Kontraste und Formulare, die Fehler verständlich melden.

Was ich mache: bestehende Websites prüfen, die Mängel nach Wirkung sortieren, sie beheben und dir zeigen, worauf deine Redaktion künftig achten muss. Was ich nicht mache: Rechtsberatung und Zertifikate. Für eine förmliche Prüfung durch eine Prüfstelle oder eine anwaltliche Einschätzung bist du woanders besser aufgehoben — und ich sage dir das, wenn dein Fall dort hingehört.

Ich arbeite ohne Overlay-Werkzeuge. Die versprechen eine schnelle Lösung und liefern sie nicht; warum, steht ausführlich auf einer eigenen Seite.