„Barrierefrei“ klingt für viele Unternehmer nach Paragrafen und Fachbegriffen. Dabei geht es um ganz konkrete Dinge: Kann man Ihren Text lesen, wenn das Licht schlecht ist? Kommt man ohne Maus durch Ihr Kontaktformular? Versteht eine Vorlese-Software, was auf Ihren Bildern zu sehen ist?
Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG). Seit Ende September 2025 prüft eine eigene Behörde der Bundesländer, ob digitale Angebote die Anforderungen erfüllen. In diesem Ratgeber zeigen wir Ihnen 8 Beispiele, wie eine barrierefreie Website aussieht – und wie nicht. Dazu bekommen Sie einen 5-Minuten-Selbsttest und einen Fahrplan für die Umsetzung.
Was „barrierefrei“ bei einer Website konkret bedeutet
Eine barrierefreie Website kann von allen Menschen genutzt werden – auch von Menschen mit Sehschwäche, Farbsehschwäche, motorischen Einschränkungen oder kognitiven Beeinträchtigungen. Dazu gehören auch ältere Menschen, die mit Lesebrille am Smartphone surfen, oder jemand mit gebrochenem Arm, der nur die Tastatur nutzen kann.
Das BFSG selbst beschreibt die Technik nicht im Detail. Es verweist auf die europäische Norm EN 301 549, und diese wiederum auf die Web Content Accessibility Guidelines (WCAG 2.1, Stufe AA). Die WCAG fassen alles in vier Grundprinzipien zusammen:
- Wahrnehmbar: Inhalte sind sehbar, hörbar oder vorlesbar – zum Beispiel durch Kontraste, Alternativtexte und Untertitel.
- Bedienbar: Alles funktioniert auch mit Tastatur, und niemand steht unter Zeitdruck.
- Verständlich: Texte, Formulare und Fehlermeldungen sind klar formuliert.
- Robust: Der Code ist sauber, sodass Screenreader und andere Hilfsmittel ihn korrekt auslesen.
8 Beispiele: So sieht eine barrierefreie Website aus – und so nicht
Die folgenden Beispiele stammen aus Situationen, die wir bei Website-Checks immer wieder sehen. Die gute Nachricht: Die meisten lassen sich mit wenig Aufwand beheben.
1. Farbkontrast von Texten
- Schlecht: Hellgrauer Text (#AAAAAA) auf weißem Hintergrund. Das Kontrastverhältnis liegt bei etwa 2,3 : 1 – auf dem Handy in der Sonne kaum lesbar.
- Besser: Dunkelgrauer Text (#595959) auf Weiß erreicht etwa 7 : 1 und ist auch bei schlechtem Licht gut lesbar.
Die WCAG verlangen für normalen Fließtext ein Kontrastverhältnis von mindestens 4,5 : 1, für große Schrift mindestens 3 : 1. Prüfen Sie besonders Texte auf Fotos, helle Buttons und dezente „Design-Grautöne“ im Footer.
2. Alternativtexte für Bilder
- Schlecht: Das Bild Ihrer Arbeit hat den Alternativtext „IMG_4711.jpg“ – oder gar keinen.
- Besser: „Badezimmer nach der Sanierung mit bodengleicher Dusche und grauen Fliesen“. Rein dekorative Grafiken bekommen dagegen bewusst einen leeren Alternativtext, damit Screenreader sie überspringen.
Wer nicht sehen kann, „hört“ Ihre Bilder über die Vorlese-Software. Ein guter Alternativtext beschreibt in einem Satz, was zu sehen ist und warum es wichtig ist. Nebeneffekt: Google versteht Ihre Bilder ebenfalls besser.
3. Aussagekräftige Linktexte
- Schlecht: „Hier klicken“, „mehr“ oder „weiterlesen“ – fünfmal auf einer Seite.
- Besser: „Preise für die Badsanierung ansehen“ oder „Termin online buchen“.
Screenreader-Nutzer lassen sich oft nur die Links einer Seite vorlesen. Steht dort fünfmal „hier klicken“, weiß niemand, wohin die Links führen. Ein Linktext sollte auch ohne den Satz drumherum verständlich sein.
4. Formulare mit sichtbaren Beschriftungen
- Schlecht: Das Feld „Telefon“ ist nur als grauer Platzhaltertext im Eingabefeld beschriftet. Sobald man tippt, verschwindet der Hinweis. Fehler werden mit „Ungültige Eingabe“ gemeldet.
- Besser: Jedes Feld hat eine dauerhaft sichtbare Beschriftung über dem Eingabefeld. Die Fehlermeldung sagt genau, was zu tun ist: „Bitte geben Sie Ihre Telefonnummer mit Vorwahl ein.“
Das Kontaktformular ist auf den meisten Firmenwebsites der wichtigste Weg zur Anfrage. Wenn Menschen hier scheitern, verlieren Sie nicht nur Barrierefreiheit, sondern Kunden.
5. Bedienung mit der Tastatur und sichtbarer Fokus
- Schlecht: Das Menü öffnet sich nur beim Überfahren mit der Maus. Wer mit der Tab-Taste navigiert, sieht nicht, wo er sich gerade befindet, weil der Fokusrahmen per CSS entfernt wurde.
- Besser: Alle Menüs, Buttons und Formularfelder sind per Tab-Taste erreichbar und mit Enter bedienbar. Ein gut sichtbarer Rahmen zeigt jederzeit, welches Element gerade ausgewählt ist.
Viele Menschen können keine Maus benutzen – sei es dauerhaft oder vorübergehend. Achten Sie außerdem auf ausreichend große Klickflächen: Die neuere WCAG-Version 2.2 empfiehlt mindestens 24 × 24 Pixel.
6. Echte Überschriften statt fettem Text
- Schlecht: Abschnitte werden mit fett gedrucktem, größerem Text „optisch“ gegliedert. Technisch ist alles ein normaler Absatz.
- Besser: Eine klare Hierarchie mit echten Überschriften: eine H1 pro Seite, darunter H2 für Abschnitte und H3 für Unterpunkte.
Screenreader-Nutzer springen über Überschriften durch eine Seite – ähnlich wie Sie beim Überfliegen. Fehlen sie, muss die ganze Seite Wort für Wort vorgelesen werden. Auch für Google ist eine saubere Gliederung ein wichtiges Signal.
7. Farbe nicht als einzige Information
- Schlecht: Pflichtfelder im Formular sind nur rot umrandet. Im Preisvergleich steht „verfügbar“ in Grün und „ausverkauft“ in Rot – ohne weiteren Hinweis.
- Besser: Pflichtfelder tragen zusätzlich ein Sternchen und den Hinweis „Pflichtfeld“. Statusangaben werden mit Text oder Symbol ergänzt.
Rund acht Prozent der Männer haben eine Farbsehschwäche – meist eine Rot-Grün-Schwäche. Wenn eine Information nur über Farbe vermittelt wird, geht sie für diese Menschen verloren.
8. Videos, Slider und Animationen
- Schlecht: Ein Imagevideo startet automatisch mit Ton und ohne Untertitel. Ein Bild-Slider wechselt alle drei Sekunden und lässt sich nicht anhalten.
- Besser: Videos starten erst auf Klick und haben Untertitel. Slider lassen sich pausieren – oder Sie verzichten ganz darauf und zeigen die wichtigsten Inhalte statisch.
Automatische Bewegung lenkt ab und überfordert manche Menschen. Untertitel helfen nicht nur Gehörlosen, sondern auch allen, die Ihr Video im Büro oder in der Bahn ohne Ton ansehen.
Die 8 Beispiele auf einen Blick
| Element | Typischer Fehler | So ist es barrierefrei |
|---|---|---|
| Textfarbe | Hellgrau auf Weiß | Kontrast mind. 4,5 : 1 |
| Bilder | Kein oder sinnloser Alternativtext | Kurze, präzise Bildbeschreibung |
| Links | „Hier klicken“ | Linkziel im Linktext nennen |
| Formulare | Nur Platzhalter, vage Fehler | Sichtbare Labels, klare Fehlermeldungen |
| Navigation | Nur per Maus, kein Fokus | Tastatur-Bedienung, sichtbarer Fokus |
| Gliederung | Fetter Text als Überschrift | Echte H1–H3-Hierarchie |
| Farbe | Info nur über Farbe | Zusätzlich Text oder Symbol |
| Medien | Autoplay, keine Untertitel | Start per Klick, Untertitel, Pause |
Ist meine Website barrierefrei? Der 5-Minuten-Test
Einen ersten Eindruck bekommen Sie ohne Fachwissen. Nehmen Sie sich fünf Minuten und probieren Sie Folgendes auf Ihrer eigenen Startseite und Ihrer Kontaktseite aus:
- Maus weglegen: Navigieren Sie nur mit der Tab-Taste durch die Seite. Sehen Sie jederzeit, wo Sie sind? Kommen Sie bis zum Absenden-Button des Formulars?
- Zoomen: Vergrößern Sie die Seite im Browser auf 200 Prozent (Strg und Plus). Bleibt alles lesbar, ohne dass Texte abgeschnitten werden oder sich überlappen?
- Kontrast prüfen: Geben Sie Ihre Text- und Hintergrundfarbe in den kostenlosen Contrast Checker von WebAIM ein.
- Automatisch scannen: Lassen Sie Ihre Seite mit dem kostenlosen Tool WAVE prüfen. Es markiert fehlende Alternativtexte, leere Links und Kontrastprobleme direkt auf der Seite.
- Graustufen: Schalten Sie Ihr Smartphone kurz in den Graustufen-Modus. Verstehen Sie noch, welche Felder Pflicht sind und welche Buttons aktiv sind?
Wenn Sie an zwei oder mehr Stellen hängen bleiben, lohnt sich ein genauerer Blick. Die ausführliche Prüfung mit zehn Punkten finden Sie in unserer BFSG-Checkliste zum Selbsttest. Wichtig: Automatische Tools finden nur einen Teil der Probleme. Ob ein Alternativtext sinnvoll ist oder ein Formular verständlich, kann nur ein Mensch beurteilen.
So setzen Sie Barrierefreiheit um: Fahrplan in 5 Schritten
1. Klären, ob Ihre Website unter das BFSG fällt
Das Gesetz betrifft vor allem Angebote für Verbraucher, zum Beispiel Online-Shops, Online-Terminbuchungen, Kontaktformulare für Kundenanfragen oder Bezahlvorgänge. Ausgenommen sind Kleinstunternehmen, die Dienstleistungen anbieten: weniger als zehn Beschäftigte und höchstens zwei Millionen Euro Jahresumsatz. Auch wenn Sie nicht verpflichtet sind, lohnt sich Barrierefreiheit – jede Hürde auf Ihrer Website kostet Anfragen.
2. Bestandsaufnahme der wichtigsten Seiten
Prüfen Sie nicht sofort jede Unterseite, sondern zuerst die Wege, über die Kunden zu Ihnen kommen: Startseite, Leistungsseiten, Kontaktformular, Terminbuchung und – falls vorhanden – den Bestellprozess. Kombinieren Sie automatische Tests mit einem manuellen Durchgang per Tastatur.
3. Prioritäten setzen
Beheben Sie zuerst alles, was Menschen komplett ausschließt: Formulare, die sich nicht absenden lassen, Menüs, die per Tastatur nicht erreichbar sind, oder Texte, die nicht lesbar sind. Danach folgen Verbesserungen wie Linktexte, Überschriften oder Alternativtexte.
4. Im Design-System umsetzen, nicht Seite für Seite
Am effizientesten ist es, die Grundlagen zentral zu korrigieren: Farbpalette mit ausreichenden Kontrasten, ein einheitlicher Fokusstil, barrierefreie Buttons und Formular-Bausteine. Einmal im Theme angepasst, gilt das für die ganze Website. Inhalte wie Alternativtexte, Linktexte und Untertitel pflegen Sie anschließend redaktionell – am besten mit kurzen Regeln für alle, die Texte und Bilder einstellen.
Vorsicht bei sogenannten Overlays oder „Barrierefreiheits-Plugins“, die ein Werkzeug-Symbol auf die Seite legen: Sie ersetzen keine saubere Umsetzung im Code und können Hilfsmittel wie Screenreader sogar stören.
5. Erklärung zur Barrierefreiheit veröffentlichen und regelmäßig prüfen
Websites, die unter das BFSG fallen, brauchen Informationen zur Barrierefreiheit – meist als eigene Seite, verlinkt im Footer neben Impressum und Datenschutz. Darin beschreiben Sie, wie Ihr Angebot die Anforderungen erfüllt und welche Bereiche noch nicht barrierefrei sind. Prüfen Sie Ihre Website nach jedem größeren Update erneut: Ein neues Plugin oder ein neuer Slider kann schnell neue Barrieren schaffen.
Häufige Fragen
Muss meine Website barrierefrei sein?
Das BFSG gilt vor allem für digitale Angebote an Verbraucher, etwa Online-Shops, Online-Terminbuchungen oder Kontaktformulare für Kundenanfragen. Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz sind bei Dienstleistungen ausgenommen. Im Zweifel sollten Sie Ihren Einzelfall rechtlich prüfen lassen.
Wer kontrolliert, ob Websites barrierefrei sind?
Zuständig ist die Marktüberwachungsstelle der Länder für die Barrierefreiheit von Produkten und Dienstleistungen (MLBF) mit Sitz in Magdeburg. Sie geht Beschwerden von Verbrauchern nach und prüft auch selbstständig. Bei Mängeln setzt sie Fristen zur Nachbesserung und kann ein Angebot im äußersten Fall untersagen. Zusätzlich sind Bußgelder von bis zu 100.000 Euro möglich.
Welcher Standard gilt für barrierefreie Websites?
Das BFSG verweist auf die europäische Norm EN 301 549. Diese bezieht sich auf die WCAG 2.1 in der Stufe AA. Wer heute neu baut, orientiert sich am besten schon an der aktuelleren Version WCAG 2.2.
Was kostet es, eine Website barrierefrei zu machen?
Das hängt vor allem davon ab, wie die Website technisch aufgebaut ist. Bei einer neuen Website ist Barrierefreiheit kaum Mehraufwand, wenn sie von Anfang an eingeplant wird. Bei bestehenden Websites lassen sich viele Punkte wie Kontraste, Fokusstile und Formulare zentral im Theme beheben. Ein Website-Check zeigt, wie groß der Aufwand in Ihrem Fall ist.
Hinweis: Dieser Beitrag ersetzt keine Rechtsberatung. Ob Ihr Angebot unter das BFSG fällt, sollten Sie im Einzelfall mit einer fachkundigen Stelle klären.
Barrierefreie Website aus Dortmund
Sie möchten wissen, wie barrierefrei Ihre Website heute ist? Wir prüfen Ihre wichtigsten Seiten, zeigen Ihnen verständlich, wo Barrieren bestehen, und setzen die Verbesserungen direkt im Design um – damit Ihre Website für alle funktioniert und mehr Anfragen bringt. Jetzt kostenloses Erstgespräch vereinbaren oder mehr über unsere Webagentur in Dortmund erfahren.