Barrierefreie Website: Technische Anforderungen, gesetzliche Pflichten und praktische Umsetzung

Was bedeutet Barrierefreiheit im Web technisch?

Barrierefreiheit im Web bedeutet, dass Menschen mit unterschiedlichen Einschränkungen deine Website vollständig wahrnehmen, verstehen, navigieren und mit ihr interagieren können. Das betrifft nicht nur blinde oder sehbehinderte Nutzer, sondern auch Personen mit motorischen Einschränkungen, kognitiven Beeinträchtigungen oder temporären Handicaps wie einem gebrochenen Arm.

Technisch gesehen geht es darum, dass dein HTML semantisch korrekt aufgebaut ist, assistive Technologien wie Screenreader alle Inhalte erfassen können und die Bedienung vollständig per Tastatur möglich ist. Barrierefreiheit ist damit keine nachträgliche Designkorrektur, sondern eine architektonische Eigenschaft deiner Website, die idealerweise von Anfang an mitgedacht wird.

Die Web Content Accessibility Guidelines (WCAG) als technischer Standard

Der maßgebliche Standard für barrierefreie Webinhalte sind die Web Content Accessibility Guidelines (WCAG), herausgegeben vom World Wide Web Consortium (W3C). Die aktuelle Version WCAG 2.2 definiert Erfolgskriterien auf drei Konformitätsstufen: A, AA und AAA. Für die gesetzliche Konformität im europäischen Raum ist in der Regel die Stufe AA erforderlich, die sich an der europäischen Norm EN 301 549 orientiert.

Die WCAG basieren auf vier Grundprinzipien, die als POUR-Prinzip bekannt sind: Perceivable (wahrnehmbar), Operable (bedienbar), Understandable (verständlich) und Robust (robust). Jedes Prinzip enthält konkrete Richtlinien mit messbaren Erfolgskriterien, die du systematisch gegen deine Website prüfen kannst.

Wahrnehmbarkeit: Inhalte für alle Sinne aufbereiten

Das Prinzip der Wahrnehmbarkeit verlangt, dass alle Informationen und Benutzeroberflächenkomponenten so dargestellt werden, dass Nutzer sie mit mindestens einem Sinn erfassen können. Konkret bedeutet das: Bilder benötigen aussagekräftige Alt-Texte, Videos brauchen Untertitel und idealerweise eine Audiodeskription, und Farbkontraste müssen ausreichend hoch sein.

Für Text auf Hintergrund schreibt die WCAG 2.2 auf Stufe AA ein minimales Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text vor. Tools wie der WebAIM Contrast Checker helfen dir, diese Werte schnell zu überprüfen. Darüber hinaus darf Farbe niemals das einzige Mittel sein, um Informationen zu transportieren. Ein Formularfeld, das bei einem Fehler nur rot umrandet wird, ist für farbenblinde Nutzer nicht hilfreich. Ergänze immer ein Textsymbol oder eine explizite Fehlermeldung.

Bedienbarkeit: Tastaturzugänglichkeit und Navigationsstruktur

Alle interaktiven Elemente deiner Website müssen per Tastatur erreichbar und bedienbar sein. Das klingt trivial, scheitert in der Praxis aber häufig an Custom-Komponenten wie Dropdown-Menüs, Modals oder Karussells, die ausschließlich auf Mouse-Events reagieren. Achte darauf, dass der Fokus-Indikator sichtbar bleibt und die Tab-Reihenfolge der logischen Lesereihenfolge entspricht.

Ein häufig übersehenes Kriterium ist die sogenannte Fokus-Falle: Nutzer dürfen in keinem Element gefangen werden, aus dem sie per Tastatur nicht mehr herausnavigieren können. Das betrifft insbesondere Modal-Dialoge und eingebettete Inhalte wie iFrames. Zusätzlich schreibt die WCAG vor, dass Nutzer ausreichend Zeit haben müssen, Inhalte zu lesen und zu nutzen. Automatisch ablaufende Slider oder zeitgesteuerte Session-Timeouts ohne Verlängerungsoption sind problematisch.

Verständlichkeit: Klare Sprache und vorhersehbares Verhalten

Deine Website muss sich konsistent und vorhersehbar verhalten. Navigationselemente sollen auf allen Seiten an derselben Stelle stehen, Links sollen eindeutig beschreiben, wohin sie führen, und Formulare müssen klar beschriftet sein. Das HTML-Attribut lang im html-Tag ist Pflicht, damit Screenreader die richtige Aussprache verwenden.

