Barrierefreie Website: Technische Anforderungen, gesetzliche Pflichten und praktische Umsetzung

Was bedeutet Barrierefreiheit im Web technisch?

Barrierefreiheit, im Englischen als Web Accessibility bezeichnet, beschreibt die technische und gestalterische Umsetzung einer Website so, dass sie von allen Menschen uneingeschränkt genutzt werden kann. Dazu gehören Nutzer mit Sehbehinderungen, Höreinschränkungen, motorischen Einschränkungen oder kognitiven Beeinträchtigungen. Barrierefreiheit betrifft aber ebenso situative Einschränkungen wie eine langsame Internetverbindung, die Bedienung per Tastatur statt Maus oder die Nutzung mobiler Geräte unter schwierigen Lichtverhältnissen.

Das Fundament bildet die Web Content Accessibility Guidelines, kurz WCAG, in der aktuellen Version 2.2. Diese Richtlinie definiert vier zentrale Prinzipien, nach denen Webinhalte aufgebaut sein sollten: wahrnehmbar, bedienbar, verständlich und robust. Jedes dieser Prinzipien wird durch konkrete Erfolgskriterien operationalisiert, die auf drei Konformitätsstufen geprüft werden, nämlich A, AA und AAA. Das BFSG sowie die zugrunde liegende europäische Norm EN 301 549 verlangen mindestens die Stufe AA.

Die vier WCAG-Prinzipien im Detail

Wahrnehmbarkeit

Inhalte müssen so aufbereitet sein, dass sie über verschiedene Sinneskanäle erfasst werden können. Bilder benötigen aussagekräftige Alt-Texte, damit Screenreader sie interpretieren können. Videos brauchen Untertitel oder Transkripte. Farbkontraste zwischen Text und Hintergrund müssen ausreichend hoch sein, konkret mindestens ein Verhältnis von 4,5:1 für normalen Text und 3:1 für großen Text nach WCAG 2.2 Level AA. Informationen dürfen nicht ausschließlich über Farbe vermittelt werden, etwa ein rot markiertes Pflichtfeld ohne zusätzlichen Hinweistext.

Bedienbarkeit

Alle Funktionen einer Website müssen vollständig per Tastatur erreichbar sein. Das betrifft Navigation, Formulare, interaktive Elemente und auch modale Dialoge oder Dropdown-Menüs. Der Tastaturfokus muss jederzeit sichtbar sein und in einer logischen Reihenfolge durch die Seite wandern. Zeitlimits für Eingaben sollten anpassbar oder deaktivierbar sein. Animationen und automatisch abspielende Medien brauchen eine Möglichkeit zum Pausieren oder Stoppen.

Verständlichkeit

Texte sollten klar strukturiert und sprachlich konsistent sein. Die Seitensprache muss im HTML-Dokument korrekt deklariert werden, also beispielsweise über das lang-Attribut im html-Tag. Formulare benötigen eindeutige Labels, verständliche Fehlermeldungen und Hinweise zur erwarteten Eingabe. Die Navigation muss konsistent über alle Seiten hinweg funktionieren und vorhersehbar reagieren.

Robustheit

Der Quellcode muss valide und semantisch korrekt sein, damit assistive Technologien ihn zuverlässig interpretieren können. Das bedeutet unter anderem: korrekte Verschachtelung von HTML-Elementen, eindeutige IDs, saubere ARIA-Attribute und die Verwendung semantischer Elemente wie nav, main, article, header und footer anstelle generischer div-Container. Eine robuste Codebasis stellt sicher, dass die Seite auch mit zukünftigen Versionen von Screenreadern und Browsern kompatibel bleibt.

Gesetzliche Grundlagen: Das BFSG und seine Reichweite

Das Barrierefreiheitsstärkungsgesetz setzt die europäische Richtlinie 2019/882, den European Accessibility Act, in deutsches Recht um. Seit dem 28. Juni 2025 sind Unternehmen verpflichtet, bestimmte Produkte und Dienstleistungen barrierefrei anzubieten. Im Webkontext betrifft das vor allem Onlineshops, Dienstleistungen im elektronischen Geschäftsverkehr und digitale Bankdienstleistungen.

