BFSG UI & UX

Barrierefreies Webdesign – BFSG als Chance

Vor einigen Jahren galt Responsive Design als besonderes Extra. Heute erwartet jeder, dass eine Website auf dem Smartphone funktioniert. Mit der Barrierefreiheit passiert gerade etwas Ähnliches.

Seit dem 28. Juni 2025 beschäftigen sich viele Unternehmen mit dem Barrierefreiheitsstärkungsgesetz, kurz BFSG. Oft beginnt das Thema mit Sorge. Wer ist betroffen? Was muss geändert werden? Welche Folgen drohen?

Diese Fragen sind wichtig. Sie greifen aber zu kurz.

Wer Barrierefreiheit nur als Pflicht sieht, arbeitet auf einen Mindestwert hin. Wer sie als Teil von gutem Webdesign versteht, verbessert die gesamte Website. Inhalte werden klarer, Formulare leichter nutzbar, der Code sauberer. Und Nutzer kommen schneller ans Ziel.

Das BFSG ist daher nicht das Ziel. Es ist ein Anlass, digitale Angebote neu zu prüfen.

Barrierefreiheit ist kein Spezialfall für wenige Menschen. Sie ist bessere Nutzbarkeit für alle.

Was barrierefreies Webdesign wirklich bedeutet

Eine barrierefreie Website lässt sich von möglichst vielen Menschen wahrnehmen, verstehen und bedienen. Das gilt unabhängig von Gerät, Eingabeart oder persönlicher Lage.

Viele denken bei Accessibility zuerst an blinde Menschen und Screenreader. Das ist ein wichtiger Teil des Themas, aber nur einer von vielen. Digitale Barrieren treffen auch Menschen mit eingeschränktem Sehvermögen, eingeschränkter Feinmotorik, Hörverlust, Lernproblemen oder nachlassender Konzentration.

Hinzu kommen zeitweilige und situative Hürden. Eine verletzte Hand verändert die Bedienung. Grelle Sonne senkt den Kontrast auf dem Display. Eine laute Umgebung macht ein Video ohne Untertitel nutzlos. Stress erschwert komplizierte Texte und lange Formulare.

Gutes Webdesign plant solche Fälle von Anfang an mit ein, als normalen Teil des Projekts.

Was das BFSG mit Websites zu tun hat

Das BFSG setzt europäische Vorgaben zur Barrierefreiheit in deutsches Recht um. Es gilt seit dem 28. Juni 2025 für bestimmte Produkte und Dienste, die sich an Verbraucher richten. Dazu zählen unter anderem Teile des Online-Handels, Bankdienstleistungen, elektronische Tickets, Buchungsangebote und weitere digitale Dienste.

Eine Firmenwebsite ist daher nicht allein deshalb betroffen, weil sie online ist. Entscheidend sind das Angebot, die Zielgruppe und die Funktionen. Ein Online-Shop, eine Buchungsstrecke oder ein digitaler Vertragsabschluss ist anders zu bewerten als eine rein redaktionelle Seite.

Kleinstunternehmen können bei bestimmten Dienstleistungen ausgenommen sein. Dabei spielen die Zahl der Beschäftigten sowie Umsatz oder Bilanzsumme eine Rolle. Ausnahmen sollten jedoch nie aus einem kurzen Online-Check abgeleitet werden. Bei unklaren Fällen ist eine rechtliche Prüfung sinnvoll.

Wichtig ist auch der Umfang. Bei einem betroffenen Angebot endet Barrierefreiheit nicht auf der Startseite. Der Weg des Nutzers zählt als Ganzes. Dazu können Navigation, Suche, Formulare, Cookie-Banner, Login, Warenkorb, Checkout und Zahlung gehören. Auch eingebundene Dienste können Teil der Nutzung sein.

Hinweis: Dieser Beitrag gibt einen fachlichen Überblick zu Webdesign und Technik. Er ersetzt keine Rechtsberatung.

Warum Barrieren jeden betreffen können

Digitale Barrieren wirken oft unscheinbar. Ein hellgrauer Text sieht im Büro noch elegant aus. Draußen auf dem Smartphone wird er unlesbar. Ein kleiner Icon-Button spart Platz. Für eine Person mit Tremor wird er zum Hindernis.

