Barrierefreie Website: für alle nutzbar, nicht nur Pflicht

Vorab: Dieser Abschnitt ist eine Orientierung, keine Rechtsberatung. Die Einordnung Ihres Unternehmens nimmt im Zweifel eine Rechtsanwältin oder ein Rechtsanwalt vor. Gesetzesstand und Auslegung ändern sich; prüfen Sie aktuelle Informationen der zuständigen Stellen.

Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt eine europäische Richtlinie um und gilt seit dem 28. Juni 2025. Es richtet sich nach unserem Verständnis in erster Linie an Anbieter von Produkten und Dienstleistungen für Verbraucher. Im Webbereich ist besonders der elektronische Geschäftsverkehr betroffen, also Online-Shops und Angebote, über die Verbraucher Verträge abschließen. Nicht erfasst sind rein auf Unternehmen ausgerichtete Angebote (B2B). Für Kleinstunternehmen, die Dienstleistungen anbieten, gibt es Ausnahmen; als Kleinstunternehmen gilt, wer weniger als zehn Beschäftigte hat und dessen Jahresumsatz oder Jahresbilanzsumme zwei Millionen Euro nicht übersteigt.

Entscheidungshilfe für ein erstes Bild

1. Verkaufen Sie online an Verbraucher oder schließen Sie online Verträge mit ihnen? Wenn nein, ist eine Betroffenheit unwahrscheinlicher; wenn ja, weiter zu Frage 2.
2. Bieten Sie Dienstleistungen an und sind ein Kleinstunternehmen im oben genannten Sinn? Dann kann eine Ausnahme greifen. Lassen Sie das bestätigen. Wenn Sie Produkte verkaufen, gilt die Ausnahme für Dienstleistungen nicht ohne Weiteres.
3. Ist Ihr Angebot eine Bankdienstleistung, Telekommunikation, Personenbeförderung, ein E-Book oder ein ähnlich geregelter Bereich? Dann bestehen eigene Regeln.
4. Betreiben Sie Ihre Seite im Auftrag Dritter (zum Beispiel Händler auf Ihrer Plattform)? Prüfen Sie Rollen und Verantwortung gesondert.

Unabhängig von der Pflicht gilt: Barrierefreiheit verbessert die Nutzbarkeit für viele Menschen und deckt sich in großen Teilen mit gutem Webdesign. Öffentliche Stellen unterliegen davon getrennten Vorgaben. Welche Pflichten (zum Beispiel Erklärung zur Barrierefreiheit, Feedback-Möglichkeit, Kennzeichnung) im Einzelfall gelten, klärt die rechtliche Prüfung.

Der Kontrast zwischen Text und Hintergrund wird als Verhältnis zweier Helligkeitswerte angegeben. Je höher der Wert, desto besser lesbar. WCAG verlangt auf Stufe AA mindestens 4,5 zu 1 für normalen Text, mindestens 3 zu 1 für großen Text (ungefähr ab 24 Pixel oder fett ab 18,5 Pixel) und für wichtige Bedienelemente und grafische Hinweise ebenfalls 3 zu 1.

Ein häufiger Fall: Hellgrauer Text auf weißem Grund. Das Grau mit dem Farbwert #777777 erreicht auf Weiß rund 4,48 zu 1 und besteht damit knapp nicht; #767676 liegt bei rund 4,54 zu 1 und besteht knapp. Ein so kleiner Unterschied entscheidet, ob ein Entwurf die Anforderung erfüllt. Kostenlose Kontrastrechner in Browser-Entwicklerwerkzeugen und im Netz zeigen den Wert sofort.

Praktische Regeln für Farben

• Prüfen Sie jede Text-Hintergrund-Kombination, auch Text auf Bildern und Verläufen.
• Verlassen Sie sich nie allein auf Farbe: Ein Pflichtfeld nur rot zu markieren, ist für Farbfehlsichtige unsichtbar. Ergänzen Sie ein Symbol oder einen Text.
• Schaltflächen und Eingabefelder brauchen sichtbare Umrandung oder Flächenkontrast von mindestens 3 zu 1 zur Umgebung.
• Links im Fließtext sollten sich nicht allein durch Farbe unterscheiden; eine Unterstreichung ist das sicherste Mittel.
• Testen Sie Ihre Seite auch mit einem Farbfehlsichtigkeits-Simulator und bei hoher Bildschirmhelligkeit im Freien.

Die Farbwelt Ihrer Marke muss deshalb nicht langweilig werden. Mit einer dunkleren Variante der Hauptfarbe für Text und einer helleren für Flächen entstehen lesbare Kombinationen. Mehr zur Auswahl finden Sie unter Farbwelt.

