Stell dir vor, du möchtest eine Webseite besuchen, aber die Schrift ist zu klein, die Farben sind schwer zu erkennen oder ein Formular ist nicht mit der Tastatur bedienbar. Für Millionen von Menschen mit Behinderungen, Senioren, Menschen mit temporären Einschränkungen oder in speziellen Situationen ist dies leider Alltag. Doch das muss nicht sein! Barrierefreie Webseiten sind der Schlüssel zu einem inklusiven Online-Erlebnis für wirklich alle.
Barrierefreiheit nützt uns allen. Eine Webseite, die für einen Screenreader optimiert ist, ist auch für Suchmaschinen leichter zu verstehen und wird besser gerankt. Klare Strukturen, intuitive Navigation und gute Kontraste helfen nicht nur sehbehinderten Menschen, sondern auch dir, wenn du unterwegs bist oder schnell Informationen finden möchtest. Wir sollten das Internet für jeden zugänglich gestalten.
Zudem holt die Gesetzgebung auf. Mit dem European Accessibility Act (EAA), der ab dem 28. Juni 2025 verpflichtend wurde, und dem darauf basierenden Barrierefreiheitsstärkungsgesetz (BFSG) in Deutschland, wird Barrierefreiheit zur rechtlichen Notwendigkeit.
Die Konformitätsanforderungen richten sich nach dem Stand der Technik, insbesondere der Norm EN 301 549, die den erheblichen Teil der WCAG – Web Content Accessibility Guidelines – als Maßstab einführt. Diese im öffentlichen Sektor bereits etablierte Norm wird durch die europäischen Normungsinstitutionen kontinuierlich im Sinne des aktuellen Stands der Technik weiterentwickelt.
Grundsätzlich gilt das BFSG in Deutschland für alle Anbieter von Produkten und Dienstleistungen, die in der EU für Verbraucher und Verbraucherinnen bereitgestellt werden – also auch Webseiten, Apps und Online-Shops.
Davon ausgenommen sind Kleinstunternehmen mit weniger als 10 Mitarbeitern und unter 2 Mio. EUR Jahresumsatz. Das gilt allerdings nur für Dienstleistungen. Wer Produkte anbietet, ist meist trotzdem betroffen.
Es gibt keine feste EU-weite Strafhöhe, sondern nationale Regelungen. In Deutschland regelt das BFSG die Durchsetzung des European Accessibility Act.
Verstöße gelten als Ordnungswidrigkeiten und es können Bußgelder bis zu 100.000 EUR verhängt werden. Zusätzlich drohen Abmahnungen und Reputationsschäden, gerade wenn Barrieren öffentlich bekannt werden.
Es ist höchste Zeit, sich mit barrierefreien Webseiten auseinanderzusetzen und Online-Präsenzen zukunftssicher zu machen.
Dieser Leitfaden zeigt dir, wie du deine Webseite Schritt für Schritt barrierefrei gestalten kannst. Es ist einfacher, als du denkst, und die Vorteile sind enorm – für dich und für deine Nutzer.
Barrierefreie Webseiten basieren auf den Web Content Accessibility Guidelines (WCAG), den international anerkannten Standards für zugängliche Webinhalte. Die neueste Version, WCAG 2.2 (seit Oktober 2023), erweitert die Anforderungen, besonders im Hinblick auf mobile Barrierefreiheit und kognitive Zugänglichkeit. Im Kern basieren alle WCAG-Versionen auf vier fundamentalen Prinzipien, die oft als POUR-Prinzipien bezeichnet werden:
Viele Nutzer sind auf die Tastatur-Bedienung angewiesen – sei es aufgrund motorischer Einschränkungen oder der Verwendung von Hilfstechnologien.
Mit über 50% mobiler Internetnutzung weltweit rückt die mobile Barrierefreiheit in den Fokus. WCAG berücksichtigt die besonderen Anforderungen von Touch-Bedienung und kleinen Bildschirmen.
Dragging Movements
Barrierefreie Webseiten müssen Alternativen zu Drag-and-Drop bieten
Target Size (Minimum)
Interaktive Elemente auf Webseiten benötigen Mindestgröße (24 x 24 CSS-Pixel)
Benutzerfreundlichkeit
Kognitive Barrierefreiheit wird oft übersehen, betrifft aber einen großen Teil der Nutzer. Die neuen Kriterien reduzieren kognitive Belastung und verbessern die Benutzererfahrung für alle.
Nachdem du die grundlegenden Prinzipien verstanden hast, geht es nun an die praktische Umsetzung. Hier sind detaillierte Tipps, um deine barrierefreien Webseiten zu realisieren und die WCAG-Anforderungen zu erfüllen.
Ausreichende Farbkontraste sind absolut entscheidend für die Lesbarkeit deiner Inhalte, insbesondere für Menschen mit Sehschwäche oder Farbblindheit. Die Richtlinien legen hier klare Mindestanforderungen fest:
Verwende zuverlässige Kontrastprüfer wie den Kontrast-Tester von barrierefreies.design
Er verwendet nicht nur WCAG 2.2, in Level AA und AAA, sondern auch zusätzlich den APCA-Check, der genauer misst und in Zukunft in WCAG 3.0 Standard werden könnte.
https://webaim.org/resources/contrastchecker
https://www.figma.com/color-contrast-checker
https://kontrastrechner.de
https://coolors.co/contrast-checker
https://accessibleweb.com/color-contrast-checker
Eine gute Lesbarkeit durch durchdachte Farb- und Kontrastwahl ist die Basis für eine wirklich barrierefreie Webseite.
Wichtige Informationen sollten niemals ausschließlich durch Farbe vermittelt werden. Füge zusätzlich Symbole oder Textinformationen hinzu.
Überschriften sind semantische Marker, die Screenreadern und Suchmaschinen helfen, die Struktur und Hierarchie deiner Inhalte zu verstehen. Für Nutzer, die sich mit einem Screenreader auf deiner Seite bewegen, sind Überschriften wie ein Inhaltsverzeichnis.
Beachte immer die Hierarchie der Überschriften. Verwende Überschriften (H1, H2, H3, H4, etc.) in der korrekten, logischen Reihenfolge. Eine H1 ist die Hauptüberschrift deiner Seite und sollte nur einmal pro Seite verwendet werden. Überspringe niemals Überschriftenebenen.
Nutze CSS, um die optische Gestaltung anzupassen, anstatt Überschriften-Tags nur aus optischen Gründen zu verwenden.
Eine gut durchdachte Überschriftenstruktur macht deine barrierefreien Webseiten für Menschen und Suchmaschinen gleichermaßen besser verständlich und navigierbar.
Für blinde und sehbehinderte Menschen sind Bilder ohne textliche Beschreibung unsichtbar. Alt-Texte beschreiben den Inhalt und den Zweck eines Bildes. Jedes relevante Bild braucht einen präzisen Alt-Text. Dekorative Bilder erhalten einen leeren Alt-Text (alt=““). Biete bei komplexen Grafiken eine ausführliche Beschreibung im umgebenden Text oder in einem verlinkten Dokument an.
Sorgfältige Alt-Texte machen deine barrierefreien Webseiten nicht nur zugänglicher, sondern verbessern auch die Suchmaschinenoptimierung (SEO).
ARIA (Accessible Rich Internet Applications) Labels sind spezielle HTML-Attribute, die zusätzliche semantische Informationen zu Benutzeroberflächenelementen hinzufügen. Sie erklären Screenreadern die Funktion und den Zustand von Elementen, besonders bei dynamischen Inhalten oder komplexen Widgets.
aria-label für interaktive Elemente
Für Elemente ohne sichtbaren Text, zum Beispiel für Menüs.
html
<button aria-label="Hauptmenü öffnen">
<span class="hamburger-icon"></span>
</button>
aria-labelledby für Formulare
Beschreibt die semantische Verbindung zwischen Elementen.
html
<h2 id="kontakt-titel">Kontaktformular</h2>
<form aria-labelledby="kontakt-titel">
<label for="name">Name *</label>
<input type="text" id="name" required>
<input
class="apbct_special_field apbct_email_id__elementor_form"
name="apbct__email_id__elementor_form"
aria-label="apbct__label_id__elementor_form"
type="text" size="30" maxlength="200" autocomplete="off"
value=""
/></form>
aria-describedby für Hilfstexte
Unterscheidet zwischen Hauptlabel und Zusatzinformationen und erklärt die Reihenfolge beim Vorlesen – erst das Label, dann die Beschreibung.
<input type="email"
id="email"
aria-describedby="email-hilfe"
aria-required="true">
<div id="email-hilfe">Geben Sie eine gültige E-Mail-Adresse ein</div>
aria-expanded für Navigation
Zeigt an, ob ein Element aufgeklappt „true“ oder zugeklappt „false“ ist.
html
<button aria-expanded="false"
aria-controls="haupt-menu"
aria-label="Hauptnavigation">
Menü
</button>
<nav id="haupt-menu" aria-hidden="true">
<ul>
<li><a href="#home">Startseite</a></li>
<li><a href="#about">Über uns</a></li>
</ul>
</nav>
aria-live für dynamische Inhalte
Erklärt timing-Verhalten des Screenreaders und informiert über dynamische Änderungen der Seite (z.B. Fehlermeldungen). Unterscheidet zwischen „polite“ (warten) und „assertive“ (unterbrechen).
html
<div aria-live="polite" id="status-meldung">
</div>
Noch mehr aria Attribute und Beschreibungen findest du auf: developer.mozilla.org.
Die korrekte und sparsame Anwendung von ARIA-Attributen ist ein mächtiges Werkzeug, um die Zugänglichkeit deiner barrierefreien Webseiten erheblich zu verbessern.
Alle interaktiven Elemente deiner Webseite müssen per Tastatur erreichbar und bedienbar sein. Deine barrierefreie Webseiten müssen hier einwandfrei funktionieren.
Sichtbarer Fokus-Indikator
Beim Navigieren mit der Tab-Taste muss immer klar erkennbar sein, welches Element den Fokus hat. Passe ihn mit CSS an.
css
.button:focus,
.nav-menu a:focus {
outline: 3px solid #005fcc;
outline-offset: 2px;
background-color: #f0f8ff;
}
Logische Tab-Reihenfolge
Die Reihenfolge der Fokus-Elemente muss der visuellen Anordnung und der logischen Struktur der Seite entsprechen.
html
<header>
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
<nav tabindex="0">
</nav>
</header>
<main id="main-content" tabindex="-1">
</main>
Skip-Links (Sprunglinks)
Ein unsichtbarer Link, der Nutzern erlaubt, direkt zum Hauptinhalt zu springen.
css
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: #000;
color: #fff;
padding: 8px 16px;
text-decoration: none;
z-index: 9999;
border-radius: 4px;
}
.skip-link:focus {
top: 6px;
}
Teste deine Webseite regelmäßig mit der Tastatur. Dies ist ein einfacher, aber äußerst effektiver Test, um die Zugänglichkeit deiner barrierefreien Webseiten zu überprüfen.
Deine barrierefreie Webseiten müssen auch auf Smartphones und Tablets optimal funktionieren. Die WCAG-Standards haben hier spezielle Anforderungen:
Fingerfreundliche Touch-Ziele
Mindestens 44 x 44 CSS-Pixel für interaktive Elemente, mit ausreichend Abstand. Drag & Drop Alternativen sind vorhanden.
Responsives Design
Anpassung an Bildschirmgrößen und Orientierungen ohne einen horizontalen Scroll oder abgeschnittene Inhalte. Motion-Animationen können deaktiviert werden.
Zoom-Funktion
Nutzer müssen bis zu 200% zoomen können, ohne Layout-Probleme.
Mobile Barrierefreiheit ist entscheidend für die Reichweite und Nutzerfreundlichkeit deiner Webseiten in der heutigen mobilen Welt.
Damit Videos und Audiodateien für alle zugänglich sind, müssen sie barrierefrei gestaltet werden. So werden deine Webseiten auch multimedial inklusiv.
Videos mit Untertiteln (Captions)
Unerlässlich für gehörlose und schwerhörige Menschen. Beschreibe auch wichtige Geräusche.
Audiodeskriptionen für Videos
Wichtig für blinde und sehbehinderte Menschen. Beschreibt visuelle Informationen während Dialogpausen.
Transkripte für Audiodateien
Biete ein vollständiges Texttranskript an. Dies verbessert zusätzlich die Indexierbarkeit, Keyword-Abdeckung und kann in den SERPs ausgespielt werden.
Autoplay deaktivieren
Videos und Audios sollten niemals automatisch starten.
Keyboard-zugängliche Media-Controls
Bedienelemente müssen vollständig mit der Tastatur bedienbar sein.
Durch diese Alternativen können deine multimedialen Inhalte auf barrierefreien Webseiten von einem breiten Publikum genutzt werden.
Eine Webseite ist erst dann barrierefrei, wenn sie gründlich getestet wurde. Eine Kombination aus automatisierten und manuellen Tests ist dabei am effektivsten.
Der offensichtlichste Vorteil automatisierter Accessibility-Tools liegt in der enormen Zeitersparnis. Statt jede Webseite manuell auf unzählige WCAG-Kriterien zu prüfen, scannen diese Tools binnen Sekunden komplette Websites und identifizieren potenzielle Barrieren.
Silktide kann ganze Sitemaps durchforsten und gibt einen umfassenden Überblick über den Accessibility-Status deiner Website. Im Accessibility Checker lassen sich Farben und Kontrast, Alt-Texte, Focus-Reihenfolge und Überschriften-Hierarchie scannen und auswerten. Alle Texte deiner Webseite können per Screen-Reader vorgelesen werden.
Mit Hilfe der Farb- und Schärfemodifikation kannst du dich in die Lage sehbehinderter Menschen versetzen und deine Website entsprechend anzeigen lassen. HTML lässt sich einfach auslesen und die Darstellung deiner Webseite auf verschiedenen mobilen Geräten ist möglich.
Google Lighthouse kennt jeder, der seine Website auf Performance getestet und optimiert hat. Das Tool bietet nicht nur einen umfangreichen Geschwindigkeitstest, sondern neben Best Practices – technische Hürden in der Benutzerfreundlichkeit – und einer grundlegenden SEO-Auswertung zusätzlich auch den Accessibility-Test. Nach Google eigenen Angaben wird hier mit WCAG 2.1 in Level A und AA getestet.
Das Tool kann als Chrome-Extension installiert oder über die PageSpeed Insights Website verwendet werden.
WAVE Web Accessibility Evaluator arbeitet ähnlich wie Silktide und zeigt dir übersichtlich Probleme in Kontrast, Überschriftenstruktur, Focus-Reihenfolge oder den ARIA-Attributen auf.
Axe Dev Tools integriert sich in den Entwicklungsworkflow, indem es sich in die Entwicklerkonsole installiert. Im kostenfreien Test wird deine Website gescannt und Fehler lokalisiert. Weitere Hilfe gibt es in der kostenpflichtigen Version.
Elementor Ally erweitert den Elementor Page Builder um native Accessibility-Features in einem WordPress-Plugin. Es integriert Accessibility-Prüfungen direkt in das visuelle Interface und bietet automatisierte Compliance-Checks für alle Elementor-Widgets. Web-Designer können Barrierefreiheit in Echtzeit validieren, ohne zwischen verschiedenen Tools zu wechseln.
WP Accessibility ist ein benutzerfreundliches WordPress-Plugin, das Probleme mit der Barrierefreiheit durch Features wie Skip-Links, Fokus-Umrisse und Alt-Text-Korrekturen behebt. Es bietet zusätzlich einen Farbkontrast-Tester und eine optionale Symbolleiste für Besucher zur Anpassung von Schriftgrößen und Kontrasten.
Obwohl es keine vollständige WCAG-Konformität garantiert, wie die meisten Plugins für WordPress, ist es eine ausgezeichnete Grundlage zur Verbesserung der Barrierefreiheit und User Experience.
VoiceOver (macOS/iOS) oder TalkBack (Android) unterstützen dich beim Vorlesen deiner Webseite. Nutze die integrierten Screenreader auf deinen mobilen Geräten.
Automatisierte Tools sind unverzichtbar für eine effiziente, skalierbare Barrierefreiheits-Prüfung, ersetzen aber nicht die menschliche Expertise und echte Nutzertests.
Barrierefreie Webseiten sind weit mehr als nur eine gesetzliche Vorgabe. Sie sind ein strategischer Vorteil und ein Gewinn für alle – für dich als Betreiber und für jeden einzelnen Nutzer.
In Deutschland leben ca. 7,8 Millionen Menschen mit anerkannter Schwerbehinderung. Hinzu kommen Millionen mit temporären oder situativen Einschränkungen. Mit barrierefreien Webseiten erreichst du diese Zielgruppe und erschließt dir mehr Nutzer.
Suchmaschinen wie Google lieben barrierefreie Webseiten. Viele Barrierefreiheitsmaßnahmen sind gleichzeitig Best Practices für SEO.
Bessere Struktur
hilft Suchmaschinen, den Inhalt besser zu verstehen.
Alt-Texte
verbessern die Bildersuche, wichtig für Screenreader und Suchmaschinen.
Klare Navigation
erleichtert Suchmaschinen und Crawlern das Durchsuchen deiner Webseite.
Was für Menschen mit Behinderungen notwendig ist, ist für alle anderen bequemer. Eine leicht bedienbare Webseite mit klaren Texten und intuitiver Navigation sorgt für eine deutlich bessere User Experience (UX).
Teste regelmäßig mit verschiedenen Hilfstechnologien und echten Nutzern, um sicherzustellen, dass barrierefreie Webseiten wirklich für alle zugänglich sind.
Der dritte Testbericht der Aktion Mensch zur Barrierefreiheit in Online Shops 2025 zeigt ernüchternde Ergebnisse: Nur 20 von 65 untersuchten Online-Shops erfüllen das grundlegende Kriterium der Tastaturbedienbarkeit.
Während sich der Anteil im Vergleich zum Vorjahr leicht von 21 auf 30 Prozent verbesserte, scheitern weiterhin zwei Drittel der größten deutschen Shopping-Portale an den Basis-Anforderungen für Menschen mit Behinderungen.
Der Testbericht, durchgeführt von Experten mit verschiedenen Beeinträchtigungen, deckt gravierende Mängel bei Cookie-Bannern, fehlenden Tastaturfokus und unzureichenden Kontrasten auf – und macht deutlich, dass die digitale Teilhabe für Millionen Menschen mit Behinderungen in Deutschland noch immer keine Selbstverständlichkeit ist.
Barrierefreie Webseiten sind nicht nur eine technische Anforderung, sondern eine Haltung, die Inklusion und Gleichberechtigung im digitalen Raum fördert. Mach deine Webseite zu einem Ort, an dem sich wirklich jeder willkommen und wohlfühlt. Fang noch heute an – es lohnt sich für dich, für deine Nutzer und für eine inklusivere digitale Welt!
Barrierefreie Webseiten verbessern die Nutzererfahrung für alle – nicht nur für Menschen mit Behinderungen. Sie sind SEO-freundlicher, technisch robuster und rechtlich sicherer.