Auch gute Augen und eine ruhige Hand lösen nicht jedes Problem. Ein unklarer Linktext wie „Mehr erfahren“ verrät nicht, wohin der Link führt. Eine Fehlermeldung mit rotem Rahmen hilft wenig, wenn der Grund nicht erklärt wird. Ein Formular mit zehn Pflichtfeldern kann jeden Besucher überfordern.

Barrierefreiheit beginnt deshalb mit einer einfachen Frage:

Kann ein Mensch sein Ziel ohne unnötige Hürde erreichen?

Diese Frage ist breiter als jedes Gesetz. Sie betrifft Design, Text, Technik und den gesamten Ablauf.

Barrierefreiheit ist gute User Experience

Wer die WCAG-Kriterien durchgeht, findet darin vor allem eines: klassische UX-Grundregeln.

Eine klare Navigation gibt Orientierung. Sichtbare Fokuszustände zeigen, welches Element aktiv ist. Große Klickflächen helfen auf kleinen Displays. Gute Kontraste verbessern die Lesbarkeit. Klare Fehlermeldungen zeigen, was zu tun ist. Eine logische Reihenfolge senkt die Last beim Lesen und Bedienen.

Keiner dieser Punkte hilft nur einer kleinen Gruppe.

Ein Beispiel: Ein Formular meldet lediglich „Eingabe ungültig“. Der Nutzer muss nun suchen. Welches Feld ist falsch? Welches Format wird erwartet? Eine bessere Meldung lautet: „Bitte geben Sie die Postleitzahl mit fünf Ziffern ein.“ Das hilft Screenreader-Nutzern ebenso wie gestressten Kunden im Checkout.

Barrierefreies Design nimmt Reibung aus dem Prozess. Genau das versucht gute UX seit jeher.

Was Accessibility mit SEO verbindet

Barrierefreiheit ist kein direkter Ersatz für Suchmaschinenoptimierung. Beide Felder teilen aber wichtige Grundlagen.

Suchmaschinen müssen den Aufbau einer Seite verstehen. Assistive Technik braucht ebenfalls eine klare Struktur. Semantisches HTML, saubere Überschriften, verständliche Linktexte und passende Bildbeschreibungen helfen in beiden Fällen.

Eine Seite mit einer logischen H1- bis H3-Struktur lässt sich leichter scannen. Eine korrekte Sprachangabe hilft bei der Aussprache durch Screenreader. Aussagekräftige Seitentitel verbessern Orientierung und Suchtreffer. Echter Text statt Text im Bild bleibt skalierbar, lesbar und indexierbar.

Auch eine einfache Sprache kann indirekt wirken. Besucher erfassen Inhalte schneller und finden eher die gesuchte Antwort. Das senkt Frust und stärkt die Qualität der Seite.

Accessibility ist daher keine SEO-Abkürzung. Sie schafft jedoch eine solide Basis für verständliche Inhalte und saubere Technik.

Weniger Hürden, mehr Anfragen und Käufe

Unternehmen zahlen für Werbung, Suchmaschinenoptimierung und Social Media. Danach schicken sie Besucher auf eine Seite, die einen Teil von ihnen am Ziel hindert.

Der Button ist zu klein. Das Menü lässt sich nicht per Tastatur öffnen. Das Feld für die Telefonnummer lehnt gängige Schreibweisen ab. Der Fehler wird nur durch eine Farbe gezeigt. Im Checkout läuft eine kurze Frist ab, ohne dass sie verlängert werden kann.

Jede Hürde kann einen Kauf oder eine Anfrage kosten.

Barrierefreiheit schützt nicht automatisch vor jedem Abbruch. Sie beseitigt aber viele vermeidbare Gründe. Das stärkt die Conversion vor allem dort, wo Nutzer handeln sollen:

  • bei Kontakt- und Anfrageformularen
  • bei der Suche nach Produkten oder Leistungen
  • bei Registrierung und Login
  • im Warenkorb und Checkout
  • bei Termin- und Ticketbuchungen
  • bei Downloads und digitalen Dokumenten

Ein barrierearmer Prozess fühlt sich nicht nach Zusatzfunktion an. Er fühlt sich einfach gut an.

