BFSG-Checkliste für Onlineshops zum Abhaken

Das Wichtigste in Kürze

• Die Liste ist nach Seitentypen gegliedert, weil Befunde so entstehen: Ein Fehler in der Produktdetail-Vorlage betrifft alle Artikel, ein Fehler im Checkout betrifft jeden Kauf.
• Jeder Prüfpunkt nennt drei Dinge: was zu prüfen ist, wie Sie es ohne Spezialwerkzeug prüfen und was der Befund bedeutet. Dazu das WCAG-Erfolgskriterium, damit Ihre Agentur den Punkt eindeutig zuordnen kann.
• Vier Tests decken den größten Teil der Liste ab: nur mit Tabulator bedienen, auf 200 Prozent zoomen, die Seite in Graustufen ansehen, ein Formular absichtlich falsch ausfüllen.
• Wenn die Zeit für einen vollständigen Durchgang nicht reicht: Fangen Sie beim Checkout an. Dort fallen technischer Befund und entgangener Umsatz zusammen.
• Drucken Sie die Liste aus oder übertragen Sie sie in eine Tabelle, und notieren Sie jeden Treffer mit Seite und Stelle. Aus den Notizen wird die Arbeitsliste für Ihr Team oder Ihre Agentur.
• Was die Liste nicht abdeckt, steht offen im letzten Abschnitt – unter anderem die Prüfung mit einem Screenreader und die inhaltliche Qualität von Alternativtexten.

Diese Liste setzt voraus, dass Ihr Shop in den Anwendungsbereich fällt. Ob das so ist – Stichwort Kleinstunternehmen nach § 3 Absatz 3 BFSG, der nur für Dienstleistungen gilt und nicht für Produkte –, klärt der Artikel Ist mein Onlineshop BFSG-pflichtig?. Die abschließende rechtliche Bewertung Ihres Einzelfalls gehört in anwaltliche Hände; hier geht es ausschließlich um die technische Prüfung.

Die vier Tests, die Sie ohne Werkzeug durchführen können

Bevor Sie in die Seitentypen einsteigen, lohnt es sich, diese vier Tests einmal zu üben. Sie tauchen in fast jedem Prüfpunkt wieder auf, und alle vier funktionieren mit nichts weiter als einem Browser und den Bordmitteln Ihres Betriebssystems.

1. Der Tabulator-Test

   So prüfen Sie: Legen Sie die Maus zur Seite. Bewegen Sie sich mit der Tabulator-Taste vorwärts, mit Umschalt und Tabulator zurück, lösen Sie mit Eingabetaste und Leertaste aus und wechseln Sie innerhalb von Gruppen – Auswahlfeldern, Reitern, Radiobuttons – mit den Pfeiltasten.

   Was der Befund bedeutet: Drei Fragen entscheiden. Erreichen Sie jedes Bedienelement? Sehen Sie in jedem Schritt, wo Sie gerade stehen? Kommen Sie aus jedem Bereich wieder heraus? Ein Nein ist jeweils ein eigener Befund – betroffene Erfolgskriterien sind 2.1.1 (Tastatur), 2.1.2 (keine Tastaturfalle), 2.4.3 (Fokus-Reihenfolge) und 2.4.7 (Fokus sichtbar).

2. Der Zoom-Test auf 200 Prozent

   So prüfen Sie: Drücken Sie Strg und Plus (auf dem Mac Cmd und Plus), bis der Browser 200 Prozent anzeigt. Gehen Sie die Seite von oben nach unten durch und achten Sie auf abgeschnittenen Text, überlappende Elemente, verschwundene Schaltflächen und eine waagerechte Bildlaufleiste.

   Was der Befund bedeutet: Der Test berührt 1.4.4 (Textgröße ändern). Die strengere Anforderung 1.4.10 (Reflow) verlangt eine brauchbare Darstellung bei einer Breite, die 320 CSS-Pixeln entspricht – auf einem üblichen Desktop-Fenster also etwa 400 Prozent Zoom. Wer schon bei 200 Prozent Text verliert, muss bei 400 Prozent gar nicht erst nachsehen.

3. Der Graustufen-Test

   So prüfen Sie: Schalten Sie den Farbfilter Ihres Betriebssystems auf Graustufen – unter Windows über Einstellungen, Barrierefreiheit, Farbfilter; unter macOS über Systemeinstellungen, Bedienungshilfen, Anzeige, Farbfilter. Sehen Sie sich die Seite dann noch einmal an.

   Was der Befund bedeutet: Alles, was jetzt nicht mehr unterscheidbar ist, war allein über Farbe codiert (1.4.1, Benutzung von Farbe). Typische Treffer: grüne und rote Verfügbarkeitspunkte, ein nur farblich markiertes Fehlerfeld, die ausgewählte Variante mit farbigem Rahmen, Links im Fließtext ohne Unterstreichung. Wichtig: Dieser Test sagt nichts über den Kontrastwert aus. Ob 4,5:1 erreicht sind (1.4.3), misst nur ein Kontrastwerkzeug – das Augenmaß trügt hier zuverlässig.

4. Der Fehlertest im Formular

   So prüfen Sie: Füllen Sie ein Formular absichtlich falsch aus und schicken Sie es ab: E-Mail-Adresse ohne @, Postleitzahl mit Buchstaben, ein Pflichtfeld leer gelassen. Machen Sie das an mindestens zwei Stellen – Kontaktformular und Rechnungsadresse im Checkout.

   Was der Befund bedeutet: Vier Fragen. Steht die Fehlermeldung als lesbarer Text da und nicht nur als rote Umrandung (3.3.1, 1.4.1)? Benennt sie das betroffene Feld? Sagt sie, wie es richtig geht (3.3.3, Fehlerempfehlung)? Und landet der Fokus dort, wo korrigiert werden muss (2.4.3)? Eine rote Linie ohne Text ist der häufigste Befund dieser Kategorie.

