BFSG für Optiker: Online-Shop und Terminbuchung barrierefrei gestalten

Optiker und Barrierefreiheit: Doppelt relevant

Optiker haben eine besondere Verantwortung: Ihre Kernzielgruppe sind Menschen mit Sehproblemen. Wenn ausgerechnet die Webseite eines Optikers für sehbehinderte Menschen nicht nutzbar ist, ist das nicht nur ein BFSG-Verstoß, sondern auch ein massiver Widerspruch zum eigenen Geschäftsmodell.

Gemäß § 1 Abs. 3 BFSG fallen Online-Shops und digitale Dienstleistungen unter das Gesetz. Für Optiker bedeutet das: Online-Brillenshops, Kontaktlinsen-Abos, Sehtest-Terminbuchung und Produktkonfiguratoren müssen barrierefrei sein. Gerade bei einer Zielgruppe mit Seheinschränkungen ist das nicht nur Pflicht, sondern eine Frage der Glaubwürdigkeit.

Welche Bereiche einer Optiker-Webseite betroffen sind

Das BFSG betrifft den gesamten digitalen Auftritt – nicht nur die Startseite. Bei Optikern sind folgende Bereiche besonders kritisch:

Online-Shop: Brillen- und Kontaktlinsen-Bestellung, Produktseiten, Warenkorb und Checkout. Produktkonfiguratoren: Glasstärke, Fassungsauswahl, Beschichtungen und Farboptionen. Virtuelle Anprobe: Kamera-basierte Try-On-Tools, die oft keine Alternative für Sehbehinderte bieten. Weitere Informationen finden Sie im BFSG-Glossar.

Sehtest-Terminbuchung: Kalender-Widgets, Standortauswahl und Bestätigungsprozess. Kontaktlinsen-Abo: Nachbestellung, Lieferrhythmus-Änderung und Kundenkonto-Verwaltung.

Besondere Herausforderungen für Optiker-Webseiten

Brillen-Konfiguratoren die nur visuell funktionieren (Farbe, Form wählen per Drag-and-Drop) – ein Verstoß gegen WCAG 2.1.1 (Tastatur). Virtuelle Anprobe per Kamera ohne Alternative für Sehbehinderte. Kontaktlinsen-Bestellformulare mit komplexen Optionen (Sphäre, Zylinder, Achse) die nicht korrekt gelabelt sind – das verletzt WCAG 1.3.1 (Info und Beziehungen).

Sehtest-Buchung mit Kalender-Widgets ohne Tastatur-Support. Und: Produktbilder von Brillen ohne aussagekräftige Alt-Texte die das Modell beschreiben – ein Verstoß gegen WCAG 1.1.1 (Nicht-Text-Inhalt). Wie du Alt-Texte richtig schreibst, erklären wir in unserem Ratgeber.

Ein weiteres Problem: Viele Optiker-Webseiten nutzen helle Pastellfarben und dünne Schriften – gerade für die eigene Zielgruppe mit Sehproblemen fatal. WCAG 1.4.3 (Kontrast Minimum) verlangt mindestens 4,5:1 für normalen Text. Für Optiker empfehlen wir sogar 7:1 (WCAG AAA). Mehr dazu in unserem Artikel zu Farbkontrasten prüfen und korrigieren.

Virtuelle Anprobe (Try-On): Das Barrierefreiheits-Problem

Kamera-basierte virtuelle Brillenanproben sind ein beliebtes Feature, aber für sehbehinderte Nutzer praktisch nutzlos. Die Person muss das Ergebnis visuell beurteilen – genau das, was sie nicht kann.

Was du tun solltest: Biete immer eine vollwertige Alternative zur virtuellen Anprobe an. Dazu gehören detaillierte Maßangaben (Bügelbreite, Stegbreite, Glasbreite, Glashöhe), Beschreibungen der Passform (z. B. „schmales Gesicht, runde Form“) und eine telefonische Beratung.

Die virtuelle Anprobe selbst sollte mindestens per Tastatur startbar und beendbar sein. Der Button zum Aktivieren der Kamera braucht ein verständliches Label gemäß WCAG 4.1.2 (Name, Rolle, Wert).