Barrierefreiheit beginnt vor dem Code

Viele Projekte behandeln Accessibility wie eine technische Reparatur am Ende. Dann werden Alt-Texte ergänzt und einzelne Kontraste geändert. Das kann helfen, löst aber selten das ganze Problem.

Barrieren entstehen in jeder Phase.

Konzept

Schon die Idee legt fest, ob ein Prozess einfach oder komplex wird. Ein Formular mit unnötigen Feldern bleibt auch mit sauberem Code mühsam. Eine unklare Seitenstruktur lässt sich nicht durch ein Plugin retten.

UX und Design

Designer legen Schriftgrößen, Kontraste, Zustände und Klickflächen fest. Sie entscheiden, ob Informationen nur durch Farbe vermittelt werden. Sie planen, wie Menüs, Dialoge und Hinweise auf kleinen Displays wirken.

Redaktion

Texte brauchen klare Überschriften, kurze Wege und verständliche Links. Bilder benötigen passende Alternativtexte, sofern sie Inhalt tragen. Videos brauchen je nach Inhalt Untertitel, Transkripte oder weitere Alternativen.

Entwicklung

Entwickler sorgen für semantisches HTML, eine sinnvolle Fokusfolge und die Bedienung per Tastatur. ARIA kann Lücken schließen, ersetzt aber keine passenden HTML-Elemente. Ein echter Button ist meist besser als ein klickbares Div.

Qualitätssicherung

Automatische Tools finden nur einen Teil der Fehler. Ein echtes Audit braucht auch manuelle Tests. Dazu zählen Tastatur, Zoom, Screenreader und reale Abläufe wie Anmeldung, Suche oder Checkout.

Barrierefreiheit entsteht nicht am Ende. Sie entsteht durch Entscheidungen im gesamten Projekt.

Die vier Grundideen der WCAG

Die Web Content Accessibility Guidelines, kurz WCAG, ordnen Barrierefreiheit nach vier Grundideen. Sie helfen Teams dabei, die vielen Einzelregeln besser zu verstehen.

1. Wahrnehmbar

Inhalte müssen auf mehr als einem Weg erfassbar sein. Bilder mit Aussage brauchen Alternativtexte. Videos benötigen passende Text- oder Audio-Alternativen. Text muss ausreichend kontrastreich und vergrößerbar sein.

2. Bedienbar

Die Oberfläche muss mit verschiedenen Eingaben funktionieren. Alle wichtigen Funktionen sollten per Tastatur erreichbar sein. Der Fokus muss sichtbar bleiben. Es darf keine Tastaturfalle geben. Bewegte Inhalte müssen sich bei Bedarf stoppen lassen.

3. Verständlich

Sprache, Navigation und Rückmeldungen müssen nachvollziehbar sein. Gleiche Elemente sollten sich gleich verhalten. Formulare brauchen klare Beschriftungen. Fehler müssen nicht nur gemeldet, sondern erklärt werden.

4. Robust

Der Code muss mit Browsern und assistiver Technik zusammenarbeiten. Dazu gehören korrektes HTML, eindeutige Namen und Werte sowie ein sparsamer, richtiger Einsatz von ARIA.

Im Umfeld des BFSG spielen die Stufen A und AA eine zentrale Rolle. Für ein Projekt reicht es dennoch nicht, einzelne Punkte abzuhaken. Die Website muss als Prozess funktionieren.

Typische Fehler auf Websites

Der Text sieht gut aus, ist aber kaum lesbar

Helle Schrift, dünne Schnitte und kleine Größen wirken in einem Design-Entwurf oft modern. Im Alltag brechen sie schnell ein. Gute Gestaltung braucht Kontrast und eine lesbare Grundgröße.

Die Navigation funktioniert nur mit der Maus

Dropdowns reagieren nur auf Hover. Der Fokus ist unsichtbar. Ein geöffnetes Menü lässt sich nicht mit Escape schließen. Damit scheitern nicht nur Nutzer mit motorischen Einschränkungen, sondern auch viele Power-User.

Formulare nennen den Fehler nicht klar

Ein roter Rahmen allein reicht nicht. Farbe darf nie die einzige Information sein. Das betroffene Feld braucht eine klare Meldung, die technisch mit dem Feld verknüpft ist.