Vorlese-Programme (Screenreader) lesen eine Seite nicht wie ein Foto, sondern als Struktur: Überschriften, Listen, Verweise, Formularfelder. Nutzer springen oft von Überschrift zu Überschrift, wie Sehende die Seite überfliegen. Gute Struktur ist deshalb die Grundlage.

Das meiste davon ist sauberer Code, der auch Suchmaschinen hilft. Wer sauber auszeichnet, gewinnt doppelt.

Audio und Video brauchen Alternativen. Gehörlose Menschen benötigen Untertitel, Blinde eine Beschreibung der wichtigen Bildinhalte, und alle profitieren von einem Transkript, das sich durchsuchen lässt. Bewegung kann Menschen beeinträchtigen oder ablenken; deshalb gibt es klare Regeln:

• Untertitel für aufgezeichnete Videos mit Ton, bei Livebildern nach Möglichkeit ebenfalls.
• Transkript oder Textfassung für reine Audioinhalte.
• Kein Autoplay mit Ton. Wenn etwas automatisch startet und länger als fünf Sekunden läuft, braucht es eine Pause-Möglichkeit.
• Keine blitzenden Elemente. Mehr als dreimal pro Sekunde zu blinken, kann bei empfindlichen Menschen Anfälle auslösen.
• Respekt vor Systemeinstellungen. Wer am Gerät „Bewegung reduzieren“ eingestellt hat, sollte keine großen Animationen sehen.
• Zeit lassen. Karussells und Hinweise, die von selbst wechseln, müssen anhaltbar sein, und wichtige Hinweise sollten nicht nach wenigen Sekunden verschwinden.

Am einfachsten ist es, Animationen sparsam einzusetzen und nur dort, wo sie etwas erklären. Damit gewinnt die Seite zusätzlich an Geschwindigkeit.

1. Zoom-Test: Vergrößern Sie die Seite im Browser auf 200 Prozent. Bleibt alles lesbar und bedienbar, ohne dass Inhalte abgeschnitten werden oder Sie waagerecht scrollen müssen?
2. Tastatur-Test: Bedienen Sie Menü, Formular und eine Schaltfläche nur mit Tabulator, Enter, Leertaste und Esc.
3. Kontrast-Test: Prüfen Sie mit einem Kontrastrechner Fließtext, Links, Schaltflächen und Formularfelder.
4. Struktur-Test: Lassen Sie sich mit einer Browser-Erweiterung die Überschriftenstruktur anzeigen. Gibt es eine H1? Folgen die Ebenen einer Logik?
5. Alt-Text-Test: Deaktivieren Sie Bilder oder lassen Sie die Texte anzeigen. Verstehen Sie die Seite noch?
6. Formular-Test: Schicken Sie ein Formular absichtlich fehlerhaft ab. Erscheint eine verständliche Meldung am richtigen Feld?
7. Vorlese-Kurztest: Aktivieren Sie das Vorlese-Programm Ihres Betriebssystems für wenige Minuten und hören Sie sich die Startseite an. Verstehen Sie, was dort steht?

Notieren Sie jeden Fund mit Seite, Beschreibung und Dringlichkeit. Beheben Sie zuerst, was die Hauptaktion blockiert (Formular, Kontakt, Bestellung). Die Schritte zeigen Ihnen auch, wie eng Gestaltung und Nutzerführung verflochten sind.

Barrierefreiheit entsteht nicht in einem Arbeitsschritt am Ende, sondern verteilt über das ganze Projekt. Die Tabelle zeigt, welche Rolle in welcher Phase welche Aufgabe hat.

Wichtig ist, jede Phase mit einer Prüffrage abzuschließen: Ist das, was jetzt entsteht, ohne Maus, ohne Farbe und ohne Bild verstehbar? So fällt eine Barriere dort auf, wo sie noch wenig kostet.

Ein Fahrradhändler (frei erfunden) betreibt einen Online-Shop für Zubehör. Er ist Anbieter für Verbraucher im Onlinehandel und prüft deshalb mit seiner Rechtsberatung, ob und wie das BFSG für ihn gilt. Unabhängig vom Ergebnis ist der Bestellweg der kritischste Teil. Die Prüfpunkte, entlang des Weges:

Der Händler dokumentiert Ergebnisse, behebt zuerst, was Käufe verhindert, und plant den Rest. Diese Reihenfolge gilt für jede Seite: Hauptfunktion zuerst. Weitere Hinweise zu Shops auf der Seite Online-Shops.