BFSG für Fitnessstudios: Mitglieder-Portal und Online-Kurse barrierefrei
BFSG im Fitness-Bereich: Wer muss handeln?
Das Barrierefreiheitsstärkungsgesetz (BFSG) erfasst seit Juni 2025 Anbieter digitaler Dienstleistungen (§ 1 Abs. 3 Nr. 5 BFSG). Für Fitnessstudios bedeutet das: Sobald du Online-Mitgliedschaften, digitale Kurspläne, Online-Coaching oder einen Shop für Supplements anbietest, bietest du digitale Dienstleistungen im Sinne des Gesetzes an.
Große Ketten wie McFit, FitX oder Urban Sports Club sind definitiv betroffen. Aber auch kleinere Studios sollten ihre Webseite prüfen: Entscheidend ist nicht die Unternehmensgröße, sondern ob über die Webseite Verträge abgeschlossen, Buchungen vorgenommen oder kostenpflichtige Inhalte bereitgestellt werden.
Die Ausnahme für Kleinstunternehmen (§ 2 Abs. 4 BFSG: weniger als 10 Beschäftigte und unter 2 Millionen Euro Jahresumsatz) greift nur bei Dienstleistungen, nicht bei Produkten. Prüfe also genau, ob dein Online-Supplement-Shop als Produktvertrieb zählt – dann gilt die Ausnahme dort nicht.
Typische Probleme auf Fitness-Webseiten
Bei unseren Analysen von Fitness-Webseiten sehen wir immer wieder dieselben Barrieren: Weitere Informationen finden Sie im BFSG-Glossar.
- Kurspläne als Bild: Screenshots oder Grafiken des Stundenplans sind für Screenreader nicht lesbar und verstoßen gegen WCAG SC 1.1.1 (Non-text Content).
- Anmelde-Formulare mit Custom-Slidern: Selbstgebaute Regler für Vertragslaufzeit oder Trainingsfrequenz sind oft nicht tastaturbedienbar (Verstoß gegen SC 2.1.1 Keyboard) und haben keine zugänglichen Beschriftungen.
- Trainingsvideos ohne Untertitel: Pflicht nach SC 1.2.2 Captions (Prerecorded). Besonders kritisch bei Anweisungen wie „Jetzt den rechten Arm heben“.
- BMI-Rechner ohne Labels: Eingabefelder für Gewicht und Größe ohne
<label>-Elemente verstoßen gegen SC 1.3.1 und SC 3.3.2 (Labels or Instructions). - Vorher-Nachher-Galerien ohne Alt-Texte: Informative Bilder brauchen beschreibende Alt-Texte (SC 1.1.1).
- Farbkontrast bei Buttons: Neonfarbene „Jetzt anmelden“-Buttons auf hellen Hintergründen erreichen oft nicht das Mindestkontrastverhältnis von 4,5:1 (SC 1.4.3).
Online-Mitgliedschaft und Checkout barrierefrei gestalten
Der Abschluss einer Online-Mitgliedschaft ist eine digitale Dienstleistung – und damit der Kern der BFSG-Pflicht. Der gesamte Prozess von der Paketauswahl bis zur Zahlungsbestätigung muss barrierefrei sein.
Konkret bedeutet das für den Checkout deines Fitnessstudios:
- Formulare mit Labels: Jedes Eingabefeld (Name, Adresse, IBAN) braucht ein programmatisch verknüpftes
<label>. Placeholder-Text allein reicht nicht (mehr zu barrierefreien Formularen). - Fehlermeldungen: Wenn die IBAN falsch ist, muss die Fehlermeldung das betroffene Feld benennen und eine Lösung vorschlagen (SC 3.3.1 Error Identification, SC 3.3.3 Error Suggestion).
- Tastaturnavigation: Der komplette Checkout muss ohne Maus bedienbar sein. Tab-Reihenfolge muss logisch sein (SC 2.4.3 Focus Order).
- Zeitlimits: Falls Sessions nach Inaktivität ablaufen, muss der Nutzer gewarnt werden und die Zeit verlängern können (SC 2.2.1 Timing Adjustable).
Trainingsvideos: Untertitel und Audiodeskription
Trainingsvideos sind das Herzstück vieler Fitness-Webseiten – und ein häufiger Problempunkt. Die WCAG stellt klare Anforderungen:
- SC 1.2.2 Captions (Prerecorded), Stufe A: Alle voraufgezeichneten Videos mit gesprochenem Inhalt brauchen synchrone Untertitel. Das betrifft Trainingsanleitungen, Ernährungstipps und Mitglieder-Testimonials.
- SC 1.2.5 Audio Description (Prerecorded), Stufe AA: Wenn das Video visuelle Informationen enthält, die nicht aus dem Gesprochenen hervorgehen (z. B. eine Übungsdemonstration ohne verbale Beschreibung), ist eine Audiodeskription erforderlich.
- SC 1.2.4 Captions (Live), Stufe AA: Live-Streams von Kursen brauchen Echtzeit-Untertitel. Dienste wie Otter.ai oder die automatische Untertitelung von YouTube/Zoom können hier helfen.
Praxis-Tipp: Beschreibe in Trainingsvideos die Übung immer auch verbal („Jetzt die Knie beugen, Rücken gerade halten“). Das reduziert den Bedarf an zusätzlicher Audiodeskription und macht das Video für alle verständlicher.
BMI-Rechner und interaktive Tools
Viele Fitness-Webseiten bieten interaktive Tools wie BMI-Rechner, Kalorienrechner oder Trainingsplan-Generatoren an. Diese müssen nach dem BFSG barrierefrei sein:
- Labels: Jedes Eingabefeld (Gewicht, Größe, Alter) braucht ein sichtbares und programmatisch verknüpftes Label (SC 1.3.1, SC 3.3.2).
- Einheiten: Die Maßeinheit (kg, cm) muss Teil des Labels oder als zusätzlicher Hinweis mit
aria-describedbyverknüpft sein. - Ergebnis als Text: Das Ergebnis darf nicht nur als Grafik (z. B. farbige Ampel) angezeigt werden, sondern muss als lesbarer Text verfügbar sein (SC 1.1.1).
- Fehlermeldungen: Bei ungültiger Eingabe (z. B. Buchstaben im Gewichtsfeld) muss eine klare Fehlermeldung erscheinen, die das Feld benennt (SC 3.3.1).
- Tastaturbedienbarkeit: Slider für Gewichtsauswahl müssen per Pfeiltasten bedienbar sein. Im Zweifel: zusätzlich ein normales Eingabefeld anbieten (SC 2.1.1).
Kurspläne und Stundentafeln barrierefrei gestalten
Verwende HTML-Tabellen mit korrekten th- und td-Elementen statt Bild-Grafiken. Füge eine Zusammenfassung (caption) hinzu, die den Inhalt beschreibt, z. B. „Kursplan Montag bis Freitag, Stand April 2026“. Setze scope="col" auf die Wochentage und scope="row" auf die Uhrzeiten.
Stelle sicher, dass die Tabelle auf Mobilgeräten scrollbar ist – wickle sie in einen Container mit overflow-x: auto und tabindex="0". Und biete den Kursplan auch als herunterladbare, barrierefreie PDF an.
Schritt für Schritt: Fitness-Webseite BFSG-fit machen
- Ist-Analyse durchführen: Starte mit einem kostenlosen BFSG-Schnellcheck, um die größten Barrieren zu identifizieren.
- Kursplan umstellen: Ersetze Screenshot-Kurspläne durch HTML-Tabellen mit
caption,thundscope. - Formulare überprüfen: Jedes Eingabefeld im Anmelde- und Checkout-Prozess braucht ein
<label>. Custom-Slider durch native Eingabefelder ersetzen oder mit korrekten ARIA-Rollen ergänzen. - Videos untertiteln: Alle Trainingsvideos mit synchronen Untertiteln versehen. Bei mehr als 20 Videos lohnt sich ein Untertitelungs-Dienstleister.
- Bilder prüfen: Alt-Texte für alle informativen Bilder ergänzen. Dekorative Bilder mit
alt=""kennzeichnen. - Farbkontraste testen: Alle Buttons, Links und Texte auf mindestens 4,5:1 Kontrast prüfen (SC 1.4.3). Tools wie der Contrast Checker von WebAIM helfen.
- Tastaturtest: Die gesamte Webseite einmal nur mit der Tastatur (Tab, Enter, Pfeiltasten) durchnavigieren. Jeder interaktive Bereich muss erreichbar und bedienbar sein.
- Screenreader-Test: Mit NVDA (kostenlos) oder VoiceOver die wichtigsten Seiten durchgehen: Startseite, Kursplan, Anmeldeformular, Checkout.
Häufige Fehler auf Fitness-Webseiten – und die Lösung
Fehler 1: Kursplan nur als Instagram-Grafik
Viele Studios posten den Wochenplan als Bild auf Instagram und binden ihn direkt in die Webseite ein. Für Screenreader ist das unsichtbar. Lösung: Zusätzlich eine echte HTML-Tabelle einbinden.
Fehler 2: „Jetzt Mitglied werden“-Button ohne Tastaturzugang
Custom-Buttons, die per <div onclick="..."> statt <button> umgesetzt sind, können nicht mit der Tastatur fokussiert oder aktiviert werden. Nutze native <button>- oder <a>-Elemente.
Fehler 3: Automatisch startende Hintergrundmusik
Einige Fitness-Webseiten spielen beim Laden Musik ab. Das verstößt gegen SC 1.4.2 (Audio Control) – Nutzer müssen Audio pausieren oder stoppen können, ohne die Seite zu verlassen.
Fehler 4: Overlay-Plugin statt echte Barrierefreiheit
Sogenannte Accessibility-Overlays blenden einen Button für Schriftgröße oder Kontrast ein, beheben aber keine strukturellen Probleme. Fehlende Labels, kaputte Tabellen oder nicht bedienbare Formulare bleiben bestehen. Das BFSG erfordert echte Barrierefreiheit im Code.
Dieser Artikel ersetzt keine Rechtsberatung. Bei konkreten rechtlichen Fragen zum BFSG wende dich an eine spezialisierte Kanzlei. Verstöße können nach § 32 BFSG zu Ordnungswidrigkeiten mit Bußgeldern bis 100.000 € führen.
Häufig gestellte Fragen
Weiterlesen
Ist deine Webseite BFSG-konform?
Finde es in 30 Sekunden heraus – kostenloser Schnellcheck mit sofortigem Ergebnis.
Jetzt kostenlos prüfen →