Barrierefreies Webdesign:

Barrierefreie Websites gestalten

Stell dir vor:

Du hast dir beim Sport den Arm verstaucht. Mit der Maus klickst du gerade mal nichts mehr an. Du musst dir aber gerade jetzt schnell ein Zugticket buchen, doch das „Weiter“-Feld lässt sich nur mit der Maus erreichen. Eine simple Tastatur-Navigation fehlt, die Buchung scheitert, und du bist frustriert.

Genau solche Stolpersteine will das Barrierefreiheits­stärkungs­gesetz (BFSG) ab Juni 2025 aus dem Weg räumen.

Barrierefreiheit klingt nach Paragrafen, ist aber vor allem eine Chance: Wenn deine Website auch mit Screenreader, Tastatur oder müden Augen nach einem langen Tag bedienbar bleibt, steigt die Zufriedenheit aller Besucher – und damit auch dein Umsatz.

In diesem Beitrag erfährst du:

So behältst du den Überblick, sparst Kosten und machst deine Inhalte für Millionen Menschen zugänglich, auch für dich selbst, wenn du eines Tages auf größere Schrift oder klare Kontraste angewiesen bist.

Einleitung: Pflicht & Chance zugleich

Die Zugänglichkeit von Webseiten ist nicht nur eine rechtliche Anforderung in vielen Ländern, sondern auch ethisch notwendig. Barrierefreies Webdesign sorgt dafür, dass alle Menschen – unabhängig von Behinderung, Alter oder Technik – deine Inhalte ohne Hürden nutzen können.

Barrieren können in ganz verschiedenen Formen auftreten. Auch du und ich können jederzeit von temporären Einschränkungen, wie eine kurzfristige Handverletzung, vorübergehender Sehschwäche (Augen-OP), Arbeiten in einer lärmenden Umgebung, oder schlechtem Licht, betroffen sein, wie in meinem vorherigen Beispiel dargestellt.

Warum Barrierefreiheit mehr als ein Gesetz ist

• 7,9 Mio. Menschen in Deutschland haben eine anerkannte Schwerbehinderung – das sind 9,3 % der Bevölkerung. Besonders relevant wird dies, da die Mehrheit der Menschen mit Behinderungen älter ist und die Gesellschaft insgesamt altert. So steigt auch für heute nicht Betroffene die Wahrscheinlichkeit, selbst einmal auf barrierefreie Angebote angewiesen zu sein.
  Quelle: DESTATIS
  
• Mobile Nutzer mit schlechtem Netz, Eltern mit Baby auf dem Arm oder Senioren mit Lesebrille profitieren gleichermaßen.
  
• Barrierefreiheit steigert SEO‑Ranking, Conversion‑Rate und Kundenbindung.

Geltungsbereich des Barrierefreiheitsstärkungsgesetz

Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt in erster Linie für Unternehmen, die B2C (Business-to-Consumer)-Dienstleistungen oder Produkte anbieten.

Das bedeutet, dass Unternehmen, die ihre Produkte oder Dienstleistungen direkt an Endverbraucher verkaufen, verpflichtet sind, ihre digitalen Angebote barrierefrei zu gestalten.

B2B-Unternehmen (Business-to-Business), also Unternehmen, die ihre Produkte oder Dienstleistungen an andere Unternehmen verkaufen, fallen in der Regel nicht direkt unter das BFSG.

Wer ist betroffen?

Hersteller, die Produkte entwickeln oder unter eigener Marke vertreiben.
Importeure und Händler, die Produkte in den Markt einführen oder vertreiben

Betroffen sind insbesondere Unternehmen, die folgende Produkte und Dienstleistungen anbieten:

Produkte: 
Computer, Tablets, Smartphones, Geldautomaten, Fahrausweisautomaten, Fernseher mit Internetzugang, Router und E-Book-Reader

Dienstleistungen: 
Telefondienste, E-Books, Messenger-Dienste, Bankdienstleistungen, Webshops (E-Commerce) und Personenbeförderungsdienste inklusive Ticketautomaten

Ergebnis:

Mindestens ein „Ja“?
 → Du musst deine digitale Plattform ab 2025 barrierefrei machen.

Nur „Nein“? → BFSG greift (noch) nicht, aber Barrierefreiheit lohnt sich trotzdem.

