Barrierefreies Webdesign: Ein Schritt in Richtung inklusiver Online-Erfahrungen

Kurz gesagt: Barrierefreies Webdesign heißt, eine Website so zu bauen, dass Menschen mit Behinderungen sie ohne fremde Hilfe finden, verstehen und bedienen können, auch mit Screenreader, nur mit der Tastatur oder mit eingeschränktem Sehen. Seit dem 28. Juni 2025 ist das für viele Unternehmen Pflicht: Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt für Websites und Shops, über die Verbraucher einen Vertrag abschließen können. Ausgenommen sind nur Kleinstunternehmen, die Dienstleistungen anbieten. Fachlicher Maßstab sind die WCAG, die Richtlinien des W3C für barrierefreie Webinhalte.

Vielleicht hast du vom BFSG gehört, vielleicht hat dich ein Kunde auf eine unlesbare Schaltfläche hingewiesen, vielleicht planst du ohnehin eine neue Website. Die Fragen sind meist dieselben: Muss ich das? Was genau muss meine Website können? Und was kostet es, sie umzubauen? Die Antworten stehen hier, in dieser Reihenfolge.

Willst du gleich wissen, wo deine Website steht? Unser kostenloser Barrierefreiheits-Test prüft eine Seite automatisch. Planung, Prüfbericht und Umsetzung übernehmen wir als Agentur für barrierefreies Webdesign.

Was ist barrierefreies Webdesign?

Das BFSG nennt Produkte und Dienstleistungen barrierefrei, wenn Menschen mit Behinderungen sie „in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe auffindbar, zugänglich und nutzbar“ finden (§ 3 Abs. 1 BFSG, abgerufen 25.10.2026). Für eine Website heißt das zum Beispiel:

• Ein blinder Nutzer lässt sich die Seite vom Screenreader vorlesen und versteht, was auf Bildern zu sehen ist.
• Jemand, der keine Maus bedienen kann, erreicht jeden Link und jedes Formularfeld mit der Tastatur.
• Eine Nutzerin mit Sehschwäche vergrößert die Schrift auf 200 %, ohne dass Inhalte verschwinden (WCAG 2.2, Kriterium 1.4.4).
• Ein gehörloser Nutzer liest die Untertitel eines Erklärvideos.

Die WCAG (Web Content Accessibility Guidelines) des W3C ordnen diese Anforderungen nach vier Grundsätzen: wahrnehmbar, bedienbar, verständlich und robust. Robust heißt, dass auch Hilfsmittel wie Screenreader den Code zuverlässig auslesen können. Aktuell ist WCAG 2.2, seit dem 5. Oktober 2023 Empfehlung des W3C (W3C, What’s New in WCAG 2.2). Gängiges Ziel ist die Stufe AA. Die Erfolgskriterien im Einzelnen erklärt unser Beitrag zu den WCAG-Richtlinien.

Wer muss seit dem 28. Juni 2025 barrierefrei sein?

Das BFSG gilt für bestimmte Dienstleistungen, die nach dem 28. Juni 2025 für Verbraucher erbracht werden (§ 1 Abs. 3 BFSG). Für die meisten Unternehmen zählt davon eine Gruppe: Dienstleistungen im elektronischen Geschäftsverkehr. Gemeint sind Angebote über Websites und Apps, die „auf individuelle Anfrage eines Verbrauchers im Hinblick auf den Abschluss eines Verbrauchervertrags erbracht werden“ (§ 2 Nr. 26 BFSG). Das trifft Onlineshops, aber auch Online-Terminbuchung, Buchungsstrecken und Vertragsabschlüsse über die Website.

Kleinstunternehmen im Sinne des Gesetzes beschäftigt weniger als zehn Personen und hat entweder höchstens 2 Millionen Euro Jahresumsatz oder höchstens 2 Millionen Euro Jahresbilanzsumme (§ 2 Nr. 17 BFSG). Beide Bedingungen müssen zusammen erfüllt sein, die Mitarbeiterzahl und eine der beiden Geldgrenzen.

Wer unter das Gesetz fällt, muss zusätzlich in einer Barrierefreiheitserklärung beschreiben, wie das Angebot die Anforderungen erfüllt, und diese Information selbst barrierefrei zugänglich machen (§ 14 BFSG mit Anlage 3). Übergangsfristen bis höchstens 27. Juni 2030 gibt es nur für Verträge, die vor dem 28. Juni 2025 geschlossen wurden, und für Produkte, die schon vorher zur Erbringung der Dienstleistung eingesetzt wurden (§ 38 BFSG).