Notieren Sie jeden Treffer in einer Zeile. Fünf Spalten genügen – und sie sind zugleich das Format, in dem eine Entwicklerin die Aufgabe ohne Rückfrage versteht.

Die Spalte „Einordnung“ ist wichtiger, als sie aussieht. Sie unterscheidet blockierende Befunde – ohne Maus kein Kaufabschluss – von störenden, etwa einem zu schwachen Kontrast im Versandhinweis. Nach dieser Spalte priorisieren Sie später die Umsetzung.

Startseite und alles, was auf jeder Seite steht

Die Startseite prüfen Sie stellvertretend für alle globalen Bausteine: Kopfzeile, Navigation, Suche, Consent-Dialog, Fußzeile. Was Sie hier finden, findet sich in aller Regel auf jeder Unterseite wieder – ein Befund, ein Fix, Wirkung überall.

1. Sprache und Seitentitel

   So prüfen Sie: Rechtsklick auf die Seite, „Seitenquelltext anzeigen“ wählen und die erste Zeile suchen: Steht dort <html lang="de">? Danach den Browser-Tab lesen: Unterscheidet sich der Titel der Startseite von dem einer Produktseite?

   Was der Befund bedeutet: Ohne Sprachauszeichnung liest ein Screenreader deutschen Text mit englischer Aussprache vor – unverständlich (3.1.1). Gleichlautende Seitentitel machen Orientierung im Verlauf und in Tabs unmöglich (2.4.2). Beide Punkte sind mit wenigen Zeilen im Template erledigt.

2. Sprunglink zum Inhalt

   So prüfen Sie: Seite neu laden, nichts anklicken, einmal die Tabulator-Taste drücken. Erscheint ein Link wie „Zum Inhalt springen“?

   Was der Befund bedeutet: Ohne Sprunglink muss sich jede Person, die per Tastatur bedient, auf jeder Seite erneut durch die komplette Hauptnavigation arbeiten, bevor sie beim ersten Produkt ankommt. Bei einem Menü mit 30 Einträgen sind das 30 Tastendrücke pro Seitenaufruf (2.4.1, Blöcke umgehen).

3. Sichtbarer Fokus auf jedem Bedienelement

   So prüfen Sie: Tabulator-Test über Kopfzeile, Navigation, Werbeflächen und Fußzeile. Bei jedem Schritt muss erkennbar sein, wo Sie stehen – nicht nur bei Links, auch bei Schaltflächen, Auswahlfeldern und Karussell-Punkten.

   Was der Befund bedeutet: Viele Themes entfernen den Fokusrahmen aus gestalterischen Gründen. Damit wird Tastaturbedienung praktisch unbrauchbar (2.4.7). Achten Sie auch darauf, dass der Fokusrahmen selbst genug Kontrast zum Hintergrund hat – ein hellgrauer Rahmen auf weißem Grund erfüllt 1.4.11 nicht.

4. Hauptnavigation mit Untermenüs

   So prüfen Sie: Öffnen Sie ein Untermenü ausschließlich mit der Tastatur. Lässt es sich mit Eingabetaste oder Leertaste öffnen? Erreichen Sie die Einträge darin? Schließt die Escape-Taste es wieder, und bleibt der Fokus danach auf dem auslösenden Element?

   Was der Befund bedeutet: Menüs, die nur auf Mouseover reagieren, sind per Tastatur nicht erreichbar (2.1.1). Klappt das Menü zwar auf, meldet die Schaltfläche aber ihren Zustand nicht über aria-expanded, fehlt die Zustandsinformation für assistive Technologien (4.1.2, Name, Rolle, Wert).

5. Symbol-Schaltflächen: Warenkorb, Suche, Menü, Merkzettel

   So prüfen Sie: Tabben Sie die Kopfzeile durch. Erkennen Sie an jeder Stelle, welche Funktion gerade fokussiert ist? Im Quelltext prüfen Sie, ob das Element ein aria-label oder unsichtbaren Text enthält – ein Symbol allein trägt keinen Namen.

   Was der Befund bedeutet: Ein Warenkorb-Symbol ohne zugänglichen Namen wird als „Schaltfläche“ ohne weitere Angabe angesagt (4.1.2). Zeigt die Schaltfläche zusätzlich eine Artikelzahl, gehört diese in den Namen: „Warenkorb, 3 Artikel“.

6. Suchfeld mit dauerhafter Beschriftung

   So prüfen Sie: Klicken Sie auf den Text neben oder über dem Suchfeld. Springt der Cursor ins Feld, ist die Beschriftung korrekt verknüpft. Tippen Sie danach etwas ein: Verschwindet die Beschriftung, war es nur ein Platzhalter.

   Was der Befund bedeutet: Ein Platzhalter ist keine Beschriftung – er verschwindet bei der Eingabe, hat oft zu wenig Kontrast und geht bei Korrekturen verloren (3.3.2, 1.3.1). Wenn die Beschriftung aus gestalterischen Gründen unsichtbar bleiben soll, gibt es dafür saubere Techniken; ersatzlos weglassen gehört nicht dazu.

7. Consent-Dialog und andere Overlays

   So prüfen Sie: Seite in einem frischen Browser-Fenster laden und den Cookie-Dialog nur mit der Tastatur bedienen. Springt der Fokus in den Dialog? Bleibt er dort, solange der Dialog offen ist? Ist die Ablehnen-Option genauso erreichbar wie die Zustimmung?

   Was der Befund bedeutet: Ein Dialog, hinter dem man unsichtbar durch die Seite tabbt, ist ein klassischer Befund gegen 2.4.3 und 2.1.1; ein Dialog, den man per Tastatur nicht mehr verlassen kann, verstößt gegen 2.1.2. Praktisch heißt das: Wer nicht mit der Maus arbeitet, kommt gar nicht erst in den Shop. Dieser Punkt gehört deshalb ganz nach oben auf die Aufgabenliste.