Wichtig:
Ich bin kein Rechtsanwalt und habe dieses Wissen aus öffentlich zugänglichen Quellen zusammengetragen, viele Stunden mit Artikeln im Internet und 3 Workshops bei den Website-Heros angesehen. Mit diesem Wissen habe ich den Beitrag erstellt. Du solltest dich unbedingt selbstständig und regelmäßig über den aktuellen Stand informieren,

Meine Quellen sind:

Bundesgesetzblatt BFSG
European Accessibility Act, sowie die
Bundesfachstelle-Barrierefreiheit

Was bedeutet barrierefreies Webdesign?

Barrierefreiheit folgt dem POUR-Prinzip der WCAG 2.2 (Web Content Accessibility Guidelines (WCAG)):
Die dienen als internationaler Standards. Sie gliedern sich in vier Hauptprinzipien:

1. Perceivable
(Wahrnehmbarkeit: Alt-Texte, Untertitel, gute Kontraste)

Inhalte müssen so gestaltet sein, dass Nutzer sie wahrnehmen können, unabhängig von ihrer Sinnesfähigkeit. Dies beinhaltet:

• Bilder und Grafiken mit Alt-Texten versehen
• Videos mit Untertiteln und/oder Audiodeskriptionen ausstatten
• Ausreichende Farbkontraste
• Anpassbare Schriftgrößen

2. Operable
(Bedienbarkeit: voll tastatur­bedienbar, keine Zeitfallen):

Alle Funktionen müssen über verschiedene Eingabemethoden nutzbar sein, insbesondere über die Tastatur. Wichtige Punkte sind:

• Inhalte müssen vollständig mit der Tastatur steuerbar sein
• interaktive Elemente sollten ausreichend Zeit zur Bedienung bieten
• Vermeidung von Inhalten, die Anfälle auslösen können

3. Understandable
(Verständlichkeit: klare Sprache, konsistente Navigation):

Inhalte und Bedienung der Website müssen leicht verständlich sein. Dies umfasst:

• Klare und einfache Sprache
• Konsistente Navigation und Bezeichnungen
• Hilfsmittel für Formulareingaben, wie Fehlermeldungen oder Hinweise

4. Robust
(Robustheit: kompatibel mit Screenreadern & mobilen Geräten):

Inhalte müssen mit verschiedenen Technologien und Hilfsmitteln kompatibel sein. 

Wichtige Standards und Richtlinien (WCAG, EN 301 549)

Die Web Content Accessibility Guidelines (WCAG) definieren außerdem drei Konformitätsstufen, um die Barrierefreiheit zu messen:

1. Stufe A (grundlegend): Diese Stufe umfasst die grundlegendsten Anforderungen, um Inhalte für Menschen mit Behinderungen zugänglich zu machen. Sie ist die absolute Mindestanforderung.
   
   
2. Stufe AA (erweitert): Diese Stufe beinhaltet zusätzliche Anforderungen, die eine deutlich bessere Nutzerfreundlichkeit gewährleisten, z. B. ausreichende Farbkontraste. Sie stellt in der Praxis die häufig angestrebte Stufe dar.
   
   
3. Stufe AAA (umfassend): Diese höchste Stufe deckt alle Richtlinien vollständig ab und zielt darauf ab, ein Maximum an Barrierefreiheit zu schaffen. In der Realität ist es jedoch oft schwierig, diese Stufe zu erreichen, da die Anforderungen nicht immer miteinander vereinbar sind.

Die meisten gesetzlichen Vorgaben, wie beispielsweise die EU-Richtlinie EN 301 549, verlangen mindestens die Erfüllung der Stufe AA. Dadurch wird sichergestellt, dass die wichtigsten Barrieren abgebaut werden, ohne dass die Umsetzbarkeit unnötig erschwert wird.

Quelle

Typische Barrieren und Herausforderungen für Webnutzer

• unleserliche Schriftarten
• fehlende Alt-Texte
• unzureichende Farbkontraste oder
• schlecht gestaltete Formulare

Tipps zur Verbesserung der Barrierefreiheit

Klare und konsistente Navigation

• Eine klare Struktur und konsistente Navigation helfen dir und deinen Nutzern, sich auf deiner Website zurechtzufinden:
• Verwende klare Menüs und sinnvolle Beschriftungen, um die Usability für alle Benutzer zu verbessern.
• Nutze eine hierarchische Struktur mit Überschriften (H1 bis H6), die logisch angeordnet sind.
• Vermeide komplexe oder verschachtelte Menüs.
  

