Barrieren auf Websites: Was der Mittelstand zuerst beheben sollte

Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG). Seitdem fragen sich viele mittelständische Unternehmen, wie barrierefrei ihre Website eigentlich ist und wo sie anfangen sollen. Die gute Nachricht: Die meisten Barrieren sind keine Einzelfälle, sondern tauchen auf vielen Websites in ähnlicher Form auf. Wer sie kennt, kann gezielt prüfen und die wichtigsten Baustellen oft mit überschaubarem Aufwand schließen.

Was die Zahlen zeigen

Einen guten Überblick liefert der Bericht „WebAIM Million“. Die US-Organisation WebAIM prüft dafür jedes Jahr die Startseiten der eine Million meistbesuchten Websites mit einem automatischen Werkzeug. In der Ausgabe 2026 fand es auf 95,9 % der Startseiten erkennbare Fehler gegen die WCAG, die internationalen Richtlinien für barrierefreie Webinhalte – im Schnitt 56,1 Fehler pro Seite. Rund 96 % aller Fehler fallen in nur sechs Kategorien:

• Text mit zu schwachem Kontrast: 83,9 % der Startseiten
• Bilder ohne Alternativtext: 53,1 %
• Formularfelder ohne Beschriftung: 51 %
• Links ohne erkennbaren Text: 46,3 %
• Buttons ohne erkennbaren Text: 30,6 %
• Fehlende Angabe der Seitensprache: 13,5 %

Zwei Einschränkungen gehören dazu: Die Zahlen beziehen sich auf viel besuchte Websites weltweit, nicht speziell auf deutsche Unternehmen. Und automatische Tests erkennen nur einen Teil der Probleme. Als Landkarte für die eigene Prüfung taugen sie trotzdem.

Wo die Barrieren auf Ihrer Website stecken

Statt Fehlerkategorien abzuarbeiten, lohnt sich ein Gang durch die Bereiche, die auf fast jeder Unternehmenswebsite vorkommen.

Kopfbereich und Navigation

Hier sitzen Elemente, die auf jeder Seite wiederkehren – und mit ihnen jeder Fehler. Typisch sind ein verlinktes Logo ohne Alternativtext, ein Menü-Button auf dem Smartphone, der nur aus drei Strichen besteht, oder eine Lupe für die Suche ohne Beschriftung im Code. Ein Screenreader meldet dann nur „Link“ oder „Schaltfläche“, aber nicht, wohin es geht.

Die Lösung ist meist klein: Jedes dieser Elemente bekommt einen zugänglichen Namen wie „Startseite“, „Menü öffnen“ oder „Suchen“. In den Seitenkopf gehört außerdem die Sprachangabe, für deutsche Seiten lang="de", damit Vorleseprogramme die richtige Aussprache wählen. Und ein Link „Zum Inhalt springen“ ganz oben erspart allen, die mit der Tastatur unterwegs sind, sich auf jeder Seite durch das ganze Menü zu tippen.

Farben und Schrift

Hellgraue Schrift auf Weiß, Text über Fotos, Buttons in einer zarten Markenfarbe: Schwacher Kontrast ist der häufigste Fehler überhaupt. Die WCAG verlangen für normalen Text ein Kontrastverhältnis von mindestens 4,5:1, für große Schrift 3:1. Bedienelemente wie die Rahmen von Eingabefeldern und wichtige Symbole brauchen mindestens 3:1 zur Umgebung.

Beginnen Sie mit den Farben, die auf jeder Seite auftauchen, etwa im Fließtext, bei Links und Buttons und im Footer. Oft genügt es, einen Farbton des Corporate Designs etwas dunkler zu wählen. Im Stylesheet geändert, wirkt das auf allen Seiten.

Bilder und Grafiken

Referenzfotos, Produktbilder, Infografiken: Was für das Verständnis wichtig ist, braucht einen kurzen Alternativtext. Reine Schmuckbilder erhalten ein leeres Alt-Attribut, dann übergehen Screenreader sie. Beides pflegt Ihre Redaktion in der Regel selbst im Redaktionssystem.

Formulare: Kontakt, Anfrage, Bestellung

In Formularen werden aus Besuchern Kunden – hier kosten Barrieren am meisten. Häufige Fehler sind Felder, die nur einen grauen Platzhalter haben, der beim Tippen verschwindet, Pflichtfelder, die allein durch rote Farbe markiert sind, und Fehlermeldungen, die nicht sagen, was falsch ist.

• Jedes Feld hat eine sichtbare Beschriftung, die im Code mit dem Feld verknüpft ist.
• Fehler werden in Worten erklärt, etwa: „Bitte geben Sie eine Postleitzahl mit fünf Ziffern ein.“
• Bilderrätsel als Spamschutz (CAPTCHA) schließen viele Menschen aus. Das W3C beschreibt in einer eigenen Veröffentlichung, warum das so ist und welche Alternativen es gibt.

Cookie-Banner und Pop-ups

Das Einwilligungsbanner ist oft das Erste, was Besucherinnen und Besucher sehen. Lässt es sich nicht per Tastatur bedienen, kommt man gar nicht erst zur Website. Prüfen Sie: Erreichen Sie die Schaltflächen mit der Tab-Taste? Sind „Akzeptieren“ und „Ablehnen“ gut lesbar? Lässt sich ein Pop-up mit einem klar beschrifteten Schließen-Button wieder schließen?

