BFSG für Apotheken: Online-Apotheke und Webshop barrierefrei machen

Online-Apotheken und BFSG: Warum hier besonders strenge Anforderungen gelten

Online-Apotheken sind als E-Commerce-Plattformen klar vom BFSG erfasst. Gemäß § 1 Abs. 2 BFSG fallen Dienstleistungen im elektronischen Geschäftsverkehr unter die Barrierefreiheitspflicht – und dazu gehören Online-Apotheken und Apotheken-Webshops ohne Ausnahme.

Dazu kommt ein entscheidender Faktor: Apotheken verkaufen Gesundheitsprodukte an Menschen, die oft alters- oder krankheitsbedingt Einschränkungen haben. Sehbehinderungen, motorische Einschränkungen oder kognitive Beeinträchtigungen sind in der Zielgruppe überdurchschnittlich vertreten. Barrierefreiheit ist hier nicht nur Pflicht, sondern direkt geschäftsrelevant.

Wer seine Online-Apotheke barrierefrei macht, erreicht mehr Kunden und erfüllt gleichzeitig das BFSG.

YMYL-Relevanz: Gesundheitsinformationen tragen besondere Verantwortung

Online-Apotheken fallen in die Kategorie YMYL (Your Money or Your Life). Fehlerhafte oder unzugängliche Gesundheitsinformationen können reale gesundheitliche Konsequenzen haben. Wenn ein sehbehinderter Mensch die Dosierungsanweisung nicht lesen kann oder ein Screenreader die Wechselwirkungs-Warnung nicht vorliest, wird Barrierefreiheit zur Frage der Patientensicherheit. Weitere Informationen finden Sie im BFSG-Glossar.

Das bedeutet: Die Anforderungen an Klarheit, Zugänglichkeit und Verständlichkeit sind bei Apotheken-Webseiten höher als bei einem durchschnittlichen Online-Shop. Sowohl Google (E-E-A-T-Bewertung) als auch die Marktüberwachungsbehörden schauen bei Gesundheitsangeboten genauer hin.

Kritische Stellen in Online-Apotheken

Medikamenten-Beipackzettel als nicht-barrierefreies PDF. Dosierungsanweisungen in zu kleiner Schrift. Wechselwirkungs-Checker, die nur per Maus funktionieren – ein Verstoß gegen WCAG SC 2.1.1 (Tastatur).

Produktbilder von Medikamenten-Verpackungen ohne Alt-Text – Verstoß gegen WCAG SC 1.1.1 (Nicht-Text-Inhalt). Rezept-Upload-Funktionen ohne barrierefreie Dateiauswahl. Und: Warenkorb-Hinweise („Achtung: rezeptpflichtig“), die nur farblich markiert sind – Verstoß gegen WCAG SC 1.4.1 (Benutzung von Farbe).

Auch die Navigation und Menüführung ist bei Apotheken-Shops oft problematisch: Mega-Menüs mit hunderten Produktkategorien, die per Tastatur nicht erreichbar sind.

Medikamenten-Suche barrierefrei gestalten

Die Medikamenten-Suche ist das Herzstück jeder Online-Apotheke. Damit sie barrierefrei funktioniert, müssen mehrere WCAG-Kriterien erfüllt sein:

• Suchfeld mit sichtbarem Label – nicht nur ein Placeholder-Text, sondern ein echtes <label>-Element (WCAG SC 3.3.2).
• Autocomplete-Vorschläge per Tastatur navigierbar – mit Pfeiltasten durch Vorschläge navigieren und mit Enter auswählen (SC 2.1.1).
• Suchergebnisse als aria-live-Region – damit Screenreader „12 Ergebnisse gefunden“ vorlesen (SC 4.1.3).
• Filter und Sortierung – Checkboxen und Dropdowns für Darreichungsform, Hersteller oder Preis müssen korrekte Labels haben.

Tipp: Teste die Suche einmal komplett nur mit der Tastatur – vom Eingeben des Medikamentennamens bis zum Hinzufügen in den Warenkorb.

Wechselwirkungs-Checker: Interaktive Tools barrierefrei umsetzen