Alternativtexte für Bilder

Alle relevanten Bilder sollten mit einem aussagekräftigen Alt-Tag versehen werden, um visuell beeinträchtigten Nutzern den Inhalt zu vermitteln. 

• Beschreibe den Inhalt und Zweck eines Bildes.
• Für dekorative Bilder kann der „alt“-Tag leer bleiben (alt=““).

Farbkontraste optimiere

Ein ausreichender Kontrast zwischen Text und Hintergrund erleichtert die Lesbarkeit:

• Das Kontrastverhältnis sollte mindestens 4,5:1 betragen (gemäß WCAG-Richtlinien).

• Vermeide ausschließliche Farbkennzeichnungen für wichtige Informationen
  (z. B. nur rote Fehlermeldungen, die für blinde Nutzer nicht bedienbar sind, sollten vermieden werden.

Skalierbarer Text und responsives Design

Stelle sicher, dass Inhalte auch auf mobilen Geräten und bei Zoom-Zooms gut funktionieren:

• Verwende relative Einheiten (z. B. „em“ oder „rem“) für Schriftgrößen.
• Teste deine Website bei verschiedenen Bildschirmgrößen und Vergrößerungen

Tastaturfreundlichkeit

Viele Menschen verwenden nur die Tastatur zur Navigation:

• Alle interaktiven Elemente sollten mit der Tabulatortaste erreichbar sein.
• Nutze sichtbare Fokus-Indikatoren, um hervorzuheben, welches Element gerade aktiv ist.

Screenreader-Unterstützung

Optimiere deine Website für Nutzer von Screenreadern:

• Nutze ARIA-Rollen (Accessible Rich Internet Applications), um Interaktionselemente zu beschreiben.
• Stelle sicher, dass Formularfelder korrekt beschriftet sind (mit “label“-Elementen).

Klare Sprache und einfach zu verstehende Inhalte

Texte sollten für ein breites Publikum verständlich sein:

• Vermeide Fachjargon oder erkläre ihn, wenn es erforderlich ist.
• Strukturiere Informationen in kurzen Absätzen, Listen oder Tabellen.

Zeitliche Inhalte steuerbar machen

Interaktive Inhalte wie Videos oder Animationen sollten Steuerungsoptionen bieten:

• Füge Play-, Pause- und Stopp-Schaltflächen hinzu.

• Vermeide automatische Wiedergabe von Videos oder Sounds.

Barrierefreie Formulare

Formulare sollten leicht zu verstehen und auszufüllen sein:

• Nutze klare Labels und Anleitungen.
• Markiere Pflichtfelder eindeutig.
• Füge Fehlermeldungen hinzu, die die Ursache klar kommunizieren.

Regelmäßige Tests

Barrierefreiheit ist ein fortlaufender Prozess:

• Führe manuelle Tests mit Tools wie Screenreadern oder der Tastaturnavigation durch.
• Nutze automatisierte Tools wie Axe oder Lighthouse, um potenzielle Barrieren zu erkennen.
• Hole Feedback von Nutzern mit Behinderungen ein.

• Verwendung von semantischem HTML: Die richtige Verwendung von HTML-Elementen hilft Screenreadern, den Inhalt korrekt zu interpretieren.
  
• Textalternativen für Bilder: Jedes Bild sollte mit einem aussagekräftigen Alt-Tag versehen werden, um visuell beeinträchtigten Nutzern den Inhalt zu vermitteln.
  
• Kontraste: Achten Sie auf ausreichende Farbkontraste, um sicherzustellen, dass Texte auch für Menschen mit Seheinschränkungen lesbar sind.
  
• Navigation: Stellen Sie sicher, dass die Navigation einfach und intuitiv ist. Benutzer sollten mit der Tastatur durch die Webseite navigieren können.
  
• Formulare: Formulare sollten klar strukturiert und mit Beschriftungen versehen sein, um die Eingabe für alle Benutzer zu erleichtern.

Häufige Stolperfallen – und wie du sie umgehst

• Maus‑Only Menüs → Ersetze Hover‑Menüs durch klickbare Buttons.
  
• PDF‑Downloads ohne Tags → Nutze PDF/UA‑Standard oder ersetze durch HTML.
  
• CAPTCHA ohne Audio → Verwende reCAPTCHA v3 oder Logik‑Fragen.
  
• Autoplay‑Videos → Deaktiviere Autoplay, füge Play/Pause‑Taste hinzu.
  

Barrierefreiheit von Anfang an

Die Barrierefreiheit einer Website oder Onlineshops, gelingt am besten, wenn sie von Anfang an Teil eines Website-Projektes ist. Es ist wichtig, dass alle, die daran beteiligt sind, die Bedeutung von barrierefreien Websites verstehen.

---

Warum 100%ige Barrierefreiheit nicht erreichbar ist

Eine hundertprozentige Barrierefreiheit ist ein ehrgeiziges Ziel. Die individuellen Bedürfnisse von Menschen mit Behinderungen sind jedoch so vielfältig wie die Menschen selbst. Eine Lösung, die für alle perfekt funktioniert, ist daher kaum denkbar.

Ein Beispiel: Für Menschen mit Sehbehinderungen ist es wichtig, dass Texte durch hohe Kontraste gut sichtbar sind. Personen mit lichtempfindlicher Migräne könnten jedoch genau diese hohen Kontraste als unangenehm empfinden. Auch ständig wechselnde Technologien und individuelle Nutzungsszenarien erschweren eine perfekte Barrierefreiheit.

Es sollte das Ziel sein, so viele Barrieren wie möglich abzubauen und die Nutzererfahrung für eine möglichst breite Zielgruppe zu optimieren.

Rechtliche Aspekte und Compliance sicherstellen

Unternehmen sollten einen klaren Prozess etablieren, um sicherzustellen, dass digitale Angebote den geltenden Anforderungen , Gesetzen und Vorschriften entsprechen.

Das heißt, dass eine Website oder App auf die Einhaltung der entsprechenden Standards geprüft und regelmäßig aktualisiert wird.

Wie stelle ich die Barrierefreiheit meiner Website sicher?

1. Rechtliche Beratung: Gerade im Hinblick auf spezifische Ausnahmen oder branchenspezifische Anforderungen ist der Austausch mit einem Rechtsanwalt oder einer Fachstelle ratsam.
   
2. Barrierefreiheitsprüfung:  Regelmäßige Überprüfungen der digitalen Angebote sorgen dafür, dass geltende Standards eingehalten werden.
   Du kannst deine Website selbst auf WCAG-Konformität durchtesten. 
   Es gibt offizielle Prüfstellen wie
   https://bitvtest.de/tests-und-beratung/bik-bitv-test-web#c393
   
3. Dokumentation: Dokumentiere alle durchgeführten Maßnahmen zur Barrierefreiheit. Dies kann im Falle einer Überprüfung oder eines Rechtsstreits sehr hilfreich sein.
   
4. Barrierefreiheitserklärung: Eine Barrierefreiheitserklärung ist eine öffentlich zugängliche Erklärung, in der du darlegen kannst, welche Maßnahmen du zur Umsetzung von Barrierefreiheit ergriffen hast. Sie dient als Nachweis für deine Bemühungen und schafft Vertrauen bei den Nutzern.

Fazit

Barrierefreiheit im Webdesign ist unerlässlich, um eine inklusive digitale Welt zu schaffen. Durch die Implementierung einfacher Praktiken können Designer und Entwickler sicherstellen, dass Webseiten für alle zugänglich sind.

Schnell‑Checkliste:

☐ Alt‑Texte für alle Bilder
☐ Kontrast ≥ 4,5 : 1
☐ Navigation rein per Tab möglich
☐ Fokus‑Ring gut sichtbar
☐ Formulare haben Labels & Fehlermeldungen
☐ Videos mit Untertiteln
☐ Barrierefreiheits­erklärung online

Disclaimer

Dieser Artikel ersetzt keine Rechtsberatung. Informiere dich regelmäßig über den aktuellen Stand oder sprich mit einem Fachanwalt.

Weitere Quellen:

Das Barrierefreiheitsstärkungsgesetz (BFSG) tritt ab Juni 2025 in Kraft. Wer es sich durchlesen will, findet es hier: Bundesgesetzblatt.

Das BFSG setzt den EU Accessibillity Act in deutsches Recht um. Ziel ist es, gleiche Chancen und Teilhabe in der digitalen Welt zu gewährleisten.