Links im Text

„Hier klicken“, „mehr“, „weiterlesen“: Wer sich mit einem Screenreader alle Links einer Seite auflisten lässt, hört dann zehnmal dasselbe. Formulieren Sie Linktexte so, dass sie für sich verständlich sind, etwa „Leistungen für Hausverwaltungen ansehen“. Auch Symbole für soziale Netzwerke im Footer brauchen einen Namen, zum Beispiel „Unser Kanal auf YouTube“.

Der Fünf-Minuten-Test mit der Tastatur

Ob sich eine Website ohne Maus bedienen lässt, erkennt kein automatisches Werkzeug zuverlässig. Sie können es aber selbst prüfen:

1. Öffnen Sie Ihre Startseite und klicken Sie in die Adresszeile des Browsers.
2. Drücken Sie wiederholt die Tab-Taste, mit Umschalt+Tab geht es zurück.
3. Achten Sie darauf, ob Sie jederzeit sehen, welches Element gerade ausgewählt ist. Fehlt diese Fokus-Markierung, wurde sie oft im Design entfernt.
4. Öffnen Sie das Menü mit der Eingabetaste, schließen Sie das Cookie-Banner und füllen Sie das Kontaktformular aus.
5. Notieren Sie jede Stelle, an der Sie nicht weiterkommen oder die Orientierung verlieren.

Diese Notizen sind eine gute Grundlage für das Gespräch mit Ihrer Agentur oder Ihrem Entwicklungsteam.

Was das BFSG damit zu tun hat

Das BFSG setzt den European Accessibility Act in deutsches Recht um und gilt für bestimmte Produkte und Dienstleistungen für Verbraucherinnen und Verbraucher. Für Websites zählen vor allem Dienstleistungen im elektronischen Geschäftsverkehr, also etwa Online-Shops und Websites, über die Verbraucher einen Vertrag abschließen können. Als technischer Maßstab gilt in der Praxis die europäische Norm EN 301 549, die für Webinhalte die WCAG 2.1 auf Stufe AA übernimmt. Alle sechs Fehler aus der WebAIM-Liste betreffen Kriterien, die zu diesem Maßstab gehören.

• Kleinstunternehmen mit weniger als 10 Beschäftigten und höchstens 2 Mio. € Jahresumsatz oder Jahresbilanzsumme sind ausgenommen – aber nur, soweit sie Dienstleistungen erbringen.
• Angebote, die sich tatsächlich und ausschließlich an Geschäftskunden richten, sind grundsätzlich nicht erfasst. Die bloße Bezeichnung als B2B-Shop genügt dafür nicht.
• Wer betroffen ist, muss zusätzlich in barrierefreier Form informieren, wie die Dienstleistung die Anforderungen erfüllt, etwa in den AGB oder auf einer gut auffindbaren eigenen Seite.
• Die Aufsicht liegt bei der gemeinsamen Marktüberwachungsstelle der Länder für die Barrierefreiheit von Produkten und Dienstleistungen (MLBF) in Magdeburg.
• Für Websites öffentlicher Stellen des Bundes gilt die BITV 2.0, die Länder haben eigene Regelungen.

Allgemeine Information, keine Rechtsberatung. Ob Ihr Angebot erfasst ist, sollten Sie im Einzelfall prüfen lassen.

Womit Sie anfangen

1. Vorlagen zuerst: Kontraste, Fokus-Markierung, Sprachangabe sowie Menü- und Such-Button stecken im Template. Einmal behoben, sind sie auf allen Seiten gelöst.
2. Dann die Formulare: Kontakt, Terminbuchung, Bestellung – überall dort, wo Anfragen oder Verträge entstehen.
3. Dann die Inhalte: Alternativtexte, Linktexte und Überschriften kann Ihre Redaktion nach und nach selbst verbessern.
4. Dranbleiben: Neue Seiten, Bilder und Formulare bei jeder Änderung mitprüfen.

Checkliste zum Abhaken

• Text hat mindestens 4,5:1 Kontrast, große Schrift und Bedienelemente mindestens 3:1.
• Logo, Menü-, Such- und Social-Media-Buttons haben einen zugänglichen Namen.
• Die Seitensprache ist im Code angegeben.
• Inhaltsbilder haben passende Alternativtexte, Schmuckbilder ein leeres Alt-Attribut.
• Formularfelder sind sichtbar beschriftet und im Code mit ihrer Beschriftung verbunden, Fehlermeldungen sagen in Worten, was zu tun ist.
• Cookie-Banner und Pop-ups lassen sich per Tastatur bedienen und schließen.
• Die ganze Seite ist mit der Tab-Taste erreichbar, der Fokus ist immer sichtbar.
• Linktexte sind auch ohne Zusammenhang verständlich.

Wie barrierefrei ist Ihre Website?

Möchten Sie wissen, welche dieser Barrieren auf Ihrer Website vorkommen? Im kostenlosen Barrierefreiheits-Check prüfen wir Ihre Startseite und eine wichtige Unterseite gegen zentrale WCAG-Kriterien, von Hand und mit Prüfwerkzeugen. Sie erhalten die fünf wichtigsten Baustellen und eine ehrliche Einschätzung, was sich lohnt. Mehr zu unserem Vorgehen lesen Sie auf der Seite Barrierefreiheit. Den Check können Sie auch direkt telefonisch anfragen: 07551 839 91 30.