Formulare verdienen besondere Aufmerksamkeit: Jedes Eingabefeld benötigt ein programmatisch verknüpftes Label-Element. Placeholder-Texte sind kein Ersatz für Labels, da sie beim Fokussieren verschwinden und von manchen assistiven Technologien ignoriert werden. Fehlermeldungen sollten spezifisch und direkt beim betroffenen Feld platziert sein, nicht nur als generischer Hinweis am Seitenanfang.

Robustheit: Kompatibilität mit assistiven Technologien

Das Prinzip der Robustheit bezieht sich auf die technische Kompatibilität deines Codes mit verschiedenen User-Agents und assistiven Technologien. In der Praxis bedeutet das vor allem: valides HTML verwenden, ARIA-Attribute korrekt einsetzen und Custom-Widgets nach den WAI-ARIA Authoring Practices implementieren.

ARIA (Accessible Rich Internet Applications) erweitert HTML um Rollen, Zustände und Eigenschaften, die assistiven Technologien zusätzliche Informationen liefern. Wichtig ist dabei die erste Regel von ARIA: Verwende ARIA nur dann, wenn es kein natives HTML-Element gibt, das die gewünschte Semantik bereits mitbringt. Ein button-Element ist immer einem div mit role="button" vorzuziehen, weil es nativ fokussierbar und per Enter und Leertaste aktivierbar ist.

Gesetzliche Grundlagen: BFSG, EAA und die europäische Norm EN 301 549

Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt den European Accessibility Act (EAA) in deutsches Recht um. Ab dem 28. Juni 2025 müssen Produkte und Dienstleistungen, die nach diesem Datum in Verkehr gebracht oder erbracht werden, barrierefrei sein. Das betrifft insbesondere E-Commerce-Websites, Bankdienstleistungen, elektronische Kommunikationsdienste und Personenbeförderungsdienste.

In Österreich wird der EAA durch das Barrierefreiheitsgesetz (BaFG) umgesetzt, das vergleichbare Anforderungen stellt. Für dich als Website-Betreiber im deutschsprachigen Raum ist die europäische Norm EN 301 549 der technische Referenzrahmen. Sie verweist für Webinhalte direkt auf die WCAG 2.1 Stufe AA und definiert zusätzliche Anforderungen für Software, Hardware und Dokumentation.

Die Konsequenzen bei Nichteinhaltung reichen von Abmahnungen über Bußgelder bis hin zu Unterlassungsklagen. Auch ohne gesetzliche Verpflichtung kannst du als Betreiber einer nicht barrierefreien Website haftbar gemacht werden, wenn Nutzer dadurch diskriminiert werden. Es lohnt sich also in jedem Fall, Barrierefreiheit ernst zu nehmen, unabhängig davon, ob dein spezifisches Geschäftsmodell unter das BFSG fällt.

Technische Umsetzung: Worauf du bei der Entwicklung achten musst

Semantisches HTML als Fundament

Die wichtigste Einzelmaßnahme für Barrierefreiheit ist sauberes, semantisches HTML. Verwende Überschriften-Tags hierarchisch korrekt (h1 bis h6), strukturiere Inhalte mit nav, main, article, section, aside und footer, und nutze native Formularelemente statt Custom-Implementierungen. Ein korrekt aufgebautes HTML-Dokument ist bereits zu einem großen Teil barrierefrei, ohne dass du zusätzliche Maßnahmen ergreifen musst.

Landmarks wie nav, main und footer ermöglichen es Screenreader-Nutzern, direkt zu bestimmten Seitenbereichen zu springen. Das ist vergleichbar mit einem Inhaltsverzeichnis und verbessert die Navigation erheblich. Achte darauf, dass jede Seite genau ein main-Element enthält und Landmarks nicht verschachtelt werden, wo es nicht semantisch sinnvoll ist.

Responsive Design und Zoom-Fähigkeit

Barrierefreiheit und Responsive Design überschneiden sich stark. Die WCAG verlangen, dass Inhalte bei einer Vergrößerung auf 200 Prozent ohne horizontales Scrollen nutzbar bleiben (Reflow-Kriterium 1.4.10). Das bedeutet, dass dein Layout sich bei unterschiedlichen Viewport-Größen anpassen muss und du keine festen Pixelwerte für Schriftgrößen verwenden solltest. Setze stattdessen auf relative Einheiten wie rem oder em.