Konkret bedeutet das: Wenn du über deine Website Produkte oder Dienstleistungen verkaufst, gilt das BFSG mit hoher Wahrscheinlichkeit für dich. Ausgenommen sind lediglich Kleinstunternehmen mit weniger als zehn Beschäftigten und einem Jahresumsatz unter zwei Millionen Euro, sofern sie keine digitalen Dienstleistungen im engeren Sinne anbieten. Die genaue Abgrenzung ist nicht immer trivial, weshalb eine individuelle Prüfung sinnvoll ist.

Die Konsequenzen bei Nichteinhaltung reichen von Abmahnungen über Bußgelder bis hin zu behördlichen Anordnungen. Die Marktüberwachungsbehörden der Bundesländer sind für die Kontrolle zuständig.

Technische Umsetzung: Worauf du konkret achten musst

Semantisches HTML als Fundament

Die wichtigste technische Grundlage für Barrierefreiheit ist semantisch korrektes HTML. Überschriften sollten hierarchisch gesetzt werden, von h1 bis h6, ohne Ebenen zu überspringen. Listen gehören in ul- oder ol-Elemente, Tabellen benötigen thead, tbody und th-Elemente mit scope-Attributen. Formulare brauchen eine klare Zuordnung von label zu input über das for-Attribut.

Viele Content-Management-Systeme und Homepage-Baukästen erzeugen von Haus aus eine Grundstruktur, die semantisch in Ordnung ist. Allerdings hängt die tatsächliche Barrierefreiheit stark vom gewählten Theme oder Template und von der Art ab, wie du Inhalte einpflegst. Ein Bild ohne Alt-Text, eine Überschrift, die nur aus Designgründen gewählt wurde, oder ein Link mit dem Text „hier klicken" sind typische Fehler, die sich leicht vermeiden lassen.

ARIA-Attribute richtig einsetzen

ARIA steht für Accessible Rich Internet Applications und ergänzt HTML um zusätzliche Informationen für assistive Technologien. ARIA-Attribute sind besonders relevant bei dynamischen Inhalten, die per JavaScript nachgeladen werden, bei Custom Widgets wie Tabs, Accordions oder Modals und bei Statusmeldungen. Wichtig ist dabei die erste Regel von ARIA: Verwende kein ARIA, wenn ein natives HTML-Element die gleiche Funktion erfüllt. Ein button-Element ist immer besser als ein div mit role="button".

Farbkontraste und visuelles Design

Kontraste lassen sich mit Tools wie dem WebAIM Contrast Checker oder den Accessibility-Werkzeugen in den Browser-Entwicklertools prüfen. Neben dem reinen Textkontast sind auch grafische Elemente wie Icons und Formularfelder betroffen, die einen Kontrast von mindestens 3:1 zu ihrer Umgebung aufweisen müssen. Interaktive Elemente sollten zudem im Fokuszustand klar erkennbar sein, nicht nur durch eine subtile Farbänderung.

Responsive Design und Zoom

Barrierefreiheit und Responsive Design gehen Hand in Hand. Die WCAG fordern, dass Inhalte bei einer Vergrößerung auf 200 Prozent noch vollständig lesbar und bedienbar sind, ohne dass horizontales Scrollen notwendig wird. Das sogenannte Reflow-Kriterium verlangt, dass sich Inhalte bei einer Viewport-Breite von 320 CSS-Pixeln korrekt umbrechen. Wer sauber mit relativen Einheiten wie em, rem und Prozentwerten arbeitet, erfüllt diese Anforderung meist automatisch.

Barrierefreiheit testen: Werkzeuge und Methodik

Automatisierte Tests decken etwa 30 bis 40 Prozent der möglichen Barrierefreiheitsprobleme ab. Tools wie axe, WAVE oder Lighthouse führen schnelle Prüfungen durch und identifizieren fehlende Alt-Texte, unzureichende Kontraste oder fehlende Formular-Labels. Für eine umfassende Bewertung ist jedoch manuelles Testen unverzichtbar.

Ein solider Einstieg in die manuelle Prüfung besteht aus drei Schritten: Erstens die gesamte Website einmal nur mit der Tastatur bedienen und prüfen, ob alle Inhalte und Funktionen erreichbar sind. Zweitens einen Screenreader wie NVDA unter Windows oder VoiceOver unter macOS aktivieren und die Seite durchgehen lassen. Drittens die Seite auf 200 Prozent zoomen und prüfen, ob Inhalte lesbar und Funktionen nutzbar bleiben.

