BFSG für Friseure, Kosmetik und Beauty: Online-Buchung barrierefrei gestalten

Wann greift das BFSG im Beauty-Bereich?

Das Barrierefreiheitsstärkungsgesetz (BFSG) ist seit Juni 2025 in Kraft. Gemäß § 1 BFSG gilt es für Produkte und Dienstleistungen, die nach dem 28. Juni 2025 in Verkehr gebracht oder erbracht werden. Für die Beauty-Branche bedeutet das konkret: Sobald ein Friseursalon, Kosmetikstudio oder Nagelstudio eine Online-Terminbuchung, einen Online-Shop für Pflegeprodukte oder ein digitales Kundenkonto anbietet, fallen diese digitalen Angebote unter das Gesetz.

Reine Social-Media-Profile (Instagram, Facebook) sind nicht direkt betroffen – aber die eigene Webseite mit Buchungsfunktion schon. Auch ein Gutschein-Shop oder eine digitale Kundenkarte zählt als digitale Dienstleistung im Sinne des BFSG.

Wichtig: Die Betriebsgröße spielt keine Rolle. Ob Ein-Personen-Salon oder Filialkette – entscheidend ist, dass digitale Dienstleistungen für Verbraucher angeboten werden.

Rechtliche Grundlage: Was genau fordert das BFSG?

Das BFSG setzt die europäische Richtlinie (EU) 2019/882 (European Accessibility Act) in deutsches Recht um. Die technischen Anforderungen basieren auf der EN 301 549, die wiederum auf die WCAG 2.1 Level AA verweist. Für Salon-Webseiten sind besonders relevant: Weitere Informationen finden Sie im BFSG-Glossar.

• WCAG SC 1.1.1 (Nicht-Text-Inhalte): Alle Bilder – Frisuren, Behandlungsergebnisse, Produkte – brauchen aussagekräftige Alt-Texte
• WCAG SC 1.4.3 (Kontrast): Mindestkontrast 4,5:1 für Text, 3:1 für großen Text
• WCAG SC 2.1.1 (Tastatur): Alle Funktionen müssen per Tastatur bedienbar sein
• WCAG SC 4.1.2 (Name, Rolle, Wert): Formularfelder und interaktive Elemente brauchen korrekte Labels

Bei Verstößen drohen gemäß § 37 BFSG Bußgelder bis zu 100.000 Euro. Zusätzlich können Verbraucherschutzverbände Abmahnungen aussprechen. Dieser Artikel ersetzt keine Rechtsberatung.

Online-Terminbuchung barrierefrei gestalten

Die Terminbuchung ist das Herzstück jeder Salon-Webseite. Hier lauern die meisten Barrieren:

Was bei Booking-Widgets schiefgeht

Die meisten Friseursalons nutzen Drittanbieter-Widgets für die Terminbuchung (Treatwell, Shore, Timify). Diese Widgets sind oft nicht barrierefrei:

• Kalender-Auswahl: Nicht per Tastatur bedienbar, keine ARIA-Rollen für Tage und Monate
• Zeitslots: Zu geringer Kontrast, oft nur farblich unterschieden (verstößt gegen WCAG SC 1.4.1 – Benutzung von Farbe)
• Dienstleistungs-Auswahl: Dropdown-Menüs ohne label-Elemente, nicht mit Screenreadern kompatibel
• Bestätigungsseite: Fehlermeldungen werden nicht an assistive Technologien kommuniziert (fehlende aria-live-Regionen)

Schritt für Schritt: Buchung prüfen und verbessern

1. Tastatur-Test: Versuche, einen kompletten Termin nur mit der Tab-Taste und Enter zu buchen. Funktioniert das nicht, ist das Widget nicht konform.
2. Screenreader-Test: Aktiviere NVDA (kostenlos) oder VoiceOver und prüfe, ob jeder Schritt vorgelesen wird.
3. Kontrast-Check: Nutze den bf-check Scanner, um Kontrastprobleme automatisch zu finden.
4. Anbieter kontaktieren: Frage deinen Booking-Anbieter nach einer VPAT oder einem Accessibility Statement.
5. Alternative anbieten: Platziere die Telefonnummer prominent mit tel:-Link – aber das ersetzt nicht die barrierefreie Online-Buchung.