Zusätzlich darf der Viewport-Meta-Tag die Zoom-Funktion nicht deaktivieren. Die Attribute maximum-scale=1.0 oder user-scalable=no sind aus Barrierefreiheitssicht nicht zulässig, da sie sehbehinderten Nutzern die Möglichkeit nehmen, Inhalte zu vergrößern.

Bilder, Medien und alternative Inhalte

Jedes informationstragende Bild benötigt einen Alt-Text, der den Inhalt oder die Funktion des Bildes beschreibt. Dekorative Bilder hingegen sollten mit einem leeren Alt-Attribut (alt="") versehen werden, damit Screenreader sie überspringen. Infografiken oder komplexe Diagramme erfordern zusätzlich eine ausführliche Beschreibung im umgebenden Text oder über ein longdesc-Attribut.

Videos müssen mit Untertiteln versehen sein, die synchron zum Gesprochenen angezeigt werden. Für vorproduzierte Videoinhalte sind auf Stufe AA auch Audiodeskriptionen erforderlich, die visuelle Informationen beschreiben, die nicht aus dem Audiotrack hervorgehen. Automatisch startende Medien sind grundsätzlich zu vermeiden; falls sie dennoch eingesetzt werden, muss der Nutzer sie innerhalb von drei Sekunden pausieren oder stoppen können.

Farbkontraste und visuelles Design

Neben den bereits erwähnten Kontrastanforderungen für Text gibt es seit WCAG 2.1 auch Anforderungen an den Kontrast von Nicht-Text-Elementen (Erfolgskriterium 1.4.11). Bedienelemente wie Buttons, Formularfelder und Icons müssen ein Kontrastverhältnis von mindestens 3:1 zu ihrer Umgebung aufweisen. Das betrifft auch den Fokus-Indikator, der die aktuelle Tastaturposition anzeigt.

Achte bei der Gestaltung deiner Website darauf, dass interaktive Elemente nicht nur durch Farbe, sondern auch durch Form, Größe oder Beschriftung von nicht-interaktiven Elementen unterscheidbar sind. Ein unterstrichener, farbiger Link ist besser erkennbar als einer, der sich nur durch die Farbe vom Fließtext abhebt.

Barrierefreiheit testen: Tools und Methoden

Automatisierte Tests decken nur einen Teil der WCAG-Kriterien ab, typischerweise rund 30 bis 40 Prozent. Tools wie axe DevTools, WAVE oder Lighthouse können strukturelle Probleme wie fehlende Alt-Texte, unzureichende Kontraste oder fehlende Labels zuverlässig erkennen. Für eine vollständige Prüfung brauchst du aber immer auch manuelle Tests.

Ein effektiver manueller Test beginnt mit der Tastaturnavigation: Navigiere deine gesamte Website nur mit der Tab-Taste, Enter und Escape. Prüfe, ob du alle Funktionen erreichst, ob der Fokus sichtbar ist und ob die Reihenfolge logisch ist. Teste anschließend mit einem Screenreader wie NVDA (Windows, kostenlos) oder VoiceOver (macOS/iOS, vorinstalliert). Höre dir an, wie deine Seite vorgelesen wird, und achte auf fehlende oder irreführende Beschreibungen.

Für eine systematische Prüfung empfiehlt sich der BITV-Test oder das WCAG-EM-Verfahren (Website Accessibility Conformance Evaluation Methodology), das eine repräsentative Seitenauswahl definiert und jedes Erfolgskriterium einzeln bewertet.

Typische Fehler und wie du sie vermeidest

Zu den häufigsten Barrierefreiheitsproblemen gehören fehlende oder nichtssagende Alt-Texte (wie "Bild1.jpg" oder "Foto"), unzureichende Farbkontraste, fehlende Formular-Labels und nicht-tastaturzugängliche Custom-Komponenten. Viele dieser Fehler entstehen nicht aus Nachlässigkeit, sondern weil Barrierefreiheit im Entwicklungsprozess nicht von Anfang an berücksichtigt wird.

Ein weiterer verbreiteter Fehler ist der Einsatz von Overlay-Tools, die versprechen, Barrierefreiheit automatisch nachzurüsten. Diese Tools fügen in der Regel ein JavaScript-Widget hinzu, das Schriftgrößen anpassen, Kontraste erhöhen oder Screenreader-Unterstützung simulieren soll. In der Praxis lösen Overlays die zugrundeliegenden technischen Probleme nicht und können die Nutzererfahrung für Menschen mit Behinderungen sogar verschlechtern. Sie ersetzen keine korrekte technische Implementierung und sind auch rechtlich kein ausreichender Nachweis für Konformität.

