BFSG für Floristen: Online-Bestellung und Blumenshop barrierefrei

Floristen und das BFSG: Online-Bestellung im Fokus

Viele Blumenläden bieten inzwischen Online-Bestellung mit Lieferservice an — spätestens seit Corona ein wichtiger Umsatzkanal. Sobald Kunden über deine Webseite Blumen bestellen und bezahlen können, ist das eine digitale Dienstleistung im Sinne von § 1 Abs. 2 BFSG. Das gilt unabhängig von der Unternehmensgröße.

Betroffen sind insbesondere:

• Online-Bestellformulare für Sträuße und Gestecke
• Anlass-Konfiguratoren (Hochzeit, Trauer, Geburtstag)
• Abo-Modelle für regelmäßige Blumenlieferungen
• Liefergebiets-Prüfung per PLZ-Eingabe
• Online-Bezahlung (PayPal, Kreditkarte, Vorkasse)

Hinweis: Dieser Artikel dient der allgemeinen Orientierung und ersetzt keine Rechtsberatung. Für verbindliche Aussagen zur BFSG-Konformität konsultiere bitte einen Fachanwalt.

Besondere Herausforderung: Visuelle Produkte beschreiben

Blumen sind ein extrem visuelles Produkt. Alt-Texte für Blumensträuße zu schreiben ist eine besondere Herausforderung — WCAG SC 1.1.1 (Nicht-Text-Inhalte) verlangt, dass jedes informationstragende Bild eine Textalternative hat. Weitere Informationen finden Sie im BFSG-Glossar.

„Bunter Blumenstrauß“ reicht nicht. Besser: „Frühlingsstrauß mit rosa Tulpen, weißen Lilien und grünem Eucalyptus, ca. 40 cm, in Naturtönen“. Je beschreibender der Alt-Text, desto besser kann ein sehbehinderter Kunde eine Kaufentscheidung treffen.

Vorlage für Floristen-Alt-Texte:

• Struktur: [Straußtyp] mit [Hauptblumen], [Farben], ca. [Größe], [Anlass]
• Beispiel 1: „Trauergesteck mit weißen Lilien und Schleierkraut, ca. 45 cm, klassisch gebunden“
• Beispiel 2: „Bunter Geburtstagsstrauß mit Sonnenblumen, Gerbera und Rosen in Gelb und Orange, ca. 35 cm“
• Beispiel 3: „Hochzeitsstrauß in Pastelltönen mit Pfingstrosen, Eukalyptus und Schleierkraut, kompakt gebunden“

Online-Bestellsystem: Schritt für Schritt barrierefrei

Ein typisches Floristen-Bestellsystem umfasst mehrere Schritte: Strauß auswählen, Lieferadresse eingeben, Termin wählen, Kartentext verfassen, bezahlen. Jeder einzelne Schritt muss barrierefrei sein.

1. Strauß auswählen

Produktbilder brauchen beschreibende Alt-Texte (siehe oben). Preise müssen als HTML-Text dargestellt werden, nicht als Bild. Wenn du Filteroptionen anbietest (Anlass, Farbe, Preis), müssen diese per Tastatur bedienbar sein (WCAG SC 2.1.1). Jede Filteroption braucht ein sichtbares Label.

2. Liefergebiet prüfen

Viele Floristen bieten eine PLZ-Prüfung an, ob in das gewünschte Gebiet geliefert werden kann. Achte darauf:

• Das Eingabefeld hat ein sichtbares <label>-Element (WCAG SC 1.3.1)
• Die Ergebnismeldung („Lieferung möglich“ / „Leider nicht im Liefergebiet“) wird per aria-live="polite" für Screenreader angekündigt (WCAG SC 4.1.3)
• Fehlermeldungen benennen klar das Problem: „Bitte gib eine gültige 5-stellige Postleitzahl ein“ statt nur „Fehler“ (WCAG SC 3.3.1)