Die Aufsicht führt die Marktüberwachungsstelle der Länder (MLBF) in Magdeburg. Die MLBF fordert bei Mängeln zur Korrektur auf und kann als letzten Schritt das Angebot untersagen (§ 30 BFSG). Wer vorsätzlich oder fahrlässig eine Dienstleistung anbietet, die die Anforderungen nicht erfüllt, handelt ordnungswidrig, das Bußgeld kann bis zu 100.000 € betragen (§ 37 BFSG). Zu Abmahnungen wegen fehlender Barrierefreiheit haben wir einen eigenen Beitrag geschrieben.

Diese Hinweise ersetzen keine Rechtsberatung. Ob dein Angebot unter das BFSG fällt, klärst du im Zweifel mit deinem Anwalt. Wir prüfen die Technik und ordnen die Befunde ein.

Was eine barrierefreie Website können muss

Die häufigsten Fehler sind seit Jahren dieselben. Die Organisation WebAIM prüft jedes Jahr die Startseiten der eine Million meistbesuchten Websites automatisch. Im Bericht 2026 hatten 95,9 % mindestens einen erkennbaren WCAG-Fehler; an der Spitze standen zu schwacher Textkontrast (83,9 % der Seiten), fehlende Alternativtexte für Bilder (53,1 %) und Formularfelder ohne Beschriftung (51 %) (WebAIM Million 2026). Daraus ergibt sich, wo du zuerst hinschauen solltest.

Kontrast und Farbe

Text braucht genug Kontrast zum Hintergrund, für normalen Fließtext mindestens 4,5:1 (WCAG 2.2, Kriterium 1.4.3). Information darf nicht allein über Farbe laufen: Ein rot markiertes Pflichtfeld braucht zusätzlich ein Sternchen oder einen Hinweis. Wie stark Farbsehschwächen die Wahrnehmung verändern, zeigt dieses Beispiel:

Rot und Grün, die im Original klar getrennt sind, fallen zu fast derselben Farbe zusammen. Eine Fehlermeldung, die nur rot statt grün ist, sieht diese Person nicht. Mehr zu Farbsehschwächen und Kontrastprüfung steht in unserem Beitrag zu Farben im barrierefreien Webdesign.

Bedienung mit der Tastatur

Jedes Element, das man anklicken kann, muss auch mit der Tabulatortaste erreichbar und mit Enter oder Leertaste bedienbar sein. Der Fokus muss sichtbar sein, also ein deutlicher Rahmen um das gerade gewählte Element. Ein Link „Zum Inhalt springen“ ganz oben spart Tastaturnutzern das Durchklicken der ganzen Navigation. Ausklappmenüs, Schieberegler und Pop-ups sind die häufigsten Fallen.

Bilder, Videos und Dokumente

• Informative Bilder bekommen einen Alternativtext, der sagt, was das Bild zeigt oder bedeutet. Rein dekorative Bilder bekommen ein leeres Alt-Attribut, damit der Screenreader sie überspringt.
• Videos brauchen Untertitel, Audio-Inhalte eine Textfassung.
• PDFs und andere Dokumente, die zum Angebot gehören, müssen ebenfalls zugänglich sein, oder die Inhalte stehen zusätzlich als HTML-Seite bereit.

Formulare

Jedes Feld braucht eine sichtbare Beschriftung, die im Code mit dem Feld verbunden ist. Platzhaltertext im Feld reicht nicht, er verschwindet beim Tippen. Fehlermeldungen nennen das Feld und sagen, was zu tun ist („Bitte gib eine Postleitzahl mit fünf Ziffern ein“), statt nur das Feld rot zu färben. Für Onlineshops und Buchungsstrecken ist das der wichtigste Prüfpunkt, weil dort der Vertrag zustande kommt.

Struktur, Überschriften und Links

Screenreader-Nutzer springen über Überschriften durch eine Seite wie andere mit den Augen. Deshalb gibt es genau eine H1, die Ebenen folgen ohne Sprung (H2, dann H3), und Navigation, Hauptinhalt und Fußbereich sind im Code als solche ausgezeichnet. Linktexte sagen, wohin sie führen: „Preise für den Prüfbericht“ statt „hier klicken“.

Verständliche Sprache