8. Karussells, Videos und automatische Bewegung

   So prüfen Sie: Beobachten Sie die Startseite zehn Sekunden lang, ohne etwas zu tun. Bewegt sich etwas von selbst länger als fünf Sekunden? Gibt es dann eine Pause-Schaltfläche, und ist sie per Tastatur erreichbar?

   Was der Befund bedeutet: Automatisch wechselnde Inhalte ohne Pause-Möglichkeit verstoßen gegen 2.2.2. Für Personen mit Aufmerksamkeits- oder Leseeinschränkungen ist ein Slider, der weiterspringt, bevor der Text gelesen ist, schlicht nicht nutzbar. Prüfen Sie zusätzlich, ob die Slider-Punkte per Tastatur bedienbar sind (2.1.1).

9. Überschriften-Struktur

   So prüfen Sie: Ohne Werkzeug: Lesen Sie nur die Überschriften der Seite laut vor. Ergibt das ein sinnvolles Inhaltsverzeichnis? Im Quelltext suchen Sie nach <h1 – genau ein Treffer je Seite, und darunter dürfen keine Ebenen übersprungen werden.

   Was der Befund bedeutet: Überschriften sind die Navigation für Screenreader-Nutzende. Wenn Text nur groß und fett gestaltet, aber nicht als Überschrift ausgezeichnet ist, existiert diese Navigation nicht (1.3.1, 2.4.6). Wie das in Shopware- und WordPress-Themes typischerweise entsteht, steht im Artikel BFSG in Shopware, WordPress und WooCommerce.

Kategorie- und Listenseiten

Listenseiten sind aus wenigen, sehr oft wiederholten Bausteinen gebaut: Produktkachel, Filter, Sortierung, Blätterfunktion. Genau diese Wiederholung macht Befunde hier so wirksam – und so gut behebbar.

1. Linktexte in den Produktkacheln

   So prüfen Sie: Tabben Sie eine Reihe Kacheln durch und lesen Sie nur die Linktexte, ohne auf das Bild daneben zu schauen. Heißen mehrere Links gleich – „Details“, „Jetzt ansehen“, „Mehr“?

   Was der Befund bedeutet: Screenreader bieten eine Liste aller Links einer Seite an. Zwanzigmal „Details“ ist dort wertlos (2.4.4, Linkzweck). Die Lösung ist Textarbeit, keine Entwicklungsarbeit: Der Produktname gehört in den Linktext.

2. Doppelte Links auf dasselbe Produkt

   So prüfen Sie: Zählen Sie beim Tabben, wie oft Sie pro Kachel anhalten. Sind es zwei Stopps – Bild und Titel – für dasselbe Ziel?

   Was der Befund bedeutet: Das ist kein harter Verstoß, aber es verdoppelt den Tastaturaufwand über die ganze Seite. Kritisch wird es, wenn der Bildlink ein Produktbild ohne oder mit falschem Alternativtext enthält: Dann wird ein Link mit dem Dateinamen angesagt (1.1.1, 2.4.4). Sauber ist ein Bild mit leerem alt-Attribut innerhalb eines Links, dessen Text den Produktnamen trägt.

3. Filter und Sortierung mit der Tastatur

   So prüfen Sie: Setzen Sie einen Filter und ändern Sie die Sortierung, ohne die Maus zu benutzen. Öffnen sich Auswahllisten mit Leertaste? Bewegen Sie sich mit den Pfeiltasten? Funktionieren Preis-Schieberegler mit Pfeiltasten?

   Was der Befund bedeutet: Nachgebaute Auswahlfelder aus div-Elementen mit Klick-Handler sind für Tastatur und assistive Technologien unsichtbar (2.1.1, 4.1.2). Schieberegler sind der häufigste Totalausfall in dieser Kategorie. Notieren Sie, ob der Filter überhaupt bedienbar ist – nicht nur, ob er hübsch aussieht.

4. Rückmeldung nach dem Filtern

   So prüfen Sie: Setzen Sie einen Filter und achten Sie darauf, was sich sichtbar ändert. Erscheint eine Angabe wie „24 Artikel gefunden“? Bleibt der Fokus an einer sinnvollen Stelle, oder springt er an den Seitenanfang zurück?

   Was der Befund bedeutet: Wenn sich die Liste ohne Seitenneuladen aktualisiert, muss diese Änderung auch angesagt werden (4.1.3, Statusmeldungen). Ob die Ansage tatsächlich erfolgt, können Sie ohne Screenreader nicht abschließend feststellen – notieren Sie den Punkt daher als Kandidaten für die manuelle Prüfung. Was Sie ohne Werkzeug feststellen können: Es gibt gar keine sichtbare Ergebnisangabe. Dann fehlt sie in jedem Fall.

5. Blättern oder Nachladen

   So prüfen Sie: Nutzen Sie „Mehr laden“ beziehungsweise die Seitenzahlen mit der Tastatur. Wo steht der Fokus nach dem Nachladen? Sind die Seitenzahlen als Links mit erkennbarem Ziel ausgezeichnet?

   Was der Befund bedeutet: Springt der Fokus nach dem Nachladen an den Seitenanfang, muss man sich jedes Mal erneut durch die gesamte Liste arbeiten (2.4.3). Bei endlosem Nachladen ist zusätzlich die Fußzeile praktisch unerreichbar – prüfen Sie, ob Impressum und Erklärung zur Barrierefreiheit noch erreichbar sind.

6. Badges, Rabatte und Verfügbarkeitshinweise

   So prüfen Sie: Graustufen-Test auf der Listenseite. Bleiben „Sale“, „Neu“, „Nur noch wenige“ und Streichpreise unterscheidbar?

   Was der Befund bedeutet: Ein Rabatt, der nur an der roten Schriftfarbe erkennbar ist, ist Information allein über Farbe (1.4.1). Prüfen Sie zusätzlich den Kontrast der Badge-Schrift auf farbigem Grund mit einem Kontrastwerkzeug – Weiß auf Hellorange ist der Klassiker unter 4,5:1 (1.4.3).

