Barrierefreie Webseite: Gesetzliche Vorgaben, Standards und Umsetzung für Betriebe

Barrierefreie Webseite: Pflicht für wen nach dem neuen Gesetz?

Die gesetzliche Verpflichtung zur digitalen Barrierefreiheit betrifft ab dem 28. Juni 2025 private Unternehmen, die Produkte oder Dienstleistungen im elektronischen Geschäftsverkehr an Endverbraucher richten. Geregelt wird dies in Deutschland durch das Barrierefreiheitsstärkungsgesetz (BFSG), das auf dem europäischen European Accessibility Act basiert. Zuvor galten strenge Vorgaben vor allem für Behörden und öffentliche Einrichtungen nach dem Behindertengleichstellungsgesetz.

Betroffen sind insbesondere Online-Shops, Terminbuchungssysteme, Kundenportale und digitale Dienstleistungen im B2C-Bereich. Wer einen reinen Informationsauftritt ohne interaktive Buchungs- oder Kaufprozesse betreibt, fällt oft nicht unter die strengen Kernbereiche, trägt jedoch weiterhin Verantwortung für grundlegende Zugänglichkeit. In Österreich regelt das Barrierefreiheitsgesetz (BaFG) dieselbe EU-Richtlinie mit sehr ähnlichen Vorgaben für Wirtschaftsakteure.

Es gibt eine klare Ausnahme für Kleinstbetriebe. Unternehmen, die weniger als zehn Mitarbeiter beschäftigen und einen Jahresumsatz oder eine Jahresbilanzsumme von höchstens zwei Millionen Euro aufweisen, sind von den Pflichten für Dienstleistungen im Rahmen des BFSG befreit. Trotz dieser Ausnahme lohnt sich die Umstellung frühzeitig, da zugängliche Seiten die Reichweite erhöhen und eine rechtssichere Website vor künftigen Verschärfungen schützt.

• Online-Shops und Warenkorbsysteme
• Elektronische Buchungssysteme für Termine oder Tickets
• Digitale Bank- und Finanzdienstleistungen
• Personenbeförderungsdienste mit Online-Verkauf

Welche Standards gelten für barrierefreie Webseiten?

Als technischer Maßstab für digitale Barrierefreiheit gelten weltweit die Web Content Accessibility Guidelines (WCAG) sowie in Europa die Norm EN 301 549. Für die praktische Umsetzung wird in der Regel die Konformitätsstufe AA der WCAG-Version 2.1 oder 2.2 gefordert. Diese Richtlinien definieren exakt, wie Inhalte strukturiert und dargestellt werden müssen, damit Assistenzsysteme wie Screenreader sie zuverlässig verarbeiten.

Die Richtlinien stützen sich auf vier grundlegende Prinzipien: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit. Jeder Inhalt muss so aufbereitet sein, dass er über mindestens einen Sinn erfasst werden kann. Das bedeutet beispielsweise, dass Bildinformationen nicht verloren gehen, wenn jemand den Bildschirm nicht sieht.

Robustheit bedeutet, dass der Code den Webstandards entspricht und mit unterschiedlichen Browsern sowie Hilfsmitteln fehlerfrei funktioniert. Bei Nordseehelden programmieren wir Webauftritte mit handgeschriebenem Code statt mit überladenen Baukästen. Das erleichtert die Einhaltung technischer Standards spürbar und verhindert unerwartete Darstellungsfehler.

Barrierefreie Website: Checkliste für die Praxis

Eine strukturierte Checkliste hilft Betrieben dabei, bestehende Barrieren auf der eigenen Firmenhomepage systematisch zu identifizieren und zu beheben. Die meisten Fehlerquellen wiederholen sich bei unterschiedlichen Webauftritten und lassen sich mit planvollem Vorgehen korrigieren. Eine fundierte Prüfung beginnt bei der optischen Lesbarkeit und reicht bis zur technischen Code-Struktur.