Für eine vollständige Konformitätsprüfung nach WCAG 2.2 Level AA empfiehlt es sich, einen BITV-Test oder ein vergleichbares Auditverfahren durchführen zu lassen. Die Ergebnisse dokumentieren den aktuellen Stand und liefern eine konkrete Liste an Maßnahmen.

Barrierefreiheitserklärung: Was du veröffentlichen musst

Neben der technischen Umsetzung verlangt das BFSG eine Barrierefreiheitserklärung, die auf der Website leicht auffindbar sein muss. Diese Erklärung gibt Auskunft über den Grad der Konformität mit den anwendbaren Standards, benennt bekannte Einschränkungen und enthält eine Kontaktmöglichkeit für Nutzer, die auf Barrieren stoßen. Die Erklärung sollte regelmäßig aktualisiert werden, da sich sowohl die Website-Inhalte als auch die Bewertungsgrundlagen weiterentwickeln.

Barrierefreiheit als SEO-Vorteil

Barrierefreiheit und Suchmaschinenoptimierung überschneiden sich in vielen Bereichen. Semantisch korrektes HTML, aussagekräftige Alternativtexte, eine klare Überschriftenhierarchie, schnelle Ladezeiten und eine solide Seitenstruktur sind Faktoren, die sowohl Screenreadern als auch Suchmaschinen-Crawlern die Arbeit erleichtern. Eine barrierefreie Website ist in der Regel auch besser indexierbar und kann dadurch Vorteile im Ranking erzielen.

Darüber hinaus wirken sich die Core Web Vitals, die Google als Ranking-Faktoren heranzieht, positiv aus, wenn du auf performanten, gut strukturierten Code setzt. Largest Contentful Paint, Cumulative Layout Shift und Interaction to Next Paint profitieren von den gleichen Optimierungen, die auch die Barrierefreiheit verbessern.

Barrierefreiheit mit dem richtigen Hosting-Fundament umsetzen

Eine barrierefreie Website braucht nicht nur sauberen Code und durchdachte Inhalte, sondern auch eine performante Infrastruktur. Ladezeiten, Server-Antwortzeiten und Verfügbarkeit spielen eine direkte Rolle, da assistive Technologien bei langsamen oder instabilen Verbindungen besonders empfindlich reagieren.

Bei dogado findest du Webhosting-Pakete, die mit schnellen SSD-Speichern und optimierten Server-Konfigurationen eine solide Basis für performante Websites bieten. Wenn du mit WordPress arbeitest, lohnt sich ein Blick auf das WordPress Hosting von dogado, das serverseitig auf WordPress abgestimmt ist und durch Caching und optimierte PHP-Konfigurationen kurze Antwortzeiten liefert. Für Projekte mit höheren Anforderungen an Flexibilität und Kontrolle stehen VPS-Lösungen zur Verfügung, auf denen du eigene Serverkonfigurationen umsetzen kannst.

Wer eine neue Website plant und Barrierefreiheit von Anfang an mitdenken möchte, kann den Homepage-Baukasten von dogado nutzen. Damit lässt sich eine strukturell saubere Website aufbauen, ohne tief in den Code einsteigen zu müssen. Für komplexere Anforderungen bietet dogado auch professionelle Website-Erstellung an, bei der Barrierefreiheitsaspekte direkt in die Konzeption einfließen können.

Barrierefreiheit hängt auch davon ab, wie gut deine Website gefunden wird. Wenn du die beschriebenen SEO-Vorteile barrierefreier Websites gezielt nutzen möchtest, unterstützen dich die SEO-Dienstleistungen von dogado bei der technischen und inhaltlichen Optimierung. Ergänzend dazu helfen die SEA-Dienstleistungen, deine barrierefreien Landingpages über bezahlte Suchmaschinenwerbung sichtbar zu machen.

Fazit: Barrierefreiheit ist keine einmalige Maßnahme

Barrierefreiheit im Web ist ein kontinuierlicher Prozess. Neue Inhalte, Funktionen und Designanpassungen müssen regelmäßig auf Zugänglichkeit geprüft werden. Die gesetzlichen Anforderungen setzen einen verbindlichen Rahmen, aber der eigentliche Nutzen geht darüber hinaus: Du erreichst mehr Nutzer, verbesserst die Usability für alle Besucher und stärkst gleichzeitig deine technische SEO-Basis. Wer jetzt handelt, sichert sich nicht nur rechtlich ab, sondern investiert in die langfristige Qualität seines Webauftritts.