7. Zoom-Test auf dem Produktraster

   So prüfen Sie: Auf 200 Prozent zoomen und die Liste von oben nach unten durchgehen. Brechen die Kacheln sauber um? Bleiben Preise und Schaltflächen vollständig sichtbar? Entsteht eine waagerechte Bildlaufleiste?

   Was der Befund bedeutet: Feste Pixelhöhen in Kacheln führen dazu, dass vergrößerter Text abgeschnitten wird – meist trifft es zuerst den Preis oder den Lieferhinweis (1.4.4, 1.4.10). Notieren Sie die konkrete Kachel-Stelle; das ist eine Änderung im Stylesheet, keine Grundsatzfrage.

Produktdetailseite

Auf der Produktdetailseite entscheidet sich, ob jemand kaufen kann. Sie ist zugleich die Vorlage mit der höchsten Vervielfältigung: Was hier fehlt, fehlt in Ihrem gesamten Sortiment.

1. Alternativtexte der Produktbilder

   So prüfen Sie: Rechtsklick auf das Hauptbild, „Untersuchen“ wählen und das alt-Attribut lesen. Prüfen Sie drei bis fünf Produkte aus verschiedenen Kategorien, nicht nur eines.

   Was der Befund bedeutet: Fehlendes, leeres oder mit dem Dateinamen gefülltes alt-Attribut ist ein Verstoß gegen 1.1.1 – und der häufigste Befund überhaupt. Beachten Sie: Ein technisch vorhandener Alternativtext kann trotzdem unbrauchbar sein („Produktbild“, „IMG_4471“). Ob er inhaltlich trägt, kann kein Werkzeug entscheiden, das bleibt Redaktionsarbeit.

2. Bildergalerie und Zoom

   So prüfen Sie: Wechseln Sie nur mit der Tastatur zwischen den Ansichten. Sind die Vorschaubilder als Schaltflächen erreichbar? Lässt sich die Großansicht öffnen und mit Escape wieder schließen? Kehrt der Fokus danach zum Auslöser zurück?

   Was der Befund bedeutet: Eine Lupe, die nur auf Mouseover reagiert, ist für Tastaturbedienung nicht vorhanden (2.1.1). Eine Großansicht ohne Fokusverwaltung führt in dieselbe Falle wie ein schlecht gebauter Consent-Dialog (2.1.2, 2.4.3). Prüfen Sie, ob die Vorschaubilder unterscheidbare Namen haben – „Bild 1“ bis „Bild 6“ ist besser als gar nichts, „Vorderansicht“ ist besser als beides.

3. Variantenauswahl: Größe, Farbe, Ausführung

   So prüfen Sie: Wählen Sie eine Variante nur mit der Tastatur. Ist die Auswahl mit Pfeiltasten erreichbar? Sehen Sie, welche Variante gewählt ist? Danach der Graustufen-Test: Bleibt die Auswahl auch ohne Farbe erkennbar?

   Was der Befund bedeutet: Farbfelder ohne Textbeschriftung sind für Screenreader leer, und ein nur farblich markierter Auswahlzustand verstößt gegen 1.4.1. Sind die Varianten aus div-Elementen gebaut statt aus echten Formularelementen, fehlen Rolle und Zustand vollständig (1.3.1, 4.1.2). Nicht verfügbare Varianten müssen als solche erkennbar sein – ausgegraut allein genügt nicht.

4. Mengenfeld und Plus-Minus-Schaltflächen

   So prüfen Sie: Klicken Sie auf die Beschriftung des Mengenfelds – springt der Cursor hinein? Erreichen Sie die Plus- und Minus-Schaltflächen mit der Tastatur? Können Sie die Menge auch direkt eintippen?

   Was der Befund bedeutet: Ein Mengenfeld ohne verknüpfte Beschriftung wird als namenloses Eingabefeld angesagt (1.3.1, 3.3.2). Plus- und Minus-Symbole ohne zugänglichen Namen sind namenlose Schaltflächen (4.1.2). Beides ist mit wenigen Zeilen im Template behoben.

5. Verfügbarkeit, Lieferzeit und Preisangaben

   So prüfen Sie: Graustufen-Test auf der Produktseite, danach ein Kontrastwerkzeug auf die kleinen grauen Texte: Versandhinweis, Grundpreis, Streichpreis, Fußnoten zur Lieferzeit.

   Was der Befund bedeutet: Ein grüner Punkt für „auf Lager“ und ein roter für „nicht verfügbar“ ohne Textzusatz ist Information allein über Farbe (1.4.1). Die Pflichtangaben in Hellgrau auf Weiß sind fast immer unter 4,5:1 (1.4.3) – und ausgerechnet dort stehen die Angaben, die im Fernabsatz ohnehin vorgeschrieben sind.

6. Reiter und Aufklappbereiche

   So prüfen Sie: Öffnen Sie Beschreibung, Datenblatt und Bewertungen nur mit der Tastatur. Bei Reitern: Wechseln Sie mit den Pfeiltasten. Bei Aufklappbereichen: Öffnet die Eingabetaste, und ändert sich sichtbar etwas?

   Was der Befund bedeutet: Inhalte hinter nicht bedienbaren Reitern sind faktisch nicht vorhanden (2.1.1). Fehlt bei einem Aufklappbereich aria-expanded oder bei einem Reiter der ausgewählte Zustand, fehlt die Zustandsinformation (4.1.2). Achten Sie außerdem darauf, ob Info-Symbole – etwa zur Größentabelle – nur bei Mouseover erscheinen und beim Wegbewegen sofort verschwinden (1.4.13).