Barrierefreiheit bei Content-Management-Systemen

Wenn du ein CMS wie WordPress einsetzt, hängt die Barrierefreiheit deiner Website von mehreren Faktoren ab: dem Theme, den eingesetzten Plugins, dem Page Builder und der Art, wie Inhalte gepflegt werden. Wähle ein Theme, das explizit als accessibility-ready gekennzeichnet ist und die WordPress-Accessibility-Coding-Standards einhält.

Bei der Auswahl von Plugins solltest du prüfen, ob sie ARIA-Attribute korrekt verwenden, ob ihre Ausgabe semantisch sinnvoll ist und ob sie tastaturzugänglich sind. 

Kontaktformular-Plugins sind hier ein häufiger Schwachpunkt. Auch Page Builder können problematisch sein, wenn sie exzessiv verschachtelte div-Strukturen erzeugen, die die semantische Lesbarkeit des HTML zerstören.

Redakteure und Content-Manager sollten geschult werden, Alt-Texte sinnvoll zu vergeben, Überschriftenhierarchien einzuhalten und Links verständlich zu beschriften. Die beste technische Basis nützt wenig, wenn die Inhalte nicht barrierefrei gepflegt werden.

Barrierefreiheit als laufender Prozess

Barrierefreiheit ist kein einmaliges Projekt, sondern ein kontinuierlicher Prozess. Mit jedem neuen Inhalt, jedem Update und jeder neuen Funktion können neue Barrieren entstehen. Integriere Barrierefreiheitsprüfungen in deinen Deployment-Prozess, etwa durch automatisierte axe-Tests in deiner CI/CD-Pipeline. Definiere Barrierefreiheit als Akzeptanzkriterium für neue Features und schule dein Team regelmäßig.

Eine Barrierefreiheitserklärung auf deiner Website ist nicht nur gesetzlich vorgeschrieben (für öffentliche Stellen), sondern auch ein Zeichen von Transparenz. Sie dokumentiert den aktuellen Stand der Konformität, benennt bekannte Einschränkungen und bietet einen Kontaktweg für Nutzer, die auf Barrieren stoßen.

Barrierefreies Hosting: Die technische Basis bei easyname

Eine barrierefreie Website beginnt mit einer soliden technischen Infrastruktur. Schnelle Ladezeiten, zuverlässige Verfügbarkeit und ein performanter Server sind nicht nur Komfortfaktoren, sondern direkt relevant für die Barrierefreiheit. Lange Ladezeiten und Timeouts treffen Nutzer mit assistiven Technologien besonders hart, da Screenreader den Seitenaufbau sequentiell verarbeiten und bei Verzögerungen den Kontext verlieren können.

Mit dem Webhosting von easyname bekommst du eine stabile Serverumgebung mit schnellen Ladezeiten, die als Basis für barrierefreie Webprojekte dient. Wenn du WordPress einsetzt, bietet dir das WordPress Hosting von easyname eine optimierte Umgebung, in der du dich auf die Barrierefreiheit deiner Inhalte und Themes konzentrieren kannst, während die Serverperformance bereits abgedeckt ist.

Für Projekte mit höheren Anforderungen an die Serverkonfiguration, etwa wenn du spezielle HTTP-Header für Barrierefreiheit setzen oder eigene Testing-Tools installieren möchtest, ist ein VPS Server die passende Lösung. Damit hast du volle Kontrolle über die Serverumgebung und kannst automatisierte Barrierefreiheitsprüfungen direkt auf dem Server ausführen.

Eine barrierefreie Website braucht auch eine einprägsame, klar lesbare Domain. Vermeide unnötig lange oder kryptische Domainnamen, da diese von Screenreadern oft buchstabiert statt vorgelesen werden. Bei easyname findest du eine breite Auswahl an Domains mit gängigen Endungen, die dir eine saubere und gut lesbare URL-Struktur ermöglichen.

Falls du ohne Programmierkenntnisse eine neue Website aufbauen möchtest, die grundlegende Barrierefreiheitsstandards erfüllt, kann der Website-Baukasten von easyname ein sinnvoller Einstieg sein. Achte bei der Nutzung dennoch darauf, Alt-Texte zu vergeben, Überschriftenhierarchien einzuhalten und ausreichende Kontraste zu wählen, denn auch der beste Baukasten ersetzt nicht die redaktionelle Sorgfalt bei der Content-Pflege.