Kurze Sätze, bekannte Wörter, Fachbegriffe erklärt: Das hilft Menschen mit Lernschwierigkeiten, Nicht-Muttersprachlern und allen, die unterwegs auf dem Handy lesen. Für manche Zielgruppen lohnt sich zusätzlich eine Fassung in Leichter Sprache, einer Sprachform mit festen Regeln, oder in Einfacher Sprache (Gesellschaft für deutsche Sprache). Ob deine Texte verständlich genug sind, prüfen wir auf Wunsch mit.

Wie mache ich eine Website barrierefrei?

So gehen wir bei bestehenden Websites vor, und so kannst du es auch selbst angehen:

• Schritt 1: Automatisch testen. Werkzeuge wie die Browser-Erweiterung WAVE, axe oder Lighthouse in Chrome finden Kontrastfehler, fehlende Alternativtexte und unbeschriftete Felder in Sekunden. Erkennen können sie aber nur, was sich maschinell prüfen lässt. Ob ein Alternativtext das Bild sinnvoll beschreibt oder ob ein Ablauf verständlich ist, sieht kein Werkzeug.
• Schritt 2: Von Hand prüfen. Bediene die wichtigsten Seiten nur mit der Tastatur, lies sie mit einem Screenreader (NVDA unter Windows ist kostenlos, VoiceOver ist auf Mac und iPhone eingebaut) und vergrößere die Schrift auf 200 %.
• Schritt 3: Priorisieren. Zuerst die Wege, auf denen Kunden einen Vertrag schließen: Warenkorb, Kasse, Buchung, Kontaktformular. Danach Navigation und Vorlagen, die auf allen Seiten wirken.
• Schritt 4: Umsetzen. Die meisten Fehler sitzen im Theme und in wiederkehrenden Bausteinen. Wer dort ansetzt, behebt einen Fehler auf allen Seiten auf einmal.
• Schritt 5: Barrierefreiheitserklärung veröffentlichen, mit Kontaktweg für Nutzer, die auf eine Barriere stoßen.
• Schritt 6: Dranbleiben. Jede neue Seite, jedes Plugin-Update und jeder neue Text kann neue Barrieren bringen. Prüfe neue Inhalte vor der Veröffentlichung und lass die Website regelmäßig nachprüfen.

Ein Overlay-Widget, das sich als Knopf über die Seite legt, ersetzt diese Arbeit nicht. Warum, steht in unserem Beitrag zu Accessibility-Overlays.

Barrierefreies Webdesign und SEO

Barrierefreiheit und Suchmaschinenoptimierung haben viele gemeinsame Bausteine: eine saubere Überschriftenstruktur, beschreibende Alternativtexte, aussagekräftige Linktexte, Texte statt Text in Bildern und eine Seite, die ohne Maus und auf dem Handy funktioniert. Suchmaschinen und KI-Systeme lesen eine Website ähnlich wie ein Screenreader: über den Code, nicht über das Aussehen. Wer barrierefrei baut, macht es ihnen leichter, Inhalte zu verstehen. Ein eigener Rankingfaktor „Barrierefreiheit“ ist von Google nicht bestätigt. Der Nutzen liegt in den gemeinsamen Grundlagen.

Was kostet barrierefreies Webdesign?

Der Preis hängt davon ab, ob du eine bestehende Website umbaust oder neu baust, wie viele Seitenvorlagen es gibt und wie viele Fehler im Theme stecken. Unsere Preise stehen offen auf der Seite barrierefreies Webdesign (Stand 25.10.2026, netto):

Beauftragst du die Umsetzung binnen 30 Tagen nach dem Prüfbericht, rechnen wir den Grundpreis des Berichts an, höchstens bis zur Hälfte des Umsetzungspreises. Für eine kleine Website mit 5 Seiten und 6 Stunden Umsetzung ergibt das laut unserer Beispielrechnung 1.235 € netto. Den tatsächlichen Umfang zeigt erst der Prüfbericht.

Woran du eine gute Agentur für barrierefreies Webdesign erkennst

• Prüfung von Hand: mit Tastatur und Screenreader, nicht nur mit einem automatischen Werkzeug.
• Klarer Maßstab: WCAG-Version und Stufe stehen im Angebot, das Ergebnis in einem Bericht.
• Kein Overlay als Lösung.
• Ehrlich bei Rechtsfragen: Die Agentur sagt dir, was rechtlich zu klären ist, und schickt dich dafür zum Anwalt, statt Rechtssicherheit zu versprechen.
• Erklärung und Einweisung: Die Barrierefreiheitserklärung gehört dazu, ebenso eine Einweisung, wie neue Inhalte barrierefrei bleiben.
• Der Preis ist vorher klar, mit fester Prüfung und abgerechneten Stunden statt offener Pauschale.