7. „In den Warenkorb“ und die Rückmeldung danach

   So prüfen Sie: Legen Sie den Artikel per Tastatur in den Warenkorb. Was passiert sichtbar? Öffnet sich ein Layer, und wohin geht der Fokus? Kommen Sie mit Escape wieder heraus?

   Was der Befund bedeutet: Ohne wahrnehmbare Rückmeldung weiß niemand, ob die Aktion erfolgreich war (4.1.3). Öffnet sich ein Mini-Warenkorb, ohne dass der Fokus mitgeht, ist die Meldung für Tastaturbedienung unerreichbar (2.4.3). Prüfen Sie zusätzlich: Trägt die Schaltfläche denselben Namen, den sie sichtbar zeigt? Steht sichtbar „In den Warenkorb“, im aria-label aber „Kaufen“, ist das ein Befund gegen 2.5.3 (Beschriftung im Namen) – Sprachsteuerung findet die Schaltfläche dann nicht.

Warenkorb

Der Warenkorb ist eine Tabelle mit Bedienelementen darin – eine Kombination, die überraschend oft schiefgeht. Prüfen Sie ihn mit mindestens zwei unterschiedlichen Artikeln, sonst fallen doppelte Beschriftungen nicht auf.

1. Struktur der Positionsliste

   So prüfen Sie: Im Quelltext nachsehen, ob die Positionen in einer table mit Kopfzellen stehen oder aus verschachtelten div-Elementen bestehen. Danach der Zoom-Test auf 200 Prozent.

   Was der Befund bedeutet: Wo Zahlen in Zeilen und Spalten stehen, brauchen sie eine Zuordnung – ohne Kopfzellen ist „14,90“ eine Zahl ohne Bezug (1.3.1). Beim Zoomen bricht eine echte Tabelle oft unschön um; die Lösung ist ein scrollbarer Bereich oder eine gestapelte Darstellung, nicht das Weglassen der Struktur.

2. Menge ändern

   So prüfen Sie: Ändern Sie die Menge einer Position nur mit der Tastatur. Gibt es eine Beschriftung, die den Artikel benennt? Muss man „Aktualisieren“ drücken, oder aktualisiert sich die Summe von selbst?

   Was der Befund bedeutet: Drei gleichlautende Felder namens „Menge“ sind nicht unterscheidbar; die Beschriftung muss den Artikel enthalten, etwa „Menge für Wanderschuh Modell X“ (3.3.2, 1.3.1). Aktualisiert sich die Summe automatisch, ohne dass es angesagt wird, ist das ein Fall für 4.1.3 – und ohne Screenreader nur eingeschränkt prüfbar.

3. Artikel entfernen

   So prüfen Sie: Tabben Sie zu den Entfernen-Schaltflächen. Erkennen Sie, welche Position Sie gerade löschen würden? Sehen Sie im Quelltext nach, ob dort nur ein Kreuz-Symbol steht.

   Was der Befund bedeutet: Ein Kreuz ohne Namen ist eine namenlose Schaltfläche (4.1.2); fünfmal „Entfernen“ ohne Artikelbezug ist nicht unterscheidbar (2.4.4). Wenn sichtbar „Entfernen“ steht, muss dieses Wort auch im zugänglichen Namen vorkommen – „Wanderschuh Modell X entfernen“ ist richtig, „Position löschen“ wäre ein Befund gegen 2.5.3.

4. Fokus nach dem Entfernen

   So prüfen Sie: Entfernen Sie eine Position per Tastatur und drücken Sie danach ohne Mausklick weiter Tabulator. Wo stehen Sie?

   Was der Befund bedeutet: Wird das fokussierte Element gelöscht, verliert der Fokus seinen Anker und landet häufig am Seitenanfang – bei einem Warenkorb mit acht Positionen bedeutet das, sich achtmal neu durchzuarbeiten (2.4.3). Sinnvoll ist ein Fokus auf der Statusmeldung oder auf der nächsten Position.

5. Gutscheinfeld und Summenblock

   So prüfen Sie: Geben Sie einen ungültigen Gutscheincode ein und senden Sie ab. Prüfen Sie danach mit dem Kontrastwerkzeug die Zeilen des Summenblocks – besonders Versandkosten, Rabattzeile und Steuerhinweis.

   Was der Befund bedeutet: Eine Fehlermeldung, die nur als rote Umrandung erscheint, erfüllt 3.3.1 nicht und ist zusätzlich Information allein über Farbe (1.4.1). Der Summenblock ist der Ort, an dem Kontrastbefunde am teuersten sind: Wer die Versandkosten nicht lesen kann, bricht ab – unabhängig von jeder Gesetzeslage.

Checkout und Bestellabschluss

Für den Checkout gilt eine Sonderregel in der Prüfung: Machen Sie eine echte Testbestellung, nicht nur einen Blick auf die Formulare. Nur so sehen Sie Schrittwechsel, Fehlerbehandlung und Bestätigungsseite im Zusammenhang. Legen Sie sich vorher eine Testadresse und eine Zahlungsart zurecht, die Sie anschließend stornieren können.

1. Der komplette Durchlauf ohne Maus

   So prüfen Sie: Vom Warenkorb bis zur Bestellbestätigung ausschließlich mit Tabulator, Umschalt-Tabulator, Pfeiltasten, Leertaste und Eingabetaste. Notieren Sie die erste Stelle, an der Sie hängen bleiben.

   Was der Befund bedeutet: Das ist der wichtigste einzelne Prüfpunkt dieser Liste. Kommen Sie nicht durch, ist der Kaufabschluss für einen Teil Ihrer Kundschaft unmöglich (2.1.1, 2.1.2). Alle weiteren Punkte sind Verfeinerungen dieses einen Ergebnisses.

2. Jedes Feld mit verknüpfter Beschriftung

   So prüfen Sie: Klicken Sie im Adressformular auf jede Beschriftung – „Vorname“, „Straße“, „Postleitzahl“, „Ort“. Springt der Cursor jeweils ins passende Feld?

   Was der Befund bedeutet: Passiert nichts, fehlt die Verknüpfung zwischen Beschriftung und Feld (1.3.1, 3.3.2). Das ist einer der häufigsten Befunde in Checkout-Formularen und zugleich einer der billigsten Fixes – ein for-Attribut je Feld.

