BFSG für Yoga- und Wellness-Studios: Online-Buchung barrierefrei gestalten

Yoga und Wellness im BFSG-Kontext

Yoga-Studios und Wellness-Einrichtungen bieten zunehmend digitale Dienste an: Online-Kursbuchung, Mitgliedschafts-Verwaltung, Video-Kurse on Demand, und digitale Gutschein-Shops. All das fällt unter das BFSG. Und: Die Wellness-Branche spricht bewusst Menschen an, die etwas für ihre Gesundheit tun wollen – dazu gehören auch Menschen mit körperlichen Einschränkungen.

Gemäß § 1 Abs. 3 BFSG gelten Online-Buchungssysteme, digitale Gutschein-Shops und kostenpflichtige Video-Angebote als Dienstleistungen im elektronischen Geschäftsverkehr. Das bedeutet: Sobald du über deine Webseite Kurse buchbar machst oder digitale Produkte verkaufst, greift das Gesetz – unabhängig von deiner Unternehmensgröße.

Die Anforderungen basieren auf der EN 301 549, die wiederum auf WCAG 2.1 Level AA verweist. Für Yoga- und Wellness-Studios bedeutet das konkret: Jede digitale Interaktion – vom Kursplan über die Buchung bis zum Video-Streaming – muss für alle Menschen nutzbar sein.

Was auf Studio-Webseiten schiefgeht

Kursplan als Bild-Grafik statt als HTML-Tabelle. Buchungs-Widgets, die nur per Maus funktionieren. Stimmungsvolle, aber kontrastarme Designs (hellgrau auf weiß, pastell auf pastell). Weitere Informationen finden Sie im BFSG-Glossar.

Kursleiter-Fotos ohne Alt-Texte. Video-Vorschauen von Kursen ohne Untertitel. Und: Gutschein-Shops ohne barrierefreien Checkout.

Im Detail sehen wir bei Studio-Webseiten diese Problemfelder immer wieder:

• Kursplan als PNG/JPG: Screenreader können den Inhalt nicht erfassen. Verstößt gegen WCAG SC 1.1.1 (Textalternativen).
• Buchungs-Widget ohne Tastaturbedienung: Kalender-Picker, Zeitslot-Auswahl und „Buchen“-Button sind per Tab nicht erreichbar (WCAG SC 2.1.1).
• Kontraste unter 4,5:1: Pastellfarben und dünne Schrift auf hellem Hintergrund – typisch für Wellness-Branding, aber ein Verstoß gegen WCAG SC 1.4.3.
• Fehlende Fokus-Indikatoren: Nutzer, die per Tastatur navigieren, sehen nicht, wo sie sich befinden (WCAG SC 2.4.7).
• Gutschein-Checkout ohne Fehlerhinweise: Pflichtfelder werden rot markiert, aber nicht als Text beschrieben (WCAG SC 3.3.1).

Barrierefreier Online-Kursplan: Schritt für Schritt

Der Kursplan ist das Herzstück jeder Studio-Webseite. Ersetze die Bild-Grafik durch eine HTML-Tabelle mit Filtern nach Wochentag, Kurstyp und Trainer. So funktioniert es:

1. Semantische Tabelle erstellen: Verwende <table>, <thead>, <tbody> und <th scope="col"> für Spaltenüberschriften. Screenreader lesen dann automatisch „Montag, 10:00 Uhr, Hatha Yoga, Anna Müller“.
2. Filterbare Ansicht: Biete Dropdown-Filter über der Tabelle an – mit <label> und zugehörigem <select>. Aktualisiere die Tabelle per JavaScript, ohne die Seite neu zu laden.
3. ARIA-Live-Region: Wenn sich der Tabelleninhalt filtert, informiere Screenreader mit aria-live="polite" über die Anzahl der Ergebnisse.
4. Mobile Ansicht: Auf kleinen Screens die Tabelle als Karten-Layout darstellen – aber die semantische Struktur beibehalten.

Buchungssystem barrierefrei umsetzen

Ob Mindbody, Eversports, Fitogram oder ein eigenes System – der gesamte Buchungsprozess muss barrierefrei sein. Das umfasst jeden einzelnen Schritt:

Kurs auswählen: Jeder Kurs braucht einen klickbaren Bereich, der per Tab fokussierbar ist. Der Kursname, die Uhrzeit und der Trainer müssen als Text (nicht nur visuell) erkennbar sein.

Datum und Uhrzeit wählen: Kalender-Widgets sind häufig die größte Hürde. Teste, ob du mit Pfeiltasten durch die Tage navigieren kannst und ob der gewählte Tag per Screenreader angesagt wird. Gemäß WCAG SC 4.1.2 muss jedes interaktive Element Name, Rolle und Zustand kommunizieren.

Bezahlvorgang: Formulare für Zahlungsdaten brauchen sichtbare Labels, Fehlermeldungen als Text (nicht nur Farbe) und eine logische Tab-Reihenfolge. Der „Jetzt buchen“-Button muss eindeutig benannt sein – nicht nur „Weiter“.

Bestätigung: Die Buchungsbestätigung muss als Text auf der Seite erscheinen (nicht nur als Pop-up) und per E-Mail im Klartext (nicht nur HTML-Grafik) versendet werden.