Viele Online-Apotheken bieten Wechselwirkungs-Checker an, mit denen Kunden prüfen können, ob sich ihre Medikamente vertragen. Diese Tools sind oft als JavaScript-Widgets implementiert – und häufig nicht barrierefrei.

So machst du den Checker BFSG-konform:

• Eingabefelder mit Labels – jedes Medikamenten-Eingabefeld braucht ein sichtbares Label gemäß WCAG SC 3.3.2.
• Tastatur-Bedienbarkeit – Medikamente hinzufügen, entfernen und die Prüfung starten – alles per Tastatur (SC 2.1.1).
• Ergebnisse nicht nur als Farb-Ampel – Rot/Gelb/Grün reicht nicht. Ergänze immer Text und Icons (SC 1.4.1).
• Warnungen als role="alert" – damit Screenreader kritische Wechselwirkungen sofort vorlesen.

Medikamenten-Informationen barrierefrei bereitstellen

Beipackzettel als HTML-Text auf der Produktseite anbieten (nicht nur als PDF). Dosierungshinweise in ausreichender Schriftgröße und mit gutem Kontrast – mindestens 4,5:1 gemäß WCAG SC 1.4.3. Warnhinweise nicht nur farblich, sondern auch mit Icon und Text kennzeichnen.

Produktbilder mit Alt-Text, der Produktname, Wirkstoff und Dosierung nennt. Und: Allergiker-Informationen prominent und als Text darstellen – nicht als Bild einer Tabelle.

Bei PDFs, die du ergänzend anbietest: Nutze Tagged-PDF-Struktur mit korrekten Leserichtungen. Bild-Scans von Beipackzetteln sind keine barrierefreien PDFs.

Rezept-Upload und E-Rezept barrierefrei

Die Rezept-Upload-Funktion muss per Tastatur bedienbar sein (WCAG SC 2.1.1). Datei-Upload-Buttons brauchen klare Labels gemäß SC 3.3.2. Statusmeldungen („Rezept eingegangen“, „wird geprüft“, „freigegeben“) müssen für Screenreader sichtbar sein (aria-live="polite").

E-Rezept-Integration muss den gleichen Standards folgen. Und: Der gesamte Bestell-Prozess vom Medikament bis zur Bezahlung muss per Tastatur navigierbar sein.

Achte besonders auf barrierefreie Formulare: Fehlermeldungen beim Upload („Datei zu groß“, „Falsches Format“) müssen klar kommuniziert werden – nicht nur als rote Umrandung, sondern als Text, der dem Formularfeld zugeordnet ist (SC 3.3.1).

Filialsuche und Kartenintegration

Viele Apotheken bieten eine Filialsuche mit interaktiver Karte an. Das Problem: Google Maps und ähnliche Karten-Widgets sind für Screenreader praktisch unsichtbar und per Tastatur schwer bedienbar.

Die Lösung: Biete immer eine textbasierte Alternative an. Eine durchsuchbare Liste mit Filialname, Adresse, Öffnungszeiten und Telefonnummer erfüllt die Anforderung. Die Karte darf als visuelles Extra bestehen bleiben – aber die Informationen müssen auch ohne sie zugänglich sein.

Tipp: Verwende für die Kartendarstellung ein aria-hidden="true" und stelle sicher, dass die textbasierte Liste direkt darunter oder daneben steht.

Schritt für Schritt: Online-Apotheke BFSG-konform machen

Hier ist ein pragmatischer Fahrplan, um deine Online-Apotheke barrierefrei zu machen:

1. Bestandsaufnahme: Scanne deine Seite mit dem bf-check Scanner und identifiziere die größten Barrieren.
2. Beipackzettel umstellen: PDF-Beipackzettel als HTML-Text auf den Produktseiten einbinden. Bestehende PDFs als Tagged-PDF neu erstellen.
3. Alt-Texte ergänzen: Jedes Produktbild braucht einen beschreibenden Alt-Text mit Produktname, Wirkstoff und Darreichungsform.
4. Formulare prüfen: Rezept-Upload, Kontaktformular, Checkout – alle Formulare auf Labels und Fehlermeldungen testen.
5. Navigation testen: Gesamte Seite per Tastatur durchnavigieren – von der Startseite bis zur Bestellbestätigung.
6. Kontraste prüfen: Besonders bei Dosierungshinweisen, Warnungen und kleiner Schrift (mindestens 4,5:1).
7. Screenreader-Test: Mit NVDA (kostenlos) oder VoiceOver die wichtigsten User-Journeys durchspielen.