Kontaktlinsen-Shop barrierefrei gestalten

Kontaktlinsen-Bestellformulare sind technisch anspruchsvoll: Sphäre, Zylinder, Achse, Basiskurve, Durchmesser – jedes Feld braucht ein eindeutiges <label>-Element. Platzhaltertexte allein reichen gemäß WCAG 1.3.1 nicht als Label.

Typische Fehler: Dropdown-Menüs ohne Label, Werte die nur als Bild dargestellt werden (z. B. farbige Kreise für Kontaktlinsen-Farben ohne Text-Alternative), und fehlende Fehlermeldungen bei unvollständiger Eingabe.

Nachbestellungen und Abo-Verwaltung müssen ebenfalls barrierefrei sein. Wenn ein Nutzer seinen Lieferrhythmus ändern oder ein Abo kündigen will, darf das nicht an einem unzugänglichen Interface scheitern. Wie du Formulare barrierefrei gestaltest, erfährst du in unserem Leitfaden.

Was Optiker sofort verbessern sollten – Schritt für Schritt

Schritt 1 – Bestandsaufnahme: Prüfe deine gesamte Webseite mit dem bf-check Scanner. Notiere alle kritischen Bereiche: Shop, Konfigurator, Terminbuchung, Kontaktlinsen-Bestellung.

Schritt 2 – Alt-Texte: Versehe alle Brillenbilder mit beschreibenden Alt-Texten: Modell, Farbe, Form und Material – z. B. „Schwarze runde Acetat-Brille Modell Oslo“. Vermeide generische Texte wie „Brille“ oder „Produktbild“.

Schritt 3 – Formulare: Kontaktlinsen-Bestellformulare und Sehtest-Buchung mit eindeutigen Labels versehen (nicht nur Platzhalter). Fehlermeldungen müssen verständlich und gemäß WCAG 3.3.1 (Fehlerkennzeichnung) umgesetzt sein.

Schritt 4 – Kontraste und Schriftgröße: Farb- und Kontrast-Einstellungen großzügig wählen (die eigene Zielgruppe hat Sehprobleme). Schriftgröße mindestens 16px im Fließtext. Alle Preise und Produktinformationen als Text, nicht nur als Bild.

Schritt 5 – Konfigurator: Tastatur-Alternative zum visuellen Konfigurator anbieten (strukturiertes Formular mit Dropdowns). Vorschaubilder mit Alt-Texten beschreiben.

Schritt 6 – Terminbuchung: Sehtest-Kalender per Tastatur bedienbar machen. Fokuszustände gemäß WCAG 2.4.7 (Fokus sichtbar) sicherstellen.

Schritt 7 – Testen: Navigiere deine gesamte Webseite nur mit der Tastatur. Teste mit einem Screenreader (NVDA ist kostenlos). Lass Betroffene mit Seheinschränkungen testen – deine Kunden sind die perfekte Testgruppe.

Brillen-Konfigurator barrierefrei gestalten

Ein Brillen-Konfigurator muss per Tastatur bedienbar sein (WCAG 2.1.1). Jede Auswahloption (Farbe, Form, Glasstärke) braucht ein Text-Label. Vorschaubilder müssen mit Alt-Texten beschrieben werden.

Der Warenkorbzugang muss auch ohne Maus erreichbar sein. Gib eine Text-Alternative zum visuellen Konfigurator – zum Beispiel ein strukturiertes Formular mit Dropdowns. Farbauswahlen dürfen nicht nur über Farbe vermittelt werden (WCAG 1.4.1 – Verwendung von Farbe), sondern müssen zusätzlich den Farbnamen als Text anzeigen.

Hinweis: Dieser Artikel dient der allgemeinen Orientierung und ersetzt keine Rechtsberatung. Die Anforderungen des BFSG können je nach Geschäftsmodell variieren. Bei Unsicherheiten empfehlen wir, einen spezialisierten Anwalt hinzuzuziehen.

Häufig gestellte Fragen