Kursvideos: Untertitel und Audiodeskription

Wenn du Online-Yoga-Kurse oder Workout-Videos anbietest, gelten zusätzliche Anforderungen. Videos brauchen Untertitel – bei Yoga wichtig für Anleitungen, die sonst nur gesprochen werden. Die Video-Plattform muss per Tastatur steuerbar sein.

Und: Kurs-Beschreibungen müssen als Text verfügbar sein, nicht nur als Video-Trailer.

Konkret fordert WCAG SC 1.2.2 synchrone Untertitel für alle voraufgezeichneten Audio-Inhalte. Bei Yoga-Videos bedeutet das:

• Sprachliche Anweisungen („Hebe den rechten Arm“) als Untertitel einblenden
• Atemübungen beschreiben („[tiefes Ein- und Ausatmen]“)
• Hintergrundmusik und Klangelemente kennzeichnen („[beruhigende Flötenmusik]“)
• YouTube Auto-Captions sind ein Startpunkt – aber immer manuell korrigieren, da Sanskrit-Begriffe wie Asana-Namen regelmig falsch erkannt werden

Für den Video-Player selbst gilt WCAG SC 2.1.1: Alle Steuerelemente (Play, Pause, Lautstärke, Untertitel ein/aus, Vollbild) müssen per Tastatur erreichbar sein.

Shop für Matten, Zubehör und Gutscheine

Viele Studios verkaufen über ihre Webseite Yoga-Matten, Blöcke, Gurte und Gutscheine. Sobald du einen Online-Shop betreibst, greifen die BFSG-Anforderungen für E-Commerce vollständig.

Achte auf folgende Punkte:

• Produktbilder: Jedes Bild braucht einen beschreibenden Alt-Text – nicht nur „Yogamatte“, sondern „Yogamatte in Violett, 183 x 61 cm, 6 mm dick“ (WCAG SC 1.1.1).
• Preisanzeige: Preis als Text, nicht als Bild. Durchgestrichene Preise mit <del> und aktuelle mit <ins> auszeichnen, damit Screenreader den Rabatt kommunizieren.
• Warenkorb: Änderungen im Warenkorb („Artikel hinzugefügt“) per aria-live kommunizieren.
• Gutschein-Checkout: Betrag wählen, Empfängername eingeben, Nachricht verfassen, bezahlen – jeder Schritt muss per Tastatur und Screenreader funktionieren.

Für digitale Gutscheine gilt zusätzlich: Wenn der Gutschein als PDF generiert wird, muss dieses PDF getaggt sein (strukturierte Überschriften, Lesereihenfolge), damit Screenreader den Inhalt korrekt vorlesen.

Schritt-für-Schritt: Studio-Webseite BFSG-konform machen

Du musst nicht alles gleichzeitig umsetzen. Gehe systematisch vor:

1. Ist-Zustand prüfen: Nutze den bf-check Scanner, um die größten Barrieren zu identifizieren. Teste zusätzlich manuell per Tastatur (Tab, Enter, Escape) und mit einem Screenreader (NVDA ist kostenlos).
2. Kursplan umstellen: Bild-Grafik durch HTML-Tabelle ersetzen. Das ist oft der Quick Win mit dem größten Effekt.
3. Buchungssystem testen: Den kompletten Buchungsprozess per Tastatur durchspielen. Wenn dein Plugin nicht barrierefrei ist: Anbieter kontaktieren oder wechseln.
4. Videos mit Untertiteln versehen: Beginne mit den meistgesehenen Kursen. Untertitel nachträglich einfügen ist bei YouTube und Vimeo unkompliziert.
5. Shop und Gutscheine prüfen: Checkout-Prozess per Tastatur testen, Alt-Texte für Produktbilder ergänzen.
6. Kontraste anpassen: Wellness-Pastelltöne gegen WCAG-konforme Farbkombinationen tauschen. Tools wie der WebAIM Contrast Checker helfen.
7. Erklärung zur Barrierefreiheit veröffentlichen: Gemäß § 13 BFSG musst du eine Erklärung bereitstellen, die den aktuellen Stand und geplante Maßnahmen beschreibt.

Hinweis: Dieser Artikel bietet allgemeine Orientierung zum BFSG für Yoga- und Wellness-Studios. Er ersetzt keine Rechtsberatung. Die konkreten Anforderungen hängen von deinem Geschäftsmodell und deinen digitalen Angeboten ab. Im Zweifel ziehe eine spezialisierte Beratung hinzu.

Warum Barrierefreiheit zur Wellness-Philosophie passt

Yoga und Wellness stehen für Achtsamkeit, Offenheit und Inklusion. Eine barrierefreie Webseite ist kein bürokratischer Zwang – sie ist die digitale Umsetzung dieser Werte. Menschen mit Sehbehinderung, motorischen Einschränkungen oder kognitiven Beeinträchtigungen profitieren genauso von Yoga wie alle anderen.

Studios, die Barrierefreiheit ernst nehmen, gewinnen nicht nur rechtliche Sicherheit, sondern auch eine breitere Zielgruppe und eine authentischere Markenwahrnehmung. Laut ähnlichen Branchen wie Fitnessstudios zeigt sich: Wer früh handelt, spart später Kosten für Nachbesserungen.

Häufig gestellte Fragen