Barrierefreiheit für Vereinswebsites:
Was das BFSG für euch bedeutet
Ab Juni 2025 gelten neue Regeln. Hier steht, was davon euren Verein betrifft — und was ihr konkret tun könnt, ohne gleich die ganze Website neu zu bauen.
Ich hatte 2024 ein Gespräch mit einem Chorvorstand, der panisch anrief: „Kai, ich habe gelesen, dass unsere Website ab nächstem Jahr barrierefrei sein muss. Stimmt das? Müssen wir alles neu machen?“ Die kurze Antwort: Jein. Die lange Antwort steht auf dieser Seite. Und sie ist deutlich weniger beängstigend, als die meisten Artikel im Netz vermuten lassen.
Was ist das BFSG überhaupt?
Das Barrierefreiheitsstärkungsgesetz (BFSG) ist seit dem 28. Juni 2025 in Kraft. Es setzt eine EU-Richtlinie um und betrifft in erster Linie Produkte und Dienstleistungen, die im elektronischen Geschäftsverkehr angeboten werden — also Online-Shops, Bankdienstleistungen, Ticketing-Plattformen.
Für Vereinswebsites ist die Lage weniger dramatisch, als viele denken. Aber es gibt Grauzonen, und einige Bausteine eurer Website könnten durchaus betroffen sein.
Betrifft das BFSG euren Verein?
Kommt drauf an, was ihr auf eurer Website anbietet. Hier die drei typischen Szenarien:
Reine Info-Website
Vereinsvorstellung, Termine, Kontaktformular, vielleicht ein paar Bilder vom letzten Konzert. Nicht direkt vom BFSG betroffen. Trotzdem empfehlenswert, die Grundlagen der Barrierefreiheit umzusetzen — aus Anstand und weil es eurer Reichweite hilft.
Website mit Ticketverkauf oder Online-Anmeldung
Sobald ihr Tickets verkauft, Kursanmeldungen mit Bezahlung anbietet oder Spenden online entgegennehmt, wird es relevant. Der Bezahlvorgang selbst muss barrierefrei sein. Das betrifft Formulare, Buttons, Fehlermeldungen und die gesamte Nutzerführung bis zum Abschluss.
Mitgliederbereich mit digitalem Service
Login-Bereich mit Noten-Downloads, Probenplan-Kalender, interne Dokumente — wenn das ein digitaler Dienst für eure Mitglieder ist, sollte auch das barrierefrei gestaltet sein. Hier argumentieren Juristen unterschiedlich. Sicher ist: Je mehr ihr online anbietet, desto stärker seid ihr im Fokus.
Kleinstunternehmen-Ausnahme
Unternehmen und Organisationen mit weniger als 10 Beschäftigten und unter 2 Millionen Euro Jahresumsatz sind von vielen BFSG-Pflichten ausgenommen. Die meisten Vereine fallen darunter. Aber: Diese Ausnahme betrifft nur die Sanktionen — nicht die grundsätzliche Pflicht, Angebote zugänglich zu gestalten. Und: Andere Gesetze (AGG, BGG) können trotzdem greifen.
Was „barrierefrei“ konkret heißt: 10 Punkte für eure Website.
Der technische Standard heißt WCAG 2.1 AA — Web Content Accessibility Guidelines, Stufe AA. Klingt sperrig, ist aber im Kern eine Sammlung handfester Regeln. Die zehn wichtigsten für Vereinswebsites:
Ausreichende Farbkontraste
Text muss sich deutlich vom Hintergrund abheben. Mindestens 4,5:1 für normalen Text, 3:1 für große Überschriften. Hellgrau auf Weiß? Geht nicht. Das betrifft auch Buttons, Links und Formular-Beschriftungen.
Alle Bilder brauchen Alt-Texte
Screenreader lesen den Alt-Text vor, wenn jemand ein Bild nicht sehen kann. „IMG_2847.jpg“ hilft niemandem. „Chorprobe in der Aula, 30 Sängerinnen stehen im Halbkreis“ schon. Rein dekorative Bilder bekommen ein leeres alt-Attribut.
Tastatur-Navigation muss funktionieren
Manche Menschen bedienen Websites nur mit der Tastatur — ohne Maus. Jeder Link, jeder Button, jedes Formularfeld muss per Tab-Taste erreichbar sein. Und man muss sehen, wo der Fokus gerade liegt. Ein sichtbarer Fokus-Rahmen ist Pflicht, kein optionaler Schnickschnack.
Saubere Überschriften-Hierarchie
H1, H2, H3 — in der richtigen Reihenfolge, ohne Sprünge. Screenreader nutzen die Überschriftenstruktur zur Navigation. Eine Seite, die von H1 direkt auf H4 springt, ist wie ein Buch ohne Inhaltsverzeichnis.
Formulare mit Labels und Fehlermeldungen
Jedes Eingabefeld braucht eine sichtbare Beschriftung — nicht nur einen Platzhaltertext, der beim Klick verschwindet. Fehlermeldungen müssen konkret sein: „Bitte E-Mail-Adresse eingeben“ statt nur „Fehler in Feld 3″.
Responsive Design (Mobil-Tauglichkeit)
Die Seite muss auf Smartphones genauso bedienbar sein wie am Desktop. Texte müssen bis 200 % vergrößerbar sein, ohne dass Inhalte abgeschnitten werden oder sich überlappen. Klingt selbstverständlich — ist es auf vielen Vereinsseiten aber nicht.
Links mit erkennbarem Ziel
„Hier klicken“ sagt einem Screenreader-Nutzer gar nichts. Besser: „Konzertkarten für den 12. Mai bestellen“. Jeder Link sollte auch ohne den umgebenden Text verständlich sein.
Videos mit Untertiteln
Falls ihr Videos auf der Website habt — etwa Konzertmitschnitte oder Begrüßungen vom Vorstand —, brauchen die Untertitel. YouTube generiert automatische Untertitel, die meistens eine brauchbare Grundlage sind. Nachbearbeiten lohnt sich trotzdem.
Skip-Link am Seitenanfang
Ein unsichtbarer Link ganz oben auf der Seite, der bei Tastaturnutzung erscheint: „Zum Hauptinhalt springen“. Damit können Screenreader-Nutzer das Menü überspringen und direkt zum Inhalt gelangen. Zwei Zeilen Code, große Wirkung.
Semantisches HTML statt Design-Tricks
Buttons sollen als <button> programmiert sein, nicht als gestylte <div>-Elemente. Navigationen als <nav>, nicht als unbenannte Listen. Der Code unter der Oberfläche muss genauso sauber sein wie das, was man sieht. Das merkt kein Besucher — aber jeder Screenreader.
Nicht theoretisch — das finde ich regelmäßig bei echten Vereinen vor.
| Barriere | Wen das betrifft | Lösung |
|---|---|---|
| Hellgrauer Text auf weißem Grund | Menschen mit Sehschwäche, ältere Besucher — also ein guter Teil eurer Mitglieder über 60 | Kontrast auf mindestens 4,5:1 erhöhen. Dunklere Textfarbe wählen, nicht an der Designästhetik hängen |
| Bilder ohne Alt-Text | Blinde und sehbehinderte Besucher, die Screenreader nutzen | In WordPress: Alt-Text-Feld in der Mediathek ausfüllen. Dauert 10 Sekunden pro Bild |
| PDF-Dateien als Hauptinhalt | Screenreader können schlecht formatierte PDFs nicht lesen. Auf Mobilgeräten sind PDFs generell unhandlich | Wichtige Infos direkt auf der Website veröffentlichen. PDFs nur ergänzend anbieten |
| Menü ohne Tastatur-Bedienung | Menschen mit motorischen Einschränkungen, die keine Maus verwenden können | Sauberes HTML verwenden, Focus-Styles nicht entfernen, Dropdown-Menüs testen |
| Termine nur als Bild-Grafik | Screenreader sehen keine Bildinhalte. Suchmaschinen übrigens auch nicht | Termine als HTML-Text publizieren. Grafiken nur als Ergänzung, nicht als einzige Quelle |
| Kontaktformular ohne Label-Zuordnung | Screenreader können Formularfelder nicht korrekt vorlesen, Nutzer wissen nicht, was sie eingeben sollen | Jedes Input-Feld mit einem zugeordneten <label>-Element versehen |
Barrierefreiheit ist kein Pflichtprogramm. Es ist eine Einladung.
Mal ehrlich: Vereine leben von Mitgliedern. Je mehr Menschen eure Website nutzen können, desto mehr potenzielle Mitglieder, Spender, Konzertbesucher erreicht ihr. Ein Chor, dessen Website für Sehbehinderte nicht lesbar ist, schließt automatisch einen Teil seines Publikums aus. Und das sind nicht wenige:
Menschen in Deutschland leben mit einer schweren Behinderung
Menschen über 65 — viele profitieren von besseren Kontrasten und größerer Schrift
aller Menschen profitieren von klarer Navigation, guten Kontrasten und sauberem Code
Was vereinsbühne für Barrierefreiheit tut
Bei uns ist Barrierefreiheit kein Aufpreis-Feature, sondern fester Bestandteil jeder Website, die wir bauen:
- WCAG 2.1 AA als Standard — jede neue Website wird von Anfang an nach diesen Richtlinien gebaut
- Semantisches HTML — korrekte Überschriftenstruktur, saubere Formulare, echte Buttons statt gestylter Divs
- Kontrast-geprüfte Farbpalette — unsere Markenfarben sind auf WCAG-Konformität getestet
- Tastatur-Navigation — jedes Element per Tab erreichbar, mit sichtbarem Fokus-Rahmen
- Alt-Texte — wir fragen bei jeder Bildlieferung nach einer Beschreibung und pflegen sie ein
- Skip-Links — auf jeder Seite automatisch integriert
- Responsive bis 200 % Zoom — kein Inhalt verschwindet beim Vergrößern
- Jährliches WCAG-Audit — im Baustein „Barrierefreiheit (BFSG)“ enthalten, mit Bericht und Handlungsempfehlungen
Was wir nicht garantieren können: 100 % Perfektion bei nutzergenerierten Inhalten (also Texte und Bilder, die ihr selbst einpflegt). Aber wir schulen euch darin, worauf ihr achten müsst — in einer kurzen Online-Schulung, die wir aufnehmen, damit auch der nächste Vorstand sie sich anschauen kann.
Testet eure Website selbst.
Ihr müsst kein Audit beauftragen, um zu wissen, wo ihr ungefähr steht. Fünf Handgriffe reichen für ein erstes Bild. Wenn dabei mehr als ein Punkt hakt, lohnt sich ein genauerer Blick.
1 · Der Tab-Test
Drückt auf eurer Startseite wiederholt die Tabulator-Taste. Erreicht ihr alle Links, Buttons und Formularfelder? Und seht ihr jederzeit, wo ihr gerade seid? Wenn der Fokus unsichtbar bleibt oder irgendwo hängen bleibt, kommt niemand ohne Maus durch eure Seite.
2 · Der Zoom-Test
Zoomt im Browser auf 200 Prozent. Ist alles noch lesbar und bedienbar, oder schiebt sich Text übereinander und Buttons verschwinden aus dem Bild? Viele ältere Menschen surfen dauerhaft vergrößert.
3 · Der Kontrast-Test
Nehmt eure Text- und Hintergrundfarbe und prüft sie auf webaim.org/resources/contrastchecker. Normaler Fließtext braucht ein Verhältnis von mindestens 4,5 : 1. Hellgrau auf Weiß fällt fast immer durch.
4 · Der Bilder-Test
Schaltet die Bilder im Browser ab. Bleibt der Inhalt verständlich? Wo vorher ein Foto war, sollte jetzt eine sinnvolle Beschreibung stehen — „Chorprobe in der Aula“ statt „IMG_2847.jpg“.
5 · Der Handy-Test
Öffnet die Seite auf dem Smartphone. Sind Buttons und Links groß genug, um sie sicher zu treffen? Als Faustregel gelten 44 mal 44 Pixel — alles darunter wird für Menschen mit zittrigen Händen zur Geduldsprobe.
Wenn bei einem dieser fünf Tests etwas nicht funktioniert, habt ihr eine Barriere gefunden. Meistens sind es Kleinigkeiten — ein Kontrast hier, ein fehlendes Label dort. Selten muss eine Website dafür neu gebaut werden.
Zum Thema Barrierefreiheit.
Drohen unserem Verein Strafen, wenn die Website nicht barrierefrei ist?
Müssen wir unsere Website komplett neu bauen?
Gibt es ein offizielles Barrierefreiheits-Zertifikat?
Was kostet es, eine bestehende Website barrierefrei zu machen?
Reicht ein Overlay-Plugin für Barrierefreiheit?
Gilt das BFSG auch für unseren Newsletter?
Das könnte euch auch helfen.
Unsicher, wie barrierefrei
eure Website ist?
Im Erstgespräch schauen wir uns eure aktuelle Seite gemeinsam an. Wir prüfen die wichtigsten Punkte und sagen euch ehrlich, wo ihr steht — und was sich mit wenig Aufwand verbessern lässt.
Erstgespräch buchen →