3. Platzhalter und Pflichtfeldkennzeichnung

   So prüfen Sie: Tippen Sie in jedes Feld hinein: Verschwindet die einzige Beschriftung? Prüfen Sie dann im Graustufen-Test, ob Pflichtfelder noch als solche erkennbar sind.

   Was der Befund bedeutet: Platzhalter als einzige Beschriftung sind beim Ausfüllen und beim Korrekturlesen weg (3.3.2). Pflichtfelder, die nur durch rote Beschriftung markiert sind, verstoßen gegen 1.4.1. Ein Sternchen mit einer Legende „* Pflichtfeld“ genügt – vorausgesetzt, die Legende steht vor dem Formular und nicht darunter.

4. Automatisches Ausfüllen

   So prüfen Sie: Lassen Sie den Browser das Formular ausfüllen. Landen Vorname, Nachname, Straße, Postleitzahl, Ort, E-Mail und Telefon in den richtigen Feldern? Im Quelltext prüfen Sie, ob die Felder autocomplete-Attribute tragen.

   Was der Befund bedeutet: Fehlen die Attribute, ist der Eingabezweck der Felder programmatisch nicht bestimmbar (1.3.5). Für Menschen mit motorischen oder kognitiven Einschränkungen ist das automatische Ausfüllen kein Komfort, sondern die Voraussetzung dafür, ein langes Adressformular überhaupt fehlerfrei zu bewältigen.

5. Fehlermeldungen im Adressformular

   So prüfen Sie: Fehlertest: E-Mail ohne @, Postleitzahl mit Buchstaben, ein Pflichtfeld leer, dann absenden. Prüfen Sie Text, Feldbezug, Korrekturhinweis und Fokusposition.

   Was der Befund bedeutet: „Bitte überprüfen Sie Ihre Eingaben“ am Seitenanfang ohne Angabe des Feldes erfüllt 3.3.1 nur formal und 3.3.3 gar nicht. Gut ist: eine Fehlerliste oben mit Sprunglinks zu den Feldern, zusätzlich die Meldung direkt am Feld, und der Fokus auf der Liste. Prüfen Sie außerdem, ob nach dem Fehler alle bereits eingegebenen Daten erhalten bleiben.

6. Versand- und Zahlungsauswahl

   So prüfen Sie: Wechseln Sie die Zahlungsart nur mit den Pfeiltasten. Erreichen Sie eingebettete Zahlungsfelder von Drittanbietern per Tabulator? Kommen Sie aus dem eingebetteten Bereich wieder heraus?

   Was der Befund bedeutet: Sind die Optionen keine echte Radiogruppe, fehlen Rolle und Gruppenzugehörigkeit (1.3.1, 4.1.2). Eingebettete Zahlungsformulare sind ein eigener Fall: Sie gehören zu Ihrer Dienstleistung, auch wenn sie von einem Dienstleister stammen. Prüfen Sie sie mit und melden Sie Befunde an den Anbieter – oder stellen Sie die Frage nach dem Anbieterwechsel.

7. Zeitliche Begrenzungen

   So prüfen Sie: Gibt es einen Countdown für reservierte Ware, einen Warenkorb, der nach X Minuten verfällt, oder eine Sitzung, die abläuft? Lassen Sie den Checkout bewusst einmal liegen und sehen Sie nach, was passiert.

   Was der Befund bedeutet: Zeitvorgaben müssen abschaltbar, verlängerbar oder großzügig bemessen sein (2.2.1). Wer das Formular mit einer Bildschirmlupe oder per Sprachsteuerung ausfüllt, braucht ein Vielfaches der Zeit. Ein Warenkorb, der ohne Vorwarnung verfällt, ist zugleich ein Datenverlust ohne Rückholmöglichkeit.

8. Prüfen, bestellen, bestätigen

   So prüfen Sie: Auf der letzten Seite vor dem Absenden: Sind alle Angaben nachlesbar, und führt zu jedem Block ein Korrektur-Link? Nach dem Absenden: Steht auf der Bestätigungsseite eine eindeutige Überschrift, und wohin geht der Fokus?

   Was der Befund bedeutet: Eine Bestellung ist eine finanzielle Verpflichtung; sie muss überprüfbar oder korrigierbar sein, bevor sie ausgelöst wird (3.3.4, Fehlervermeidung). Auf der Bestätigungsseite gehört der Fokus an den Anfang des neuen Inhalts, damit die Bestätigung überhaupt wahrgenommen wird (2.4.3, 4.1.3). Wiederholen Sie den Zoom-Test auf 200 Prozent über den gesamten Checkout – lange Formulare brechen dort besonders oft.

Formulare, Kontakt und Kundenkonto

Außerhalb des Checkouts stehen die Formulare, die man leicht vergisst: Kontakt, Newsletter, Retourenanmeldung, Registrierung, Login, Passwort vergessen. Sie werden seltener gepflegt als der Kaufpfad – und fallen deshalb in Prüfungen überdurchschnittlich oft auf.

1. Beschriftungen und Anweisungen im Kontaktformular

   So prüfen Sie: Klick-Test auf jede Beschriftung. Gibt es zu Feldern mit Formatvorgabe – Telefonnummer, Kundennummer, Bestellnummer – einen Hinweis, wie das Format aussehen soll, und steht dieser Hinweis vor der Eingabe?

   Was der Befund bedeutet: Fehlende Verknüpfung ist ein Befund gegen 1.3.1; fehlende Formathinweise gegen 3.3.2. Hinweise, die erst nach einem Fehlversuch erscheinen, sind Fehlerbehandlung, keine Anweisung – beides wird gebraucht.

