Webseiten barrierefrei machen nach WCAG und BFSG
Viele Menschen bedienen das Netz mit der Tastatur, mit einem Screenreader oder mit großer Schrift. Wir prüfen deine Website Element für Element, so wie sie es tun, und beheben jede Barriere, bis alle ans Ziel kommen.
Animation: Eine kaputte Website schwebt in acht Teilen im Raum, mit Barrieren wie neongrüner Schrift auf Weiß, zu kleiner Schrift, einem Bild ohne Alternativtext, einem winzigen Knopf, einem Feld ohne Beschriftung, einem Video ohne Untertitel und einem Menü nur für die Maus. Ein leuchtender Fokusrahmen springt wie bei der Tabulatortaste von Teil zu Teil. Jedes Teil dreht sich um, zeigt die reparierte Fassung und fliegt an seinen Platz, bis die ganze Seite für alle bedienbar ist.
Barrierefreie Webseiten erreichen alle, auch die, an die niemand gedacht hat
Wer heute Webseiten barrierefrei machen will, muss keine Website von Grund auf neu bauen. Meist sind es einige Dutzend Fehler in Vorlagen und Farben, die sich durch alle Unterseiten ziehen. Wir finden sie, erklären sie verständlich und beheben sie so, dass deine Seite nach WCAG 2.2 in der Stufe AA funktioniert und die Anforderungen des BFSG erfüllt.
Dabei bleibt dein Design erhalten. Barrierefreiheit heißt nicht grau und langweilig, sie heißt klar. Diese Website ist selbst so gebaut, mit viel Bewegung, die du oben rechts jederzeit anhalten kannst, mit großer Schrift, kräftigen Kontrasten und einer Gliederung, die auch ein Screenreader vorlesen kann.
Sechs Barrieren, die fast jede Website hat
- 01Kontrast
Hellgrün auf Weiß sieht im Entwurf frisch aus und ist für viele Augen schlicht unsichtbar. Für normalen Text verlangt WCAG ein Verhältnis von mindestens 4,5 zu 1. Wir behalten deine Markenfarbe und setzen sie dort ein, wo sie wirkt, als Fläche hinter dunkler Schrift.
- 02Schriftgröße
Kleine graue Schrift mit engem Zeilenabstand zwingt jeden zum Zoomen, auch Menschen ohne Sehschwäche, die am Handy in der Bahn lesen. Lesbar heißt mindestens 16 Pixel, genug Zeilenabstand und ein Layout, das bei 200 Prozent Zoom nicht zerbricht.
- 03Alternativtext
Ein Screenreader liest vor, was im Code steht. Fehlt der Alternativtext, hört eine blinde Kundin nur den Dateinamen. Ein kurzer Satz, der sagt, was auf dem Bild zu sehen ist, reicht meistens aus und kostet keine Minute.
- 04Linktext
Wer mit einem Screenreader unterwegs ist, springt oft von Link zu Link. Dreimal „hier klicken“ hintereinander sagt dann nichts. Ein Linktext, der das Ziel beschreibt, hilft allen, auch Suchmaschinen, die den Text ebenso auswerten.
- 05Fokus
Viele Menschen bedienen eine Seite nur mit der Tastatur, etwa wegen Zittern in den Händen oder weil sie blind sind. Ohne sichtbaren Fokus wissen sie nicht, welcher Knopf gerade aktiv ist. Ein deutlicher Rahmen um das aktive Element löst das.
- 06Fehlermeldung
Ein rot umrandetes Feld ohne Erklärung bemerkt nicht jeder, und wer Rot nicht sieht, bemerkt es gar nicht. Eine gute Fehlermeldung steht als Text am Feld, sagt, was fehlt, und schlägt vor, wie es richtig geht.
Barrierefreiheit betrifft mehr Menschen, als du denkst
Wer an Barrierefreiheit denkt, denkt oft an Menschen im Rollstuhl, und die brauchen im Netz selten etwas Besonderes. Die meisten Hürden auf Webseiten treffen Menschen, die schlecht sehen, die nur die Tastatur nutzen, die einen Screenreader verwenden oder die lange Sätze schwer verstehen. Dazu kommen alle, denen es nur heute so geht: mit dem Handy in der Sonne, mit dem Arm im Gips oder mit dem Kind auf der Hüfte.
Eine barrierefreie Website ist deshalb für alle besser. Klare Kontraste, große Knöpfe, verständliche Fehlermeldungen und saubere Überschriften helfen jedem Besucher, und sie helfen Suchmaschinen, die deine Seite ebenfalls Wort für Wort lesen. Jede Hürde, die im Bestellweg wegfällt, ist ein Grund weniger, kurz vor dem Ziel abzubrechen und beim Mitbewerber zu kaufen.
Eine Seite, fünf Arten, sie wahrzunehmen
- 01 Mit deinen Augen
So sieht die Terminseite im Entwurf aus. Freie Termine sind grün, belegte rot, darunter ein kleiner Hinweis in Grau. Auf dem Bildschirm des Designers wirkt das aufgeräumt und klar.
- 02 Grauer Star
Mit Grauem Star wird alles milchig und blass, Kontraste verschwinden. Der kleine graue Hinweis ist nicht mehr zu lesen, die Uhrzeiten nur noch mit Mühe. Mit dem Alter trübt sich bei sehr vielen Menschen die Linse auf diese Weise.
- 03 Rot-Grün-Schwäche
Etwa jeder zwölfte Mann unterscheidet Rot und Grün schlecht. Für ihn sehen freie und belegte Termine gleich aus. Die Lösung ist einfach: zusätzlich ein Wort oder ein Zeichen, nie nur Farbe.
- 04 Tunnelblick
Bei fortgeschrittenem Glaukom bleibt nur die Mitte scharf. Wer die Seite so sieht, findet den Knopf am Rand nicht und braucht eine klare Reihenfolge, die auch bei starker Vergrößerung funktioniert.
- 05 Screenreader
Blinde Menschen hören die Seite. Der Screenreader liest nur, was im Code steht. Hier sagt er Schaltfläche, neun Uhr, aber nicht, ob der Termin frei ist, und das Logo heißt nur header final 2.
Seit Juni 2025 gilt das BFSG, auch für viele Websites
Das Barrierefreiheitsstärkungsgesetz verpflichtet Unternehmen, die online Dienstleistungen für Verbraucher anbieten, ihre Angebote barrierefrei zu gestalten. Dazu zählen Onlineshops, Buchungs- und Terminstrecken, Online-Banking, Tickets für den Personenverkehr und E-Books. Wer einen Vertrag im Netz schließen lässt, ist meistens betroffen.
Als Maßstab gilt die europäische Norm EN 301 549, die sich für Webinhalte auf die WCAG in der Stufe AA stützt. Dazu kommt eine Erklärung zur Barrierefreiheit, in der du beschreibst, wie dein Angebot die Anforderungen erfüllt. Ausgenommen sind Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz, wenn sie Dienstleistungen anbieten.
Die Länder überwachen die Einhaltung gemeinsam über eine Marktüberwachungsstelle in Magdeburg. Bei Verstößen sind Bußgelder bis zu 100.000 Euro möglich, und auch Abmahnungen durch Mitbewerber oder Verbände sind denkbar. Ein Blick in den Ratgeber zum BFSG lohnt sich deshalb in jedem Fall.
Prüfen, beheben, barrierefrei bauen
Manche brauchen zuerst eine ehrliche Bestandsaufnahme, andere wollen gleich loslegen. Unsere Leistungen greifen ineinander, du kannst aber auch nur einen Teil buchen und den Rest mit deiner eigenen Agentur umsetzen.
- Prüfung nach WCAG 2.2
Prüfung nach WCAG 2.2 mit Bericht und Prioritäten
- Erklärung nach BFSG
Die Pflichtangaben nach BFSG, ehrlich und vollständig
- Betreuung und Nachprüfung
Neue Inhalte, Updates und Nachprüfung im Blick
- Umbau bestehender Websites
Fehler im Code, in Farben und Texten beheben
- Barrierefreier Onlineshop
Vom Produkt bis zur bezahlten Bestellung ohne Hürde
- Barrierefreie PDF-Dokumente
Formulare, Preislisten und AGB, die vorgelesen werden
- Barrierefreier Neubau
Von Anfang an für alle geplant und gebaut
- Schulungen zur Barrierefreiheit
Damit Redaktion und Entwicklung selbst sicher werden
Kein Plugin macht eine Website barrierefrei
Plugins, die ein kleines Symbol einblenden und ein Menü mit Schriftgrößen und Kontrastmodus öffnen, versprechen schnelle Rechtssicherheit. Die eigentlichen Fehler im Code bleiben aber, und Menschen mit Screenreader stören solche Werkzeuge oft mehr, als sie helfen.
- Ein Code-Schnipsel macht die ganze Seite barrierefrei
- Ein Symbol unten rechts erfüllt das BFSG
- Fertig in fünf Minuten, ohne den Code anzufassen
- Besucher stellen sich ihre Seite selbst zurecht
- Fehler im Code beheben, statt sie zu überdecken
- Mit Tastatur und Screenreader selbst prüfen
- Ein Bericht, der sagt, was zuerst dran ist
- Die Seite funktioniert mit den Hilfsmitteln, die Menschen schon haben
Wir arbeiten deshalb am Ursprung. Wir prüfen deine Website von Hand und mit Werkzeugen, beheben die Fehler in Vorlagen, Farben, Texten und Formularen und testen das Ergebnis mit echten Hilfsmitteln wie NVDA, VoiceOver und der Tastatur. So wird deine Seite wirklich barrierefrei, und du kannst in deiner Erklärung zur Barrierefreiheit ehrlich beschreiben, was erfüllt ist.
Zehn Barrieren, vorher und nachher erklärt
In unseren Ratgebern zeigen wir jede typische Barriere an einem Beispiel, das du selbst mit dem Regler vergleichen kannst, und erklären, wie du sie auf deiner eigenen Website behebst.
- 01 Warum Hellgrün auf Weiß niemand lesen kann
- 02 Lesbar auch mit 200 Prozent Zoom
- 03 Was ein Screenreader statt des Fotos vorliest
- 04 Jeder Knopf erreichbar, der Fokus immer sichtbar
- 05 Beschriftung, Fehlermeldung und genug Zeit
- 06 Nie wieder „hier klicken“, immer groß genug
- 07 Eine Gliederung, die man auch hören kann
- 08 Untertitel, Transkript und Audiodeskription
- 09 Bewegung, die man anhalten kann
- 10 Kurze Sätze, bekannte Wörter, klare Schritte
Von der Prüfung bis zur Erklärung
- Gespräch
Du erzählst uns, was deine Website leisten soll und wer sie nutzt. Wir schauen sie uns vorher kurz an.
- Prüfung
Wir prüfen ausgewählte Seiten nach WCAG 2.2 AA, von Hand, mit Tastatur, Screenreader und Werkzeugen.
- Bericht
Du bekommst jede Barriere mit Fundstelle, Erklärung, Lösung und einer klaren Reihenfolge.
- Umbau
Wir beheben die Fehler selbst oder begleiten dein Team und deine Agentur beim Umsetzen.
- Nachweis
Nach der Nachprüfung schreiben wir mit dir die Erklärung zur Barrierefreiheit.
Was oft gefragt wird
Was bedeutet es, Webseiten barrierefrei zu machen?
Eine barrierefreie Website kann jeder Mensch wahrnehmen, bedienen und verstehen, auch mit Sehschwäche, nur mit der Tastatur, mit Screenreader oder mit Lernschwierigkeiten. Dafür müssen Kontraste, Schriftgrößen, Struktur, Formulare, Bilder und Videos bestimmte Regeln erfüllen, die in den WCAG beschrieben sind.
Muss meine Website nach dem BFSG barrierefrei sein?
Wenn Verbraucher auf deiner Website etwas kaufen, buchen oder einen Vertrag abschließen können, sehr wahrscheinlich ja. Ausgenommen sind Kleinstunternehmen mit Dienstleistungen, also weniger als zehn Beschäftigte und höchstens zwei Millionen Euro Jahresumsatz. Mehr dazu steht in unserem Überblick zum Gesetz.
Welcher Standard gilt, WCAG 2.1 oder WCAG 2.2?
Die europäische Norm EN 301 549 verweist derzeit auf WCAG 2.1 in der Stufe AA. Wir prüfen trotzdem nach WCAG 2.2, weil die neun neuen Kriterien echte Probleme lösen, etwa zu kleine Klickflächen oder einen verdeckten Fokus, und weil die nächste Fassung der Norm sie voraussichtlich übernimmt.
Reicht ein Barrierefreiheits-Plugin nicht aus?
Nein. Overlay-Plugins blenden ein Menü ein, beheben aber die Fehler im Code nicht. Viele Menschen mit Screenreader empfinden sie sogar als zusätzliche Hürde. Eine Website wird nur barrierefrei, wenn die Ursachen in Vorlagen, Farben, Texten und Formularen behoben werden.
Wie lange dauert eine Prüfung?
Das hängt von der Größe und Art der Website ab. Eine typische Unternehmensseite mit Kontaktformular prüfen wir in wenigen Arbeitstagen, einen Onlineshop mit Kaufweg etwas länger. Wie lange es bei dir dauert, sagen wir dir nach einem ersten Blick auf die Seite verbindlich.
Arbeitet ihr auch mit WordPress, Shopify oder anderen Systemen?
Ja. Die Regeln der Barrierefreiheit gelten unabhängig vom System. Wir beheben Barrieren in WordPress, WooCommerce, Shopify, TYPO3 und in selbst programmierten Seiten und sagen dir ehrlich, wo ein Theme oder Baukasten an seine Grenzen kommt.
Bereit für eine Website ohne Hürden?
Schick uns die Adresse deiner Website. Wir schauen sie uns an und sagen dir ehrlich, wie barrierefrei sie heute ist und was als Erstes zu tun ist.