Das BFSG
Das Barrierefreiheitsstärkungsgesetz (BFSG) ist ein deutsches Gesetz, das am 22. Juli 2021 verabschiedet wurde und auf der EU-Richtlinie über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen basiert. Es verpflichtet Hersteller, Händler und Dienstleister, ihre Produkte und digitalen Angebote so zu gestalten, dass sie auch von Menschen mit Behinderungen genutzt werden können. Dazu gehören unter anderem Computer, Smartphones, Geldautomaten, E-Books, Webseiten und bestimmte Dienstleistungen wie Bank- oder Verkehrsdienste. Das Gesetz legt Mindeststandards für Barrierefreiheit fest, die ab 28. Juni 2025 verbindlich gelten. Ziel ist es, mehr gesellschaftliche Teilhabe zu ermöglichen und zugleich gleiche Wettbewerbsbedingungen innerhalb der EU zu schaffen. Damit stärkt das BFSG die Rechte von Verbraucherinnen und Verbrauchern mit Behinderungen und trägt zu einer inklusiveren Gesellschaft bei.
EN 301549
Europäische Norm 301549
Die Europäische Norm EN 301 549 liefert die technischen Standards zur praktischen Umsetzung.
EAA
European Accessibility Act
Der European Accessibility Act (EAA) ist die EU-Richtlinie, die den Rahmen vorgibt.
BFIT-Bund
Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik
Die BFTI-Bund-Verordnung konkretisiert die Anforderungen für die barrierefreie Informationstechnik in Deutschland.
Die WCAG
Die WCAG (Web Content Accessibility Guidelines) sind internationale Richtlinien für barrierefreie Webinhalte. Sie wurden vom W3C entwickelt, um sicherzustellen, dass Websites, Apps und digitale Dokumente für alle Menschen zugänglich sind – auch für Menschen mit Behinderungen. Die WCAG basieren auf vier Prinzipien: Inhalte müssen wahrnehmbar, bedienbar, verständlich und robust sein. Jede Richtlinie ist in Erfolgskriterien unterteilt, die in drei Stufen gegliedert sind: A (grundlegend), AA (Standard) und AAA (höchste Barrierefreiheit). Beispiele sind ausreichende Farbkontraste, nutzbare Tastaturnavigation oder alternative Texte für Bilder. Unternehmen und öffentliche Stellen nutzen die WCAG als Grundlage, um rechtliche Anforderungen zur Barrierefreiheit zu erfüllen. Ziel ist es, digitale Inhalte so zu gestalten, dass sie von möglichst vielen Menschen unabhängig von Einschränkungen oder Technologien genutzt werden können.
WCAG 2.1
Die WCAG 2.1 erweitert die ursprünglichen Richtlinien um zusätzliche Anforderungen, die besonders Menschen mit Sehbeeinträchtigungen, kognitiven Einschränkungen und mobilen Endgeräten zugutekommen.
WCAG 2.2
Die WCAG 2.2 baut darauf auf und ergänzt weitere Erfolgskriterien, um die Benutzerfreundlichkeit und Zugänglichkeit – vor allem für Personen mit kognitiven Einschränkungen und motorischen Behinderungen – noch stärker zu verbessern.
Stufe A und AA
Die Stufe A der WCAG umfasst die grundlegenden Anforderungen an Barrierefreiheit, etwa Alternativtexte für Bilder oder eine nutzbare Tastaturnavigation. Die Stufe AA geht darüber hinaus und verlangt zusätzliche Maßnahmen wie ausreichende Farbkontraste oder skalierbare Texte, um Inhalte für ein breiteres Spektrum an Nutzer*innen zugänglich zu machen.
Stufe AAA
Die Stufe AAA der WCAG stellt die höchsten Anforderungen an Barrierefreiheit und umfasst zusätzliche Kriterien wie erweiterte Kontrastverhältnisse, Gebärdensprachinterpretationen für Videos oder vereinfachte Inhalte. Sie ist meist nicht verpflichtend, dient aber als Idealziel für besonders inklusive digitale Angebote.
Die 4 Prinzipien der WCAG
Die WCAG (Web Content Accessibility Guidelines) basieren auf vier grundlegenden Prinzipien, die als Rahmen für barrierefreie digitale Inhalte dienen. Sie beschreiben, was erfüllt sein muss, damit Websites, Apps und Dokumente für möglichst viele Menschen zugänglich sind – unabhängig von Einschränkungen oder genutzten Technologien. Diese Prinzipien sind: Inhalte müssen wahrnehmbar sein, damit sie von allen Sinnesgruppen erfasst werden können; sie müssen bedienbar sein, sodass Nutzer*innen mit verschiedenen Eingabemethoden navigieren können; sie müssen verständlich sein, damit Informationen und Funktionen leicht erfassbar bleiben; und sie müssen robust sein, damit Inhalte mit unterschiedlichen Geräten und Assistenztechnologien zuverlässig funktionieren.
Wahrnehmbar
Das Prinzip der Wahrnehmbarkeit besagt, dass Informationen und Inhalte so aufbereitet werden müssen, dass alle Nutzer*innen sie über mindestens einen ihrer Sinne aufnehmen können. Dazu gehören zum Beispiel Alternativtexte für Bilder, Untertitel für Videos oder ausreichende Farbkontraste für Menschen mit Sehbeeinträchtigungen.
Bedienbar
Das Prinzip der Bedienbarkeit bedeutet, dass Nutzer*innen alle Funktionen einer Website oder Anwendung mit unterschiedlichen Eingabemethoden wie Tastatur, Maus oder Sprachsteuerung ausführen können. Zusätzlich sollen keine Hindernisse wie automatisch startende Animationen oder unübersichtliche Navigationselemente die Nutzung erschweren.
Verständlich
Das Prinzip der Verständlichkeit stellt sicher, dass Inhalte und Bedienoberflächen klar, vorhersehbar und leicht zu begreifen sind, damit Nutzerinnen Texte lesen und Eingaben ohne unnötige Hürden tätigen können. Darüber hinaus soll die Gestaltung konsistent sein, sodass sich Nutzerinnen jederzeit orientieren können.
Robust
Das Prinzip der Robustheit verlangt, dass Inhalte so gestaltet sind, dass sie mit verschiedenen Browsern, Endgeräten und Assistenztechnologien zuverlässig funktionieren und auch in Zukunft zugänglich bleiben. Dadurch wird gewährleistet, dass auch Weiterentwicklungen von Technologien die Nutzung nicht einschränken.
Beispiele für Accessibility Guidelines
Adobe
Die Accessibility Guidelines von Adobe geben Entwicklerinnen und Designerinnen praktische Empfehlungen, wie digitale Inhalte in Programmen wie Adobe Acrobat, InDesign, Illustrator oder PDF-Dokumenten barrierefrei gestaltet werden können. Sie konzentrieren sich auf Aspekte wie die richtige Nutzung von Tags, Alternativtexten, Lesereihenfolge, Farbkontraste und strukturierte Vorlagen, damit Inhalte mit Screenreadern und anderen Assistenztechnologien zugänglich sind.
Apple
Die Accessibility Guidelines von Apple sind Empfehlungen und Vorgaben, wie Apps und digitale Inhalte für iOS, iPadOS, macOS, watchOS und tvOS barrierefrei gestaltet werden können. Sie sind Teil der Human Interface Guidelines (HIG) und helfen Entwicklerinnen und Designerinnen dabei, Anwendungen für möglichst viele Menschen zugänglich zu machen.
eBay
Die Accessibility Guidelines von eBay bieten Designerinnen und Entwicklerinnen konkrete Vorgaben, wie digitale Produkte und Services von eBay barrierefrei gestaltet werden können. Sie orientieren sich an den WCAG, legen aber besonderen Wert auf praxisnahe Design-Patterns, Code-Beispiele und die Integration barrierefreier Komponenten in das eBay MIND Pattern Library.
Die Accessibility Guidelines von Google sind Teil der Material Design Guidelines und geben Entwicklerinnen sowie Designerinnen klare Empfehlungen, wie Apps und Websites barrierefrei gestaltet werden können. Sie decken Bereiche wie Farb- und Kontrastgestaltung, Touch-Ziele, Screenreader-Kompatibilität und semantische Strukturierung ab und orientieren sich eng an den WCAG.
Microsoft
Die Accessibility Guidelines von Microsoft sind in den Microsoft Design Guidelines verankert und geben umfassende Empfehlungen für die barrierefreie Gestaltung von Software, Websites und Apps. Sie konzentrieren sich auf Themen wie Farbkontraste, Tastaturbedienbarkeit, Screenreader-Unterstützung und die Umsetzung inklusiver Designs, die sich an den WCAG orientieren.
Porsche
Porsche integriert Barrierefreiheit als festen Bestandteil in sein Design System, wobei digitale Komponenten so gestaltet sind, dass Inhalte für alle zugänglich sind und Funktionen unabhängig von Geräten oder Eingabemethoden nutzbar bleiben.
designsystem. Zudem verpflichtet sich Porsche über seine Accessibility-Statements, die Anforderungen der WCAG kontinuierlich an der Verbesserung der digitalen Barrierefreiheit zu arbeiten.
Shopify
Die Accessibility Guidelines von Shopify sind Teil des offenen Styleguide Polaris React. Die Polaris-Komponenten sind so gestaltet, dass sie den WCAG 2.1 Erfolgskriterien der Stufen A und AA entsprechen sollen. Die Richtlinien umfassen Best Practices etwa für Farb- und Kontrastverhältnisse, Tastatur-Navigation, Alt-Texte, logische Seitenstruktur und Medienzugänglichkeit wie kontrollierbare Slideshows oder Pausenfunktionen bei automatisch abspielenden Inhalten.
Wikimedia
Wikimedia verwendet in seinem Codex Style Guide Accessibility-Grundsätze, die darauf abzielen, Interfaces von vornherein barrierefrei zu gestalten, etwa durch Einhaltung der WCAG Erfolgskriterien auf Level AA und durch klare Regeln zu Farben, Schriftgrößen, Tastaturbedienung und alternativen Texten. Darüber hinaus verpflichtet sich die Foundation über ihre Accessibility Statement, das Wikimedia Foundation Website Teile der WCAG 2.1 Level AA Kriterien erfüllen (teilweise konform), und arbeitet regelmäßig mit Tests und Feedback aus der Community, um die Barrierefreiheit weiter zu verbessern.
FAQ
Barrierefreiheit im Webdesign ist längst kein „Nice-to-have“ mehr, sondern ein zentraler Bestandteil moderner Gestaltung. Gerade für Designer*innen stellen sich dabei viele praktische Fragen. Die folgenden häufig gestellten Fragen (FAQ) geben Antworten auf die wichtigsten Punkte und helfen, Barrierefreiheit von Anfang an in den Designprozess zu integrieren.
Warum ist Barrierefreiheit im Webdesign wichtig?
Barrierefreiheit sorgt dafür, dass alle Menschen – unabhängig von Behinderungen oder technischen Einschränkungen – digitale Inhalte nutzen können. Sie verbessert nicht nur die Inklusion, sondern steigert auch die Benutzerfreundlichkeit und Reichweite einer Website.
Welche Farben und Kontraste sind barrierefrei?
Nach den WCAG sollten Texte einen ausreichenden Kontrast zum Hintergrund haben: mindestens 4,5:1 für normalen Text und 3:1 für große Schrift. Farbinformationen sollten nie allein zur Vermittlung von Inhalten genutzt werden (z. B. nicht nur „rote Felder sind Pflicht“).
Was bedeutet „Alt-Text“ und warum ist er wichtig?
Alt-Texte sind kurze Beschreibungen für Bilder, die von Screenreadern vorgelesen werden. Sie ermöglichen sehbehinderten Nutzer*innen, die Inhalte eines Bildes zu verstehen und sind zudem wichtig für SEO.
Welche Schriften sind barrierefrei?
Barrierefreie Schriften sind klar, gut lesbar und ohne übermäßige Verzierungen. Besonders geeignet sind serifenlose Schriften, ausreichend große Schriftgrößen sowie genügend Zeilenabstand, damit Texte leicht erfassbar bleiben.
Wie kann ich Navigation barrierefrei gestalten?
Eine barrierefreie Navigation muss per Tastatur bedienbar sein, logisch strukturiert werden und konsistent auf allen Seiten erscheinen. Zusätzlich helfen „Skip-Links“ (z. B. „Zum Inhalt springen“) und klare Beschriftungen.
Muss ich Videos und Multimedia-Inhalte auch barrierefrei machen?
Ja, Videos benötigen Untertitel für gehörlose oder schwerhörige Menschen und im Idealfall auch Audiodeskriptionen für blinde Nutzer*innen. Für Audioinhalte sollte es Transkripte geben.
Ist Barrierefreiheit im Webdesign Pflicht?
Für öffentliche Stellen und viele Unternehmen ist Barrierefreiheit durch Gesetze wie das Barrierefreiheitsstärkungsgesetz (BFSG) und die EU-Richtlinien verpflichtend. Aber auch für andere Websites bringt sie klare Vorteile in Usability und Reichweite.
Wie teste ich, ob meine Website barrierefrei ist?
Es gibt verschiedene Tools wie den WAVE Accessibility Checker, den axe DevTools oder den Lighthouse-Test von Google, die erste Hinweise geben. Zusätzlich sind manuelle Tests mit Tastatur und Screenreader unverzichtbar, um echte Nutzererfahrungen zu simulieren.
Wie gehe ich mit Formularen barrierefrei um?
Formulare müssen klare Beschriftungen (Labels) haben, die mit den Eingabefeldern verbunden sind. Fehlerhinweise sollten verständlich formuliert und zusätzlich visuell wie auch programmatisch erkennbar sein.
Bedeutet Barrierefreiheit, dass Design langweilig sein muss?
Nein – barrierefreies Design kann modern, kreativ und ansprechend sein. Die Richtlinien schränken nicht die Gestaltung ein, sondern stellen sicher, dass Kontraste, Struktur und Bedienbarkeit für alle nutzbar sind.