3. Lieferdatum wählen

Termin-Picker (Datepicker) sind ein häufiger Stolperstein. Der Picker muss vollständig per Tastatur navigierbar sein — Pfeiltasten für Tage, Monatswechsel über Buttons. Biete zusätzlich ein Textfeld an, in das Nutzer das Datum manuell eingeben können (Format: TT.MM.JJJJ).

4. Kartentext und Grußbotschaft

Das Textfeld für die Grußkarte braucht ein Label („Kartentext“) und idealerweise eine Zeichenbegrenzung mit Live-Zähler, der per aria-live aktualisiert wird. So wissen Screenreader-Nutzer, wie viele Zeichen noch übrig sind.

5. Bezahlung

Zahlungsformulare müssen alle Anforderungen an barrierefreie Formulare erfüllen: Labels, Fehlermeldungen, Tastatur-Bedienbarkeit. Wenn du einen externen Zahlungsanbieter einbindest (PayPal, Stripe), prüfe, ob dessen Checkout-Seite ebenfalls barrierefrei ist.

Anlass-Filter und Produktkategorien

Viele Floristen-Shops bieten Filter nach Anlass: Hochzeit, Trauer, Geburtstag, Valentinstag, Muttertag. Diese Filter müssen:

• Per Tastatur aktivierbar sein (WCAG SC 2.1.1)
• Über einen sichtbaren Fokus-Indikator verfügen (WCAG SC 2.4.7)
• Den aktiven Zustand nicht nur farblich, sondern auch textuell oder per Icon kennzeichnen — Farbe allein reicht nicht (WCAG SC 1.4.1 Benutzung von Farbe)
• Die Ergebnisliste dynamisch aktualisieren und dies per aria-live ankündigen

Blumen-Konfigurator und individuelle Sträuße

Wenn du einen Konfigurator für individuelle Sträuße anbietest, muss jede Auswahloption (Blumenart, Farbe, Größe) ein Text-Label haben (WCAG SC 4.1.2). Vorschaubilder müssen beschrieben werden. Der Warenkorb-Button muss per Tastatur erreichbar sein.

Biete immer eine Text-Alternative zum visuellen Konfigurator an — z. B. ein einfaches Formular mit Dropdown-Menüs. Nicht jeder Nutzer kann (oder möchte) einen Drag-and-Drop-Konfigurator bedienen.

Was kostet die Umsetzung für Floristen?

Die gute Nachricht: Viele Maßnahmen sind mit überschaubarem Aufwand umsetzbar. Die größten Hebel:

• Alt-Texte ergänzen: 1–2 Stunden für einen typischen Shop mit 30–50 Produktbildern
• Formulare nachbessern: Labels und Fehlermeldungen hinzufügen dauert meist wenige Stunden
• Datepicker austauschen: Barrierefreie Datepicker-Bibliotheken sind kostenlos verfügbar
• Kontraste anpassen: Farbwerte im CSS ändern — Aufwand minimal

Einen Überblick über typische Kosten und Budget-Planung findest du in unserem separaten Ratgeber. Für einen schnellen Erst-Check nutze unseren kostenlosen BFSG-Scanner.

Häufig gestellte Fragen

Saisonale Aktionsseiten barrierefrei planen

Valentinstag, Muttertag oder Weihnachten bringen für Floristen eigene Landingpages und zeitlich begrenzte Aktionen mit sich. Weil diese Seiten oft unter Zeitdruck entstehen, werden Barrierefreiheits-Anforderungen dabei besonders häufig übersehen.

Countdown-Elemente, die auf ein Enddatum der Aktion hinweisen, sollten nicht ausschließlich per Animation kommuniziert werden. Ein sich schnell veränderndes, blinkendes Element kann bei manchen Nutzern zudem gesundheitliche Beschwerden auslösen — deshalb sollte jede automatische Aktualisierung dezent gestaltet sein und sich pausieren lassen.