Der erste Prüfschritt betrifft Farbkontraste und Typografie. Texte müssen sich deutlich vom Hintergrund abheben, wobei ein Kontrastverhältnis von mindestens 4,5:1 für Fließtext Standard ist. Schriftgrößen sollten skalierbar sein, ohne dass das Layout zerbricht. Wer sich bei der Neugestaltung unsicher ist, findet in einer spezialisierten Beratung für Webdesign die nötigen Richtwerte.

Der zweite Prüfschritt konzentriert sich auf die semantische Struktur. Überschriften müssen in einer logischen Hierarchie von H1 bis H6 verlaufen. Formularfelder benötigen fest verknüpfte Beschriftungen, damit Nutzer beim Ausfüllen sofort wissen, welche Eingabe gefordert ist.

• Kontrastverhältnisse prüfen: Mindestens 4,5:1 für normalen Text und 3:1 für Grafiken oder Bedienelemente.
• Tastaturbedienung testen: Jedes Menü, jeder Link und jedes Formularfeld muss ohne Maus mit der Tabulatortaste erreichbar sein.
• Fokus-Hervorhebung sicherstellen: Der aktive Bereich muss für Tastaturnutzer optisch deutlich markiert werden.
• Alternativtexte pflegen: Aussagekräftige Alt-Attribute für alle informativen Bilder hinterlegen.
• Strukturierte Überschriften nutzen: Keine Überschriften-Tags rein für Formatierungszwecke missbrauchen.
• Formulare sauber beschriften: Jedes Eingabefeld braucht ein zugeordnetes Label-Element.

Wie funktioniert barrierefreies Webdesign für Screenreader?

Screenreader übertragen Bildschirmtexte in gesprochene Sprache oder geben sie auf einer Braillezeile aus. Blinde und stark sehbehinderte Menschen navigieren selten zeilenweise durch einen Text, sondern springen anhand von Überschriften, Links oder Landmark-Elementen durch die Seite. Fehlt dieser semantische Rahmen, verliert der Nutzer schnell die Orientierung.

Bilder benötigen präzise Alternativtexte im sogenannten Alt-Attribut. Dient ein Bild nur der Dekoration, bleibt das Attribut leer, damit der Screenreader die Datei überspringt. Zeigt das Bild jedoch ein Produkt, ein Schaubild oder eine Anfahrtsskizze, beschreibt der Text den wesentlichen Inhalt sachlich und knapp.

Ein sauberes responsives Verhalten gehört ebenfalls dazu. Texte und Layouts müssen sich Bildschirmen anpassen, wenn Nutzer die Darstellung im Browser stark vergrößern. Wie das technisch gelingt, erläutert unser Beitrag über Responsive Webdesign für Firmen.

Barrierefreie Website: Beispiel aus dem Betriebsalltag

Ein praktisches Beispiel verdeutlicht den Unterschied zwischen einer herkömmlichen und einer barrierefreien Umsetzung. Ein Handwerksbetrieb aus Friesland bietet auf seiner Seite ein Anfrageformular für Heizungswartungen an. Bei der alten Variante war die Fehlermeldung nur rot markiert, ohne Texthinweis am betroffenen Eingabefeld. Nutzer mit einer Rotschwäche erkannten die Ursache für das Scheitern des Formulars nicht.

Nach der Überarbeitung zeigt das Formular neben der Farbänderung ein eindeutiges Icon und einen erklärenden Text direkt unter dem Pflichtfeld. Zudem sind Telefonnummer und E-Mail-Adresse im Fließtext als echte Links hinterlegt. Dadurch können Besucher direkt per Tastatur oder Sprachbefehl den Anruf starten. Wie Betriebe aus dem Handwerk ihren Auftritt generell gliedern sollten, zeigt unser Ratgeber Webseite für Handwerker.

Ein weiteres alltägliches Beispiel betrifft PDF-Dateien. Wer Speisekarten, Preislisten oder Broschüren zum Download bereitstellt, muss bedenken, dass reine Bild-Scans für Hilfsmittel unlesbar sind. Solche Dokumente müssen digital als strukturierte PDF-Dateien exportiert werden, damit der Text markierbar und auslesbar bleibt.

Overlay-Tools und Barrierefreiheit-Widgets: Helfen sie wirklich?