Hinweis: Dieser Artikel dient der allgemeinen Information und ersetzt keine individuelle Rechtsberatung. Die konkreten BFSG-Anforderungen können je nach Geschäftsmodell und Angebotsumfang variieren. Im Zweifelsfall konsultiere einen spezialisierten Anwalt.

Häufig gestellte Fragen

Beratungs-Chat und Terminbuchung barrierefrei gestalten

Viele Online-Apotheken bieten inzwischen einen Beratungs-Chat oder eine Terminbuchung für telefonische Rückfragen an. Beide Funktionen werden häufig als eigenständige JavaScript-Widgets eingebunden und dabei leicht übersehen, wenn die übrige Webseite bereits geprüft wurde.

Ein Chat-Widget muss per Tastatur zu öffnen und zu bedienen sein, und neue Nachrichten müssen über eine aria-live-Region angekündigt werden, damit Screenreader-Nutzer mitbekommen, wenn eine Antwort eintrifft. Ohne diese Ankündigung bleibt der Chat für sie faktisch stumm, selbst wenn er optisch funktioniert.

Bei der Terminbuchung gelten dieselben Anforderungen wie bei anderen Datepickern: vollständige Tastaturbedienung, ein alternatives Texteingabefeld für das Datum und klare Statusmeldungen, sobald ein Termin bestätigt oder abgelehnt wurde. Bei gesundheitsbezogenen Anliegen ist es besonders wichtig, dass die Bestätigung eindeutig und nicht nur über eine kurz aufblitzende Meldung erfolgt.

Wird eine Video-Beratung angeboten, sollte vorab geprüft werden, ob der eingesetzte Anbieter Untertitel oder eine Text-Chat-Alternative während des Gesprächs unterstützt. Nicht jeder Videodienst erfüllt diese Anforderung von Haus aus, weshalb sich ein Blick in die Barrierefreiheits-Angaben des jeweiligen Anbieters lohnt, bevor er fest in den eigenen Bestellprozess eingebunden wird.

Zahlungsprozess und Rezeptfreigabe barrierefrei absichern

Der letzte Schritt einer Bestellung entscheidet oft darüber, ob ein Kauf überhaupt zustande kommt. Bei Online-Apotheken kommt neben der reinen Zahlung meist noch die Freigabe eines Rezepts hinzu, was den Prozess zusätzlich verlängert und fehleranfälliger macht.

Jeder Zwischenschritt — Prüfung des Rezepts, Auswahl der Zahlungsart, Bestätigung der Bestellung — braucht eine eigene, klar per Text formulierte Statusmeldung. Wenn ein Kunde etwa wegen eines fehlenden Angaben zum Rezept nicht weiterkommt, muss die Fehlermeldung genau benennen, welche Angabe fehlt, statt nur allgemein auf einen Fehler hinzuweisen.

Wird die Zahlung über ein eingebundenes Drittanbieter-Fenster abgewickelt, etwa für Kartenzahlung oder ein Rechnungsverfahren, sollte vorab geklärt sein, dass auch dieses Fenster per Tastatur bedienbar ist und der Fokus beim Öffnen automatisch dorthin springt. Ein Zahlungsfenster, das sich zwar öffnet, aber den Tastaturfokus nicht übernimmt, führt dazu, dass Tastaturnutzer im Hintergrund der Seite weitertabben, ohne das eigentliche Formular zu erreichen.

Nach Abschluss der Bestellung sollte eine eindeutige, dauerhaft sichtbare Bestätigung erscheinen — nicht nur eine kurz eingeblendete Meldung, die nach wenigen Sekunden automatisch verschwindet, bevor sie von einem Screenreader vollständig vorgelesen werden konnte.