Dringlichkeits-Banner wie „Nur noch heute“ oder „Letzte Plätze für Muttertag“ sind inhaltlich unproblematisch, sollten aber nicht die einzige Information zu einem wichtigen Hinweis wie einem Bestellschluss sein. Das konkrete Lieferdatum oder der Bestellschluss gehört zusätzlich als fester Text auf die Seite, nicht nur in ein sich veränderndes Banner.

Auch eine nur für wenige Tage online stehende Aktionsseite unterliegt denselben Anforderungen wie jede andere Unterseite. Am einfachsten lässt sich das lösen, indem eine geprüfte Vorlage für Aktionsseiten wiederverwendet wird, statt jede Kampagne technisch neu aufzubauen.

Kundenbewertungen und nutzergenerierte Fotos barrierefrei einbinden

Bewertungen mit Sternen und Kundenfotos von gelieferten Sträußen schaffen Vertrauen, bringen aber eigene Anforderungen mit sich, sobald sie in den Shop eingebunden werden.

• Eine Sternebewertung braucht zusätzlich eine Textangabe wie „4,5 von 5 Sternen“, da eine rein grafische Sterne-Darstellung ohne Text für Screenreader nicht auswertbar ist.
• Von Kunden hochgeladene Fotos haben in der Regel keinen Alt-Text. Ein einfacher, generischer Text wie „Foto zu dieser Bestellung“ ist besser als gar keiner.
• Filter- und Sortierfunktionen für Bewertungen — etwa nach Sternezahl oder Aktualität — müssen wie jedes andere Formularelement per Tastatur bedienbar und beschriftet sein.
• Wird eine Bewertung nachträglich per JavaScript nachgeladen, sollte das Erscheinen neuer Inhalte nicht unangekündigt den Fokus verschieben oder die Seite spürbar verspringen lassen.

Ein moderierter Hinweis, dass Fotos vor Veröffentlichung auf einen sinnvollen Alt-Text geprüft werden, lässt sich mit überschaubarem Aufwand in den bestehenden Freigabeprozess für Kundenbewertungen einbauen und verhindert, dass sich über die Zeit hunderte unbeschriftete Bilder ansammeln.

Liefergebiets-Prüfung und Versandkosten barrierefrei darstellen

Die Frage, ob eine Adresse überhaupt beliefert werden kann, entscheidet bei Floristen oft schon vor der eigentlichen Produktauswahl über den Kaufabschluss. Wird dafür ein Eingabefeld für die Postleitzahl angeboten, braucht dieses ein sichtbares Label und eine klare, textbasierte Rückmeldung — „Lieferung in Ihr Gebiet möglich“ oder „Leider außerhalb unseres Liefergebiets“ statt eines rein farblichen Symbols.

Manche Shops zeigen das Ergebnis der Prüfung nur über ein grünes oder rotes Icon neben dem Feld an. Ohne begleitenden Text ist diese Information für Screenreader-Nutzer und für Menschen mit Farbsehschwäche nicht zugänglich. Der Text sollte zudem mit dem Eingabefeld verknüpft sein, damit er automatisch vorgelesen wird, sobald das Ergebnis feststeht.

Versandkosten und mögliche Aufpreise für Eiltermine oder bestimmte Liefertage gehören als klar strukturierter Text auf die Seite, idealerweise in Tabellenform mit eindeutigen Spaltenüberschriften. Eine Tabelle mit sauber ausgezeichneten Kopfzeilen lässt sich von Screenreadern deutlich besser erfassen als ein Fließtext, in dem Preise und Bedingungen unstrukturiert aufgezählt werden.

Wird die Verfügbarkeit eines Liefertermins per Kalender-Widget angezeigt, gilt dieselbe Anforderung wie beim Termin-Picker für die Kartengestaltung: vollständige Tastaturbedienung und eine textbasierte Alternative, falls der Kalender selbst nicht vollständig zugänglich umgesetzt werden kann.