Häufige Fragen zu barrierefreiem Webdesign

Was ist barrierefreies Webdesign?

Barrierefreies Webdesign gestaltet und programmiert Websites so, dass Menschen mit Behinderungen sie ohne fremde Hilfe nutzen können, etwa mit Screenreader, nur mit der Tastatur oder mit vergrößerter Schrift. Maßstab sind die WCAG des W3C mit den Grundsätzen wahrnehmbar, bedienbar, verständlich und robust, meist auf Stufe AA.

Muss meine Website seit Juni 2025 barrierefrei sein?

Wenn Verbraucher über deine Website einen Vertrag schließen können, etwa in einem Onlineshop oder über eine Online-Buchung, gilt seit dem 28. Juni 2025 das BFSG. Ausgenommen sind Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens 2 Millionen Euro Jahresumsatz oder Bilanzsumme, wenn sie Dienstleistungen anbieten. Im Zweifel klärt das dein Anwalt.

Was passiert, wenn meine Website nicht barrierefrei ist?

Die Marktüberwachungsstelle der Länder fordert zur Korrektur auf und kann als letzten Schritt das Angebot untersagen. Ein Verstoß ist eine Ordnungswidrigkeit, für die das BFSG Bußgelder bis zu 100.000 € vorsieht. Dazu kommt das Risiko von Abmahnungen. Vor allem aber verlierst du Kunden, die deinen Shop oder dein Formular nicht bedienen können.

Wie mache ich meine Website barrierefrei?

Teste sie zuerst automatisch, zum Beispiel mit WAVE oder unserem kostenlosen Barrierefreiheits-Test, und prüfe sie dann von Hand mit Tastatur und Screenreader. Behebe die Fehler zuerst in Kasse, Buchung und Formularen, dann in Theme und Navigation. Danach folgen die Barrierefreiheitserklärung und regelmäßige Nachprüfungen.

Was kostet eine barrierefreie Website?

Bei uns kostet ein Prüfbericht für bis zu 10 Seiten 790 € netto, die Umsetzung an einer bestehenden Website beginnt bei 890 € für bis zu 6 Stunden. Eine neue barrierefreie Website beginnt bei 3.500 € netto. Wie viel Arbeit eine bestehende Website macht, zeigt erst der Prüfbericht.

Reicht ein Barrierefreiheits-Plugin oder Overlay?

Nein. Ein Overlay legt Bedienknöpfe über die Seite, ändert aber nicht den Code darunter. Fehlende Beschriftungen, falsche Überschriften oder ein Formular, das sich nicht per Tastatur ausfüllen lässt, bleiben bestehen. Barrierefreiheit entsteht im Theme, in den Bausteinen und in den Inhalten.

Hilft Barrierefreiheit bei SEO?

Indirekt ja. Barrierefreiheit und SEO teilen viele Grundlagen: saubere Überschriften, Alternativtexte, verständliche Linktexte und eine Seite, die auf dem Handy funktioniert. Suchmaschinen lesen eine Website über den Code, ähnlich wie ein Screenreader. Einen eigenen Rankingfaktor Barrierefreiheit hat Google nicht bestätigt.

Woran erkenne ich eine gute Agentur für barrierefreies Webdesign?

Eine gute Agentur prüft mit Tastatur und Screenreader statt nur automatisch, nennt WCAG-Version und Stufe als Maßstab, rät von Overlays ab und verspricht keine Rechtssicherheit. Dazu gehören ein Bericht, die Barrierefreiheitserklärung und ein fester Preis für die Prüfung.

Fazit: Barrierefrei ist gut gemacht

Barrierefreies Webdesign ist für viele Unternehmen seit Juni 2025 Pflicht, und es lohnt sich auch ohne Pflicht: Eine Website, die mit Tastatur, Screenreader und großer Schrift funktioniert, ist für alle leichter zu bedienen. Fang mit einem Test an, behebe zuerst die Fehler in Kasse, Buchung und Formularen, und halte neue Inhalte von Anfang an barrierefrei.

Du willst wissen, wo deine Website steht? Starte mit unserem kostenlosen Barrierefreiheits-Test oder buch ein kostenloses BFSG-Erstgespräch. Prüfbericht, Umbau oder neue Website übernehmen wir als Agentur für barrierefreies Webdesign, mit WCAG 2.2 AA als Standard.