Preislisten als barrierefreie Tabellen

Viele Salons zeigen Preise als Bild, PDF oder Instagram-Story. Das ist für Screenreader-Nutzer komplett unzugänglich. Die Lösung: Barrierefreie HTML-Tabellen mit korrektem Markup.

Eine konforme Preisliste braucht:

• <caption>: Beschreibt den Tabelleninhalt („Preisliste Damen-Haarschnitte“)
• <th scope="col">: Spaltenüberschriften (Dienstleistung, Dauer, Preis)
• Keine verschmolzenen Zellen: Einfache Tabellenstruktur bevorzugen
• Responsive Design: Tabelle muss auch auf dem Smartphone lesbar sein

Häufiger Fehler: Die Preisliste als Screenshot hochladen. Ein Bild einer Tabelle ist keine Tabelle – Screenreader können die einzelnen Preise nicht vorlesen.

Vorher/Nachher-Galerien: Alt-Texte richtig formulieren

Vorher/Nachher-Bilder sind das wichtigste Marketing-Tool im Beauty-Bereich. Gemäß WCAG SC 1.1.1 benötigt jedes Bild einen aussagekräftigen Alt-Text. Bei Vorher/Nachher-Galerien bedeutet das:

• Vorher-Bild: alt="Kundin vor der Balayage-Behandlung: einfarbig dunkelbraunes, schulterlanges Haar"
• Nachher-Bild: alt="Kundin nach der Balayage-Behandlung: helle Strähnen im Deckhaar, natürlicher Farbverlauf"

Verzichte auf nichtssagende Alt-Texte wie „Bild 1“ oder „Vorher“. Der Alt-Text soll das Ergebnis der Behandlung beschreiben – genau das, was sehende Besucher auf dem Bild erkennen.

Social-Media-Einbindung auf der Webseite

Viele Salons binden Instagram-Feeds oder Facebook-Bewertungen auf ihrer Webseite ein. Diese Embeds bringen eigene Barrierefreiheits-Probleme mit:

• Tastatur-Fallen: Nutzer bleiben im Embed gefangen und können die Seite nicht weiter navigieren (Verstoß gegen WCAG SC 2.1.2)
• Fehlende Alt-Texte: Instagram-Bilder werden oft ohne Alt-Text eingebettet
• Autoplay-Videos: Eingebettete Reels starten automatisch und sind nicht pausierbar (Verstoß gegen WCAG SC 1.4.2)

Empfehlung: Statt Live-Feeds lieber manuell kuratierte Bilder mit eigenen Alt-Texten einbinden. Das ist schneller, barrierefreier und unabhängig von Drittanbieter-Skripten.

Kontaktformular und Kundenkonto

Neben der Terminbuchung gibt es weitere digitale Kontaktpunkte, die BFSG-konform sein müssen:

Kontaktformular: Jedes Eingabefeld braucht ein sichtbares <label>-Element (WCAG SC 1.3.1). Platzhalter-Text allein reicht nicht – er verschwindet beim Tippen. Fehlermeldungen müssen klar benennen, was falsch ist und wie es korrigiert werden kann (WCAG SC 3.3.1 und 3.3.3).

Newsletter-Anmeldung: Das Double-Opt-In-Verfahren muss per Tastatur bedienbar sein. Die Bestätigungs-E-Mail sollte in reinem Text oder barrierefreiem HTML versendet werden.

Digitale Kundenkarte / Treueprogramm: Login-Bereiche, Punktestände und Prämien-Einlösung fallen ebenfalls unter das BFSG. Achte auf barrierefreie Formulare und verständliche Fehlermeldungen.

