Kundenkonto, Bestellstatus und Downloads barrierefrei im Online-Shop

Viele Shops investieren in die Produktseite und vergessen den Bereich danach. Genau dort entstehen aber Supportkosten, Kaufabbrueche beim Zweitkauf und unnoetige Frustration: Login, Bestellstatus, Rechnungsdownload, Retourenlabel und gespeicherte Adressen.

Warum das Kundenkonto ein BFSG-Risiko ist

Kundenkonten bestehen oft aus Modulen verschiedener Anbieter: Shop, Versandtracking, PDF-Download, Retourenportal, Bonusprogramm. Genau diese Brueche sind gefaehrlich. Ein sauberer Checkout hilft wenig, wenn der Kunde spaeter an einer unbeschrifteten Tracking-Seite oder einem nicht lesbaren Rechnungs-PDF haengen bleibt.

Die haeufigsten Barrieren im Self-Service-Bereich

• Login ohne klare Fehlerhilfe: Passwort- oder Code-Fehler werden nur rot markiert oder verschwinden nach Reload.
• Bestellstatus nur visuell: Fortschrittsleisten zeigen Versandstatus nur ueber Farbe oder Icons.
• Rechnungen als untagged PDF: Dokumente sind fuer Screenreader kaum nutzbar.
• Retourenportale mit Fremd-Widget: Labels, Auswahlfelder oder Uploads sind per Tastatur unzuverlaessig.
• Adressverwaltung auf Mobile: Fokus springt, Buttons liegen zu eng und gespeicherte Daten sind schwer bearbeitbar.

Die 5 Pflichtpruefungen fuer Kundenkonto und Bestellstatus

1. Login- und Sicherheitswege ohne Sackgassen

Pruefen Sie Login, Passwort-Reset, Magic Link und Zwei-Faktor-Schritte mit Tastatur und Screenreader. Fehlermeldungen muessen klar benennen, was fehlt und wie der Nutzer weiterkommt.

2. Statusmeldungen nicht nur ueber Farbe loesen

"In Bearbeitung", "versendet" oder "zugestellt" brauchen Klartext. Eine gruene Leiste allein reicht nicht. Gerade beim Versandtracking muss der Status auch vorgelesen und vergroessert gut erkennbar bleiben.

3. Downloads technisch sauber bereitstellen

Rechnungen, Lieferscheine und Retourenlabels sollten in einem verstaendlichen Format bereitstehen. Wenn PDFs zum Einsatz kommen, muessen sie sauber getaggt und mit lesbaren Linktexten eingebunden werden.

4. Fremdportale im Rueckkanal mitpruefen

Tracking, Ruecksendung oder Bonusprogramme kommen oft von Drittanbietern. Diese Zonen gehoeren in den BFSG-Testumfang, auch wenn sie nicht aus Ihrem Kernsystem stammen.

5. Mobile Self-Service-Flows separat testen

Bestandskunden pruefen Sendungen oder laden Rechnungen oft mobil herunter. Kleine Buttons, Sticky-Elemente oder ueberlagerte Popups brechen hier besonders haeufig die Bedienung.

WCAG-Hotspots in Kundenkonten

• 1.3.1 Info and Relationships: Status, Downloadlisten oder Formulargruppen sind technisch nicht sauber strukturiert.
• 1.4.1 Use of Color: Versand- und Retourenstatus werden nur ueber Farblogik vermittelt.
• 2.1.1 Keyboard: Tabs, Akkordeons oder Drittanbieter-Widgets lassen sich nicht vollstaendig per Tastatur nutzen.
• 3.3.1 Error Identification: Login- und Formularfehler sind unklar oder verschwinden zu schnell.
• 4.1.2 Name, Role, Value: Schalter fuer Rechnungsdownload oder Adresswahl sind technisch nicht sauber ausgezeichnet.

Schneller Praxistest fuer Shop-Betreiber