Alt-Texte werden falsch verstanden

Nicht jedes Bild braucht eine lange Beschreibung. Ein rein dekoratives Bild sollte von assistiver Technik ignoriert werden können. Ein funktionales Bild braucht dagegen einen Text, der Zweck oder Ziel erklärt.

Ein Overlay soll alle Probleme lösen

Ein Zusatz-Tool kann einzelne Hilfen bieten. Es repariert aber keine falsche HTML-Struktur, unlogische Fokusfolgen oder unzugängliche Drittanbieter. Barrierefreiheit muss im System selbst verankert sein.

Nur die Startseite wird geprüft

Die größten Hürden liegen oft in Modulen und Abläufen. Cookie-Banner, Suche, Formulare, Login und Checkout müssen deshalb in den Test einbezogen werden.

Checkliste für eine barrierefreie Website

Kostenloser Selbstcheck

Wie barrierefrei ist Ihre Website?

Haken Sie alle Punkte ab, die bereits erfüllt sind. Nicht passende Punkte können Sie gezielt aus der Wertung nehmen.

Aktueller Stand 0 von 88 erfüllt

Starten Sie mit den wichtigsten Nutzerwegen.

Auswertung nach Bereich

Wichtig: Dieser Selbstcheck ersetzt kein technisches Audit und keine Rechtsberatung.

Schneller Selbsttest für Unternehmen

Dieser kurze Test ersetzt kein Audit. Er zeigt, ob dringender Handlungsbedarf besteht. Geben Sie sich für jedes klare Ja einen Punkt.

  1. Lässt sich das Hauptmenü vollständig per Tastatur bedienen?
  2. Ist der Fokus dabei immer sichtbar?
  3. Kann ein Nutzer direkt zum Hauptinhalt springen?
  4. Bleiben Inhalte bei 200 Prozent Zoom gut nutzbar?
  5. Sind Texte und Buttons auch bei hellem Licht gut erkennbar?
  6. Besitzen Formulare klare Beschriftungen?
  7. Erklären Fehlermeldungen, wie ein Fehler behoben wird?
  8. Haben wichtige Bilder passende Alternativtexte?
  9. Besitzen Videos Untertitel?
  10. Sind Linktexte auch ohne den restlichen Absatz verständlich?
  11. Funktionieren Cookie-Banner und Dialoge ohne Maus?
  12. Wurden Checkout, Login oder Buchung als ganzer Weg getestet?
  13. Wurde mindestens ein manueller Screenreader-Test gemacht?
  14. Können Nutzer eine Barriere einfach melden?
  15. Gibt es einen festen Prozess für neue Inhalte und Funktionen?

Auswertung

  • 0 bis 5 Punkte: Es besteht hoher Handlungsbedarf. Beginnen Sie mit Navigation, Formularen und den wichtigsten Nutzerwegen.
  • 6 bis 10 Punkte: Eine Basis ist vorhanden. Mehrere Hürden dürften dennoch echte Nutzer ausschließen.
  • 11 bis 13 Punkte: Die Website ist auf einem guten Weg. Ein Audit zeigt die verbleibenden Lücken.
  • 14 bis 15 Punkte: Sehr gute Grundlage. Prüfen Sie den Stand weiter regelmäßig und nach jeder großen Änderung.

Wie Unternehmen sinnvoll starten

Der beste Start ist selten ein großes Tool oder ein sofortiger Komplettumbau. Sinnvoller ist eine klare Reihenfolge.

  1. Geltungsbereich klären: Prüfen Sie Angebot, Zielgruppe und wichtige Dienste.
  2. Kernwege wählen: Starten Sie mit Kontakt, Suche, Login, Buchung oder Checkout.
  3. Audit durchführen: Kombinieren Sie automatische und manuelle Tests.
  4. Risiken ordnen: Beheben Sie zuerst Blockaden und häufig genutzte Hürden.
  5. Komponenten verbessern: Reparieren Sie wiederkehrende Muster zentral.
  6. Team schulen: Design, Text, Entwicklung und Pflege müssen zusammenspielen.
  7. Regelmäßig prüfen: Barrierefreiheit ist ein Prozess, kein einmaliges Projekt.