2. Fehlertest im Kontaktformular

   So prüfen Sie: Absichtlich falsch absenden, wie oben beschrieben. Achten Sie besonders auf die Pflichtfeld-Meldung bei der Datenschutz-Checkbox.

   Was der Befund bedeutet: Checkbox-Fehler werden häufig nur durch eine rote Umrandung angezeigt, ohne Text und ohne Bezug (3.3.1, 1.4.1). Prüfen Sie zusätzlich, ob der Text neben der Checkbox tatsächlich mit ihr verknüpft ist – ein Klick auf den Text muss den Haken setzen.

3. Rückmeldung nach dem Absenden

   So prüfen Sie: Senden Sie das Formular korrekt ab. Führt der Weg auf eine eigene Seite mit eigener Überschrift, oder erscheint nur ein grüner Kasten an Ort und Stelle? Wohin geht der Fokus?

   Was der Befund bedeutet: Eine Erfolgsmeldung, die ohne Fokuswechsel eingeblendet wird, muss als Statusmeldung ausgezeichnet sein (4.1.3). Ohne Screenreader können Sie nur feststellen, ob es überhaupt eine sichtbare Rückmeldung gibt – fehlt sie, ist der Befund eindeutig; ist sie vorhanden, notieren Sie den Punkt für die manuelle Prüfung.

4. Captcha und Spam-Schutz

   So prüfen Sie: Gibt es ein Captcha? Ist es rein visuell – Zeichen abtippen, Bilder auswählen? Existiert eine Alternative, etwa akustisch oder als Rechenaufgabe? Lässt sich das Captcha per Tastatur bedienen?

   Was der Befund bedeutet: Ein rein visuelles Captcha ohne Alternative ist ein Nicht-Text-Inhalt ohne gleichwertige Alternative (1.1.1) und sperrt einen Teil Ihrer Kundschaft vom Kontaktweg aus. Unauffällige Verfahren ohne Nutzerinteraktion – Zeitmessung, versteckte Felder – lösen das Problem meist besser als jede Captcha-Variante.

5. Login und Passwortfeld

   So prüfen Sie: Loggen Sie sich mit falschem Passwort ein: Steht die Fehlermeldung als Text da? Prüfen Sie den Umschalter „Passwort anzeigen“ mit der Tastatur und im Quelltext auf einen Zustand.

   Was der Befund bedeutet: Der Sichtbarkeits-Umschalter ist fast immer ein Symbol ohne Namen und ohne Zustandsangabe (4.1.2). Fehlen an den Feldern die autocomplete-Angaben für Benutzername und Passwort, funktionieren Passwortmanager unzuverlässig (1.3.5) – und Passwortmanager sind für viele Menschen mit Einschränkungen das eigentliche Hilfsmittel.

6. Passwortregeln vor der Eingabe

   So prüfen Sie: Sehen Sie sich das Registrierungsformular an, bevor Sie tippen. Stehen die Anforderungen an das Passwort dort schon, oder erscheinen sie erst als Fehlermeldung?

   Was der Befund bedeutet: Anforderungen, die erst nach dem Fehlversuch auftauchen, sind ein Befund gegen 3.3.2. Für Menschen, die mit Sprachsteuerung oder Bildschirmlupe arbeiten, bedeutet jeder vermeidbare Fehlversuch ein Vielfaches an Aufwand.

7. Kundenkonto: Bestellhistorie, Dokumente, Sitzungsdauer

   So prüfen Sie: Öffnen Sie die Bestellübersicht. Ist sie eine Tabelle mit Kopfzellen? Wie heißen die Links zu Rechnungen – zehnmal „Download“ oder „Rechnung zu Bestellung 100234“? Lassen Sie das Konto danach eine Weile offen und prüfen Sie, ob die Sitzung ohne Vorwarnung endet.

   Was der Befund bedeutet: Tabellen ohne Kopfzellen verlieren die Zuordnung ihrer Werte (1.3.1); gleichlautende Download-Links sind nicht unterscheidbar (2.4.4); eine ablaufende Sitzung ohne Warnung und ohne Verlängerungsmöglichkeit ist ein Befund gegen 2.2.1.

Rechtstexte, Dokumente und die Erklärung zur Barrierefreiheit

Der letzte Block wird am häufigsten übersehen, weil er nicht im Kaufpfad liegt. Für die Prüfung ist er trotzdem relevant: Rechtstexte gehören zur Dienstleistung, und die Informationspflicht aus § 14 BFSG ist ohne technischen Aufwand erfüllbar – aber nur, wenn jemand daran denkt.

1. AGB, Widerrufsbelehrung und Datenschutz als Webseite

   So prüfen Sie: Öffnen Sie die Links in der Fußzeile. Landen Sie auf einer HTML-Seite oder auf einem PDF? Bei HTML: Zoom-Test auf 200 Prozent und Blick auf die Überschriften-Struktur.

   Was der Befund bedeutet: Ein PDF ist ein eigenes Dokument mit eigenen Anforderungen – Struktur-Tags, Sprache, Dokumenttitel, Lesereihenfolge. Ein aus Word exportiertes PDF erfüllt das in aller Regel nicht. Wo der Inhalt ohnehin nur Text ist, ist die HTML-Seite die schnellere und die bessere Lösung.

2. PDFs im Sortiment

   So prüfen Sie: Listen Sie auf, welche PDFs Ihr Shop ausliefert: Datenblätter, Bedienungsanleitungen, Kataloge, Rechnungen. Öffnen Sie eines und prüfen Sie in den Dokumenteigenschaften, ob ein Titel gesetzt ist und ob sich Text markieren lässt.

   Was der Befund bedeutet: Lässt sich kein Text markieren, ist das PDF ein Bild – für Screenreader vollständig leer (1.1.1). Ein fehlender Dokumenttitel ist das PDF-Gegenstück zu 2.4.2. Machbarer Zwischenschritt: die wichtigsten Informationen zusätzlich als HTML-Inhalt auf der Produktseite anbieten. Welche Dokumente überhaupt unter das Gesetz fallen und was ein PDF barrierefrei macht, steht im Artikel Barrierefreie PDFs im Shop.