Viele Betreiber versuchen, gesetzliche Anforderungen mit wenigen Klicks zu erfüllen, indem sie ein JavaScript-Widget oder Overlay-Tool einbinden. Diese Werkzeuge versprechen automatische Anpassungen von Kontrasten, Schriftgrößen und Vorlesefunktionen über ein kleines Symbol am Bildschirmrand. In der Praxis lösen sie das Grundproblem jedoch selten.

Blinde Anwender nutzen bereits eigene, individuell konfigurierte Bildschirmleseprogramme und benötigen die oft fehlerhaften Vorlesefunktionen solcher Widgets nicht. Schlimmer noch: Manche Plugins blockieren die Standardbefehle externer Hilfsmittel oder verdecken wichtige Bedienelemente. Echte Zugänglichkeit lässt sich nicht nachträglich über eine Softwareebene stülpen, sondern entsteht im Quellcode der Seite.

Unternehmen, die ihren Auftritt langfristig absichern wollen, sollten Barrierefreiheit direkt bei der Webentwicklung berücksichtigen. Bei Nordseehelden setzen wir auf individuellen Code ohne unnötigen Ballast, um Standards direkt im Fundament zu verankern. Ergänzende Informationen zu unseren Ansätzen finden Sie auf der Seite Leistungen.

Was kostet die Umstellung auf eine barrierefreie Webseite?

Die Kosten für Barrierefreiheit hängen maßgeblich vom Zustand des aktuellen Webauftritts ab. Handelt es sich um eine gut strukturierte, schlanke Seite, lassen sich Kontraste, Tastaturbedienung und Alternativtexte oft im Rahmen einer regulären technischen Wartung anpassen. Bei älteren Systemen mit verschachtelten Tabellenlayouts oder unzugänglichen Baukästen ist eine Neuentwicklung meist wirtschaftlicher.

Bei einem Homepage Relaunch fallen für die Einhaltung der WCAG-Kriterien meist keine extremen Zusatzkosten an, wenn die Kriterien von Projektbeginn an berücksichtigt werden. Teurer wird es, wenn bestehende Online-Shops mit tausenden Produkten und komplexen Filterfunktionen nachträglich komplett umgebaut werden müssen. Wer vor einer Neuinvestition steht, findet in unserer Übersicht über Webseite erstellen lassen Kosten Orientierung für realistische Budgets.

Kompakte Projekte lassen sich bereits mit kleineren Budgets umsetzen. Bei Nordseehelden startet unser Paket 'Leinen los' für eine Einzelseite bei 499 Euro netto, während mehrseitige Firmenwebseiten im Paket 'Auftakt' für 2.490 Euro netto realisiert werden. Beide Optionen bieten eine solide Basis mit handgeschriebenem Code.

Vorteile abseits des Gesetzes: Warum Barrierefreiheit jedem Betrieb hilft

Barrierefreiheit ist mehr als die bloße Erfüllung gesetzlicher Vorgaben. Wenn Texte klar strukturiert sind, Schriften eine angenehme Größe besitzen und Links eindeutig formuliert werden, verweilen Kunden länger auf der Seite. Auch ältere Menschen oder Personen, die bei hellem Sonnenlicht mit dem Smartphone surfen, profitieren direkt von kontraststarken Layouts.

Gleichzeitig besteht eine enge Verbindung zwischen Barrierefreiheit und Suchmaschinenoptimierung. Suchmaschinen-Bots lesen Webseiten ähnlich wie Screenreader: Sie werten hierarchische Überschriften, Alt-Texte von Bildern und saubere Code-Strukturen aus. Was einem Menschen mit Sehbehinderung hilft, erleichtert auch Google das Erfassen der Seiteninhalte. Mehr dazu vermittelt unser Bereich Laufende Suchmaschinenoptimierung.

Ein barrierefreier Auftritt stärkt das Ansehen des Unternehmens. Kunden bemerken, wenn ein Betrieb Rücksicht auf alle Nutzergruppen nimmt und den Zugang zu Informationen unkompliziert gestaltet. Gerade im regionalen Wettbewerb in Regionen wie Wilhelmshaven, Oldenburg oder Bremen bildet das einen klaren Vertrauensvorteil.