1. Mit einem Testkonto einloggen, Passwort falsch eingeben und den Fehlerweg bewerten.
2. Bestellstatus auf Desktop und mobil ohne Maus durchklicken.
3. Eine Rechnung und ein Retourenlabel herunterladen und auf Lesbarkeit pruefen.
4. Fremdportale fuer Tracking und Retouren mit in den Test aufnehmen.
5. Starten Sie mit dem kostenlosen BFSG-Scanner und priorisieren Sie danach die Self-Service-Zonen mit den meisten Kundenkontakten.

Quick Wins fuer diese Woche

Bringen Sie zuerst klare Fehlermeldungen in Login und Passwort-Reset, ersetzen Sie rein farbliche Versandstatus durch Klartext und pruefen Sie Ihre Rechnungs-PDFs. Diese drei Schritte senken direkt Reibung im Bestandskunden-Funnel.

Bestellhistorie und Bestelldetails: Übersicht und Drill-Down

Im Kundenkonto sollte Nutzer Bestellungen überblicken und in Details gehen. Klingt einfach, ist oft fehlerhaft strukturiert.

Die Bestellliste: Sortierbar (neueste zuerst oder nach Datum), suchbar (Bestellnummer, Datum, Produktname). Pro Zeile: Bestellnummer (eindeutig, klickbar), Bestelldatum, Gesamtbetrag, Status (Klartext und optional farbig, aber Farbe allein reicht nicht), Link 'Details anzeigen'.

Bestelldetailseite: Alle Positionen (Produktname, Menge, Einzelpreis, Gesamtpreis), Versandadresse (klar beschriftet), Versandart und Lieferdatum, Rechnungsadresse (wenn anders), Zahlungsart (ohne sensible Details), Versand-Tracking (Link), Rechnungs-Download (PDF mit Link-Text 'Rechnung als PDF herunterladen'), Retourenlabel (falls möglich).

Alle Elemente müssen mit Tastatur erreichbar und Screenreader-lesbar sein.

Versand-Tracking verständlich darstellen

'Versandt', 'In Zustellung', 'Zugestellt'—viele Shops zeigen nur Leiste oder Icons. Für Screenreader unsichtbar.

Besser: Oben Textzeile: 'Status: In Zustellung (berechnet für 10.11.2025)'. Darunter Timeline mit Schritten: Haken 'Bestellung bestätigt (08.11.2025, 14:22)', Haken 'Versand vorbereitet (09.11.2025, 08 Uhr)', Haken 'Unterwegs (09.11.2025, 17:30)', Kreis 'Zugestellt (erwartet 10.11.2025)'. Neben Timeline optional Link zu externem Tracking (z. B. DHL).

Für Barrierefreiheit: Nicht nur Icons, sondern auch Text. Zeitstempel in lesbarem Format (nicht nur '09.11.' ohne Jahr). Timeline auch als Liste erkennbar im HTML (Screenreader kann vorlesen). Falls externe Tracking-Links: auch mit Tastatur zugänglich.

Bestandskunden prüfen Status oft mobil. Sicherstelle: Timeline auf Smartphone scrollbar und nicht gebrochen.

PDF-Rechnungen und Etiketten zugänglich machen

Viele Shops generieren PDFs. PDFs können barrierefrei sein—wenn richtig erstellt.

Häufige Fehler: Text als Bild (Screenreader kann nicht lesen), keine Struktur-Tags (Headings, Listen nur visuell), Tabellen ohne Kopfzellen, Links ohne aussagekräftigen Text (nur URL), Kontrastprobleme (helle Graustufen auf Weiß).

Zugängliche PDFs: HTML-to-PDF-Converter nutzen (wkhtmltopdf, Puppeteer), nicht Photoshop oder Word. Im HTML für PDF: semantische Struktur (h1, h2, table mit thead, ul/ol). Bilder mit Alt-Text (wenn relevant). Farbkontrast: mindestens 4,5:1. Schriftgröße: mindestens 11 Punkt (bei Sehbehinderung 12 bis 14 Punkt).