3. Erklärung zur Barrierefreiheit

   So prüfen Sie: Suchen Sie in der Fußzeile nach einer Erklärung zur Barrierefreiheit. Ist sie von jeder Seite aus erreichbar? Nennt sie den Stand, den zugrunde gelegten Maßstab und die bekannten Einschränkungen?

   Was der Befund bedeutet: § 14 BFSG verlangt, öffentlich darzulegen, wie die Dienstleistung die Barrierefreiheitsanforderungen erfüllt. Eine Erklärung, die bekannte Lücken benennt, ist dabei glaubwürdiger als eine, die pauschal Vollständigkeit behauptet – und sie ist ehrlicher gegenüber den Menschen, die auf die Angaben angewiesen sind. Aufbau und Formulierungen zum Abschreiben stehen im Artikel Barrierefreiheitserklärung: Muster und Anleitung.

4. Feedback-Weg für Barrieren

   So prüfen Sie: Gibt es in der Erklärung eine konkrete Kontaktmöglichkeit, um eine Barriere zu melden? Ist mindestens ein Weg genannt, der nicht selbst ein Formular ist – eine E-Mail-Adresse oder eine Telefonnummer?

   Was der Befund bedeutet: Ein Melde-Weg, der nur über ein Formular führt, das seinerseits nicht bedienbar ist, läuft ins Leere. Zwei unabhängige Kontaktwege sind der praktische Mindeststandard – und die eingehenden Meldungen sind die beste kostenlose Prüfung, die Sie bekommen können.

5. Fußzeile selbst

   So prüfen Sie: Kontrastwerkzeug auf die Fußzeilen-Links – dunkle Fußzeilen mit mittelgrauem Text sind ein Standardbefund. Danach der Tabulator-Test: Sind alle Pflichtlinks erreichbar, auch wenn darüber eine endlos nachladende Produktliste steht?

   Was der Befund bedeutet: Grauer Text auf dunklem Grund liegt regelmäßig unter 4,5:1 (1.4.3). Und eine Fußzeile, die per Tastatur praktisch nicht erreichbar ist, macht Impressum, Widerruf und Erklärung faktisch unzugänglich (2.1.1, 2.4.1).

Was diese Checkliste nicht abdeckt

Eine Checkliste, die ihre Grenzen verschweigt, richtet Schaden an – man hakt sie ab und hält das Thema für erledigt. Deshalb hier offen, was mit dieser Liste nicht geprüft ist.

• Die Prüfung mit einem Screenreader. Ob eine Ansage verständlich ist, ob Rollen und Zustände korrekt übermittelt werden und ob eine Statusmeldung tatsächlich ankommt, lässt sich nur mit assistiver Technologie feststellen. Mehrere Prüfpunkte oben sind deshalb ausdrücklich als Kandidaten für die manuelle Prüfung markiert.
• Die inhaltliche Qualität von Alternativtexten. Dass ein alt-Attribut vorhanden ist, prüft jedes Werkzeug. Ob „Herrenschuh, seitlich“ das Bild angemessen beschreibt, kann nur ein Mensch beurteilen – und nur jemand, der das Produkt kennt.
• Die sinnvolle Fokusreihenfolge in komplexen Komponenten. Konfiguratoren, Terminbuchungen und mehrstufige Filter haben Zustände, die eine Stichprobe nicht erfasst.
• Medien. Untertitel, Transkripte und Audiodeskription für Produktvideos sind ein eigenes Kapitel (WCAG 1.2). Wenn Sie Videos einsetzen, gehört das auf die Liste – nur eben nicht auf diese.
• Die Masse Ihrer Seiten. Sie haben hier Vorlagen geprüft, nicht Inhalte. Ein Shop mit 3.000 Artikeln hat 3.000 mögliche Fundstellen für fehlende Alternativtexte, und keine Stichprobe findet sie alle.

Für den letzten Punkt gibt es die Arbeitsteilung, die wir in jedem Bericht benennen: Automatisierte Prüfung deckt die maschinell prüfbaren WCAG-Kriterien ab; eine vollständige Konformitätsbewertung erfordert zusätzlich manuelle Prüfung. Der Scan räumt die Masse ab – fehlende Alternativtexte, unbeschriftete Felder, messbare Kontrastwerte, namenlose Schaltflächen –, und diese Liste plus eine Screenreader-Prüfung erledigen das, was Urteilsvermögen erfordert. Was das an Aufwand bedeutet, rechnet der Artikel Was kostet die BFSG-Umsetzung wirklich? in vier Blöcken durch.

Und zwei Dinge leistet diese Liste ausdrücklich nicht. Sie ist keine Bescheinigung: Eine vollständig abgehakte Liste ist ein guter technischer Stand, kein Nachweis gegenüber Dritten. Und sie ist keine Rechtsberatung – weder zur Frage, ob Ihr Shop in den Anwendungsbereich fällt, noch zur Einschätzung Ihres Risikos. Das BFSG sieht für bestimmte Verstöße Geldbußen von bis zu 100.000 Euro vor (§ 37 BFSG); wie das in Ihrem Fall zu bewerten ist, beantwortet eine Anwältin oder ein Anwalt. Unsere Rolle ist die technische Grundlage dafür: messen, beheben, dokumentieren.

Häufige Fragen

Dieser Artikel ist eine technische Einordnung und keine Rechtsberatung. Quellen: Gesetz zur Stärkung der Barrierefreiheit von Produkten und Dienstleistungen (BFSG), insbesondere §§ 3, 14 und 37; Barrierefreiheitsstärkungsgesetz-Verordnung (BFSGV); EN 301 549 in Verbindung mit WCAG 2.1, Erfolgskriterien der Stufen A und AA. Die Nummerierung der hier genannten Erfolgskriterien ist in WCAG 2.2 unverändert; WCAG 2.2 ergänzt weitere Kriterien.