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

Schulung und Einweisung des Salon-Teams in Barrierefreiheit

Die technisch beste Webseite nützt wenig, wenn das Team im Salon die Inhalte pflegt, ohne die Grundregeln der Barrierefreiheit zu kennen. Gerade bei Vorher/Nachher-Bildern, Preisänderungen und Terminverfügbarkeiten wird die Webseite meist von den Mitarbeitenden selbst aktualisiert, nicht von einer Agentur.

Eine kurze, praxisnahe Einweisung reicht oft schon aus: Beim Hochladen eines neuen Bildes wird direkt danach gefragt, was auf dem Bild zu sehen ist, und dieser Satz kommt in das Alt-Text-Feld. Bei Preisänderungen wird die Tabelle direkt im System bearbeitet, statt einen neuen Screenshot der alten Tabelle hochzuladen. Solche einfachen Handgriffe lassen sich in wenigen Minuten zeigen und sparen später aufwendige Nachbesserungen.

Sinnvoll ist außerdem eine kurze schriftliche Checkliste, die im Salon griffbereit liegt oder im internen System verlinkt ist, damit auch neue Mitarbeitende sie schnell finden. Wichtige Punkte darin: Bilder immer mit beschreibendem Alt-Text, Preise als Tabelle statt als Bild, Öffnungszeiten und Kontaktdaten als Text statt als Grafik.

Wer regelmäßig Instagram-Inhalte auf die Webseite überträgt, sollte darauf achten, dass beim Kopieren von Bildtexten die Beschreibung sinnvoll bleibt und nicht nur aus Hashtags besteht. Ein kurzer Blick durch die Inhaberin oder den Inhaber, etwa einmal im Monat, ob neue Bilder und Preisänderungen den Grundregeln folgen, verhindert, dass sich über die Zeit wieder Lücken einschleichen, die beim ursprünglichen Aufbau der Seite bereits behoben waren.

Barrierefreiheitserklärung für die Salon-Webseite erstellen

Zur digitalen Präsenz eines Salons gehört auch eine klar auffindbare Erklärung, wie es aktuell um die Barrierefreiheit der eigenen Webseite steht. Diese Erklärung ersetzt keine technische Umsetzung, schafft aber Transparenz gegenüber Gästen und zeigt, dass das Thema aktiv angegangen wird, statt ignoriert zu werden.

Inhaltlich gehört in eine solche Erklärung eine ehrliche Einschätzung des aktuellen Stands: Welche Bereiche der Webseite sind bereits gut zugänglich, wo gibt es noch bekannte Einschränkungen, etwa bei einem eingebundenen Buchungswidget eines Drittanbieters, auf das der Salon selbst keinen direkten Einfluss hat. Eine solche Offenheit wirkt glaubwürdiger als eine pauschale Behauptung vollständiger Konformität, die sich bei näherer Prüfung schnell als falsch herausstellen kann.

Zusätzlich sollte ein Kontaktweg genannt werden, über den Gäste Barrieren melden können, die ihnen bei der Nutzung der Webseite oder der Terminbuchung begegnet sind. Das kann eine einfache E-Mail-Adresse oder ein Kontaktformular sein – wichtig ist, dass dieser Weg tatsächlich funktioniert und Rückmeldungen auch wirklich bearbeitet werden, statt nur formal zu existieren.

Die Erklärung sollte an einer leicht auffindbaren Stelle verlinkt sein, etwa im Footer neben Impressum und Datenschutz, und in regelmäßigen Abständen aktualisiert werden, wenn sich an der Webseite etwas ändert. Eine veraltete Erklärung, die einen längst behobenen Mangel noch immer aufführt oder einen neuen Mangel gar nicht erwähnt, verfehlt ihren Zweck und sollte deshalb Teil der regulären Wartung der Webseite sein, nicht ein einmalig erstelltes und danach vergessenes Dokument.