Fallback: Parallel HTML-Version anbieten (nicht alle können PDFs öffnen). Wichtige Inhalte (Rechnungsnummer, Betrag, Adresse) auch auf Webseite anzeigen (nicht nur PDF).

Gespeicherte Adressen und Zahlungsmittel verwalten

Im Kundenkonto legen viele Käufer mehrere Lieferadressen und teilweise auch Zahlungsmittel ab, um künftige Bestellungen schneller abzuschließen. Diese Verwaltungsseite wird beim Testen oft übersehen, weil sie seltener besucht wird als Startseite oder Produktseiten. Genau deshalb häufen sich hier unbeschriftete Buttons, etwa ein reines Stift-Symbol zum Bearbeiten oder ein Papierkorb-Symbol zum Löschen ohne erkennbaren Text für assistierende Technik.

Jede Adresse in der Liste sollte klar zugeordnet werden können, etwa durch einen selbst vergebenen Namen wie "Zuhause" oder "Büro" und die vollständige Anschrift als Text. Wird eine Adresse als Standardadresse markiert, muss dieser Status auch für Screenreader erkennbar sein und nicht nur über eine farbige Umrandung dargestellt werden. Beim Löschen einer Adresse oder eines Zahlungsmittels braucht es eine klare Bestätigung, die beschreibt, welcher konkrete Eintrag betroffen ist, damit niemand versehentlich die falsche Adresse entfernt.

Gespeicherte Zahlungsmittel zeigen aus Sicherheitsgründen meist nur die letzten Ziffern einer Karte. Diese Kurzform muss trotzdem vollständig vorgelesen werden können, inklusive Kartentyp und Ablaufdatum, damit Nutzer beim Auswählen im Checkout wissen, welches Zahlungsmittel sie tatsächlich verwenden. Formularfelder zum Hinzufügen neuer Zahlungsmittel unterliegen denselben Anforderungen wie im eigentlichen Checkout: sichtbare Labels, verständliche Fehlermeldungen und eine Tastaturbedienung ohne Umwege.

Benachrichtigungen, Konto-Einstellungen und Datenexport

Neben Bestellungen verwalten Kunden im Konto meist auch Einstellungen zu E-Mail-Benachrichtigungen, Newsletter-Abonnements und teilweise die Löschung des eigenen Kontos. Auch diese Bereiche fallen unter dieselben Anforderungen wie der Rest des Shops. Toggle-Schalter für Benachrichtigungen müssen ihren Zustand, an oder aus, auch programmatisch vermitteln und dürfen sich nicht ausschließlich über eine Farbänderung von Grau zu Grün erschließen.

Beim Kontolöschen oder beim Export der eigenen Daten, etwa im Rahmen einer Auskunft nach Datenschutzrecht, sollte der Ablauf ebenso klar geführt sein wie ein Kaufprozess: eine verständliche Erklärung der Konsequenzen, eine eindeutige Bestätigung und eine Rückmeldung, sobald die Anfrage bearbeitet wurde. Wird der Export als Datei bereitgestellt, sollte zusätzlich eine lesbare Zusammenfassung der wichtigsten Daten direkt auf der Seite erscheinen, damit Nutzer nicht zwingend eine heruntergeladene Datei öffnen müssen, um zu prüfen, ob der Vorgang funktioniert hat.

Sprachumschaltung und Darstellungsoptionen gehören ebenfalls in diesen Bereich, sofern ein Shop sie anbietet, etwa eine größere Schriftgröße oder ein kontrastreiches Farbschema. Solche Einstellungen sollten dauerhaft gespeichert bleiben, damit ein Nutzer sie nicht bei jedem Besuch erneut vornehmen muss, und sie sollten selbst über die Tastatur erreichbar sein. Wird eine Einstellung erfolgreich gespeichert, hilft eine kurze Bestätigung, damit der Nutzer sicher weiß, dass die Änderung tatsächlich übernommen wurde und nicht nur kurzzeitig auf dem Bildschirm zu sehen war.

Häufig gestellte Fragen