Ein sauberer Fokus spart Zeit. Wer zuerst sein Design-System und häufige Bausteine verbessert, löst viele Fehler auf mehreren Seiten zugleich.

Häufige Fragen zu barrierefreiem Webdesign

Muss jede Website seit dem 28. Juni 2025 barrierefrei sein?

Nein. Das BFSG gilt nicht pauschal für jede Website. Entscheidend sind das konkrete Angebot, die Ausrichtung auf Verbraucher und die erbrachten Dienste. Online-Shops und digitale Buchungs- oder Vertragswege können besonders relevant sein. Lassen Sie unklare Fälle fachlich prüfen.

Reicht ein Accessibility-Plugin oder Overlay?

Nein. Solche Lösungen können einzelne Hilfen ergänzen, beheben aber keine falsche Struktur, unklare Texte oder nicht bedienbare Abläufe. Die Website selbst muss zugänglich aufgebaut sein.

Ist eine barrierefreie Website automatisch suchmaschinenfreundlich?

Nicht automatisch. Viele Grundlagen überschneiden sich jedoch. Sauberes HTML, klare Überschriften, gute Seitentitel und verständliche Links helfen Nutzern, Screenreadern und Suchmaschinen.

Müssen alle Bilder einen Alt-Text haben?

Nein. Inhaltliche und funktionale Bilder brauchen einen passenden Text. Rein dekorative Bilder sollten von assistiver Technik übersprungen werden. Ein nutzloser Alt-Text kann mehr stören als helfen.

Kann ein automatischer Test die Barrierefreiheit bestätigen?

Nein. Automatische Tools finden typische technische Fehler. Sie können jedoch nicht sicher bewerten, ob ein Text verständlich, eine Fokusfolge sinnvoll oder ein kompletter Checkout wirklich nutzbar ist.

Was sollte zuerst geprüft werden?

Beginnen Sie mit den wichtigsten Nutzerwegen und häufig genutzten Komponenten. Dazu gehören Navigation, Suche, Kontaktformular, Cookie-Banner, Login, Buchung und Checkout.

Ist Barrierefreiheit nach einem Relaunch abgeschlossen?

Nein. Neue Inhalte, Plugins, Kampagnen und Funktionen können neue Hürden schaffen. Barrierefreiheit gehört daher in Redaktion, Entwicklung, Tests und Wartung.

Das BFSG setzt einen Mindestwert. Gute Websites gehen weiter.

Barrierefreies Webdesign ist mehr als die Antwort auf ein Gesetz. Es ist ein Zeichen für saubere Arbeit und Respekt vor den Menschen, die ein digitales Angebot nutzen.

Eine zugängliche Website macht Inhalte verständlicher und senkt Frust, gerade bei Formularen und auf dem Smartphone. Gleichzeitig schafft sie eine bessere technische Basis für Pflege und Suchmaschinen.

Das BFSG hat dem Thema den nötigen Druck gegeben. Unternehmen sollten diesen Druck nicht nur abarbeiten. Sie können ihn nutzen, um ihre Website grundsätzlich besser zu machen.

Die richtige Frage lautet nicht: Wie erfüllen wir gerade noch das Gesetz? Die richtige Frage lautet: Wie schaffen wir eine Website, die niemanden unnötig ausschließt?

Ist Ihre Website bereit?

Wir prüfen Websites, Shops und digitale Abläufe auf typische Barrieren. Sie erhalten eine klare Einordnung, konkrete Fehler und einen sinnvollen Plan für die nächsten Schritte.

Keine Mängelliste zum Abheften. Ein Plan, der Ihre Website für mehr Menschen besser macht.

Jetzt barrierefreie Website anfragen


Fachlicher Hinweis: Grundlage dieses Beitrags sind das Barrierefreiheitsstärkungsgesetz sowie technische Leitfäden zu WCAG, Website-Modulen, Tastaturbedienung, Medien und Dokumentation. Der Text ersetzt keine Rechtsberatung. Anforderungen können je nach Angebot und Einzelfall abweichen.

Bereit für Ihr nächstes Projekt? Webdesign, SEO und Branding für Unternehmen in Bietigheim-Bissingen und der Region Stuttgart.

Jetzt Kontakt aufnehmen