Gutschein-Shop: Der gesamte Kaufprozess – Auswahl, Warenkorb, Bezahlung – muss barrierefrei sein. Besonders kritisch sind oft die Payment-Iframes von Zahlungsdienstleistern.

Barrierefreie Produktpräsentation im Beauty-Bereich

Verkaufst du Pflegeprodukte, Haarstyling-Tools oder Kosmetik über deine Webseite? Dann gelten zusätzliche Anforderungen:

• Produktbilder: Alt-Texte müssen das Produkt beschreiben („Shampoo für trockenes Haar, 250ml Flasche“ statt „Produkt1.jpg“)
• Produktbeschreibungen: Inhaltsstoffe (INCI-Liste) als Text, nicht als Bild
• Preisangaben: Grundpreis pro Liter/100ml gemäß PAngV in maschinenlesbarem Text
• Warenkorb und Checkout: Barrierefreie Formulare, klare Fehlermeldungen, Zusammenfassung vor dem Kauf

Häufige Fehler auf Salon-Webseiten

Aus unserer Analyse von über 200 Salon-Webseiten sind das die häufigsten Barrieren:

1. Preisliste nur als Bild/PDF: Nicht maschinell lesbar, keine Tabellen-Semantik
2. Kontaktformular ohne Labels: Platzhalter-Text verschwindet beim Tippen – Screenreader lesen „Eingabefeld“ statt „Ihr Name“
3. Karussell mit Frisuren-Bildern: Kein Pause-Button, keine Alt-Texte, nicht per Tastatur steuerbar
4. Google-Maps-Einbindung ohne Titel: Das <iframe> braucht ein title-Attribut wie „Standort unseres Salons auf Google Maps“
5. Öffnungszeiten als Bild: Text-Information gehört als HTML-Text auf die Seite

Was du als Salonbetreiber konkret tun kannst

Hier ist dein Fahrplan zur BFSG-Konformität:

1. Bestandsaufnahme: Scanne deine Webseite mit dem bf-check Scanner und notiere die gefundenen Probleme.
2. Bilder überarbeiten: Alle Frisuren-Fotos, Team-Bilder und Vorher/Nachher-Galerien mit Alt-Texten versehen.
3. Preisliste umstellen: PDF oder Bild durch eine barrierefreie HTML-Tabelle ersetzen.
4. Buchungssystem prüfen: Tastatur-Test durchführen und ggf. den Anbieter wechseln.
5. Formulare labeln: Jedes Eingabefeld mit einem sichtbaren <label> versehen.
6. Kontraste korrigieren: Besonders bei trendigen Pastellfarben auf ausreichend Kontrast achten.

Dieser Artikel ersetzt keine Rechtsberatung. Bei konkreten Fragen zur BFSG-Konformität deines Salons wende dich an einen spezialisierten Anwalt.

Checkliste: Barrierefreiheit für Salon-Webseiten

Nutze diese Checkliste als schnelle Orientierung. Hake ab, was bereits erfüllt ist, und arbeite die offenen Punkte Schritt für Schritt ab:

• Alle Bilder (Frisuren, Team, Produkte, Vorher/Nachher) haben beschreibende Alt-Texte
• Preisliste als HTML-Tabelle mit <caption> und <th>
• Terminbuchung komplett per Tastatur bedienbar
• Kontaktformular mit sichtbaren Labels und verständlichen Fehlermeldungen
• Farbkontrast mindestens 4,5:1 (auch bei Pastellfarben und Trend-Designs)
• Google-Maps-Iframe hat ein title-Attribut
• Öffnungszeiten als HTML-Text, nicht als Bild
• Telefonnummer als klickbarer tel:-Link
• Überschriften-Hierarchie korrekt (h1 → h2 → h3, keine Sprünge)
• Mobile Ansicht getestet – alle Funktionen auch auf dem Smartphone nutzbar

Du bist dir nicht sicher, ob deine Seite diese Punkte erfüllt? Unser kostenloser BFSG-Scanner prüft die wichtigsten technischen Kriterien automatisch.

Häufig gestellte Fragen