Barrierefreie Website erstellen: Was du wissen und umsetzen musst

Was bedeutet Barrierefreiheit im Web eigentlich?

Eine barrierefreie Website ist so gestaltet, dass sie von allen Menschen genutzt werden kann – unabhängig von körperlichen, sensorischen oder kognitiven Einschränkungen. Das betrifft Menschen mit Sehbehinderungen, die Screenreader nutzen, ebenso wie motorisch eingeschränkte Nutzer, die ausschließlich per Tastatur navigieren. Auch Personen mit Farbfehlsichtigkeit, Höreinschränkungen oder kognitiven Beeinträchtigungen profitieren von zugänglichem Webdesign.

Der internationale Standard für Web-Barrierefreiheit sind die Web Content Accessibility Guidelines (WCAG). Diese Richtlinien definieren vier Grundprinzipien, nach denen Webinhalte gestaltet sein sollten: wahrnehmbar, bedienbar, verständlich und robust. Jedes Prinzip enthält konkrete Erfolgskriterien auf drei Konformitätsstufen – A, AA und AAA. Für die meisten gesetzlichen Anforderungen und praktischen Zwecke ist die Stufe AA der anzustrebende Standard.

Warum Barrierefreiheit auch für kleine Webprojekte relevant ist

Viele Selbstständige und kleine Agenturen gehen davon aus, dass Barrierefreiheit nur große Unternehmen oder öffentliche Einrichtungen betrifft. Das ist ein Trugschluss. Das BFSG erfasst ab 2025 grundsätzlich Produkte und Dienstleistungen im elektronischen Geschäftsverkehr. Wenn du also einen Onlineshop betreibst oder digitale Dienstleistungen anbietest, bist du mit hoher Wahrscheinlichkeit betroffen.

Doch selbst wenn dein Angebot nicht direkt unter das Gesetz fällt, lohnt sich die Investition. Rund 13 Prozent der deutschen Bevölkerung leben mit einer anerkannten Behinderung – das sind potenzielle Kunden, die du verlierst, wenn deine Website nicht zugänglich ist. Hinzu kommt die wachsende Gruppe älterer Internetnutzer, die von barrierefreiem Design enorm profitiert. Und nicht zuletzt bewerten Suchmaschinen wie Google viele Barrierefreiheits-Maßnahmen positiv: Saubere HTML-Semantik, aussagekräftige Alternativtexte und eine logische Dokumentenstruktur sind gleichzeitig solide SEO-Grundlagen.

Die vier Säulen der WCAG: Wahrnehmbar, bedienbar, verständlich, robust

Wahrnehmbar

Alle Inhalte müssen so bereitgestellt werden, dass Nutzer sie wahrnehmen können. Das bedeutet konkret: Bilder brauchen aussagekräftige Alt-Texte, Videos benötigen Untertitel oder Transkripte, und Farben dürfen nicht das einzige Mittel sein, um Informationen zu transportieren. Ein roter Hinweistext etwa ist für farbfehlsichtige Nutzer nicht als Warnung erkennbar, wenn nicht zusätzlich ein Icon oder eine Textmarkierung verwendet wird.

Bedienbar

Die gesamte Navigation und Interaktion muss ohne Maus funktionieren. Jedes interaktive Element – Links, Buttons, Formulare, Menüs – muss per Tastatur erreichbar und bedienbar sein. Fokus-Indikatoren müssen sichtbar sein, damit Nutzer jederzeit wissen, wo sie sich auf der Seite befinden. Zeitlimits für Aktionen sollten vermieden oder verlängerbar sein, und Inhalte dürfen keine Anfälle auslösen, etwa durch schnell blinkende Elemente.

Verständlich

Texte müssen klar formuliert und die Benutzeroberfläche vorhersehbar gestaltet sein. Das HTML-Dokument braucht eine korrekte Sprachangabe im lang-Attribut. Formulare sollten eindeutige Labels haben und bei Fehlern verständliche Hinweise liefern, die erklären, was falsch gelaufen ist und wie der Nutzer es korrigieren kann. Konsistente Navigation über alle Seiten hinweg hilft Nutzern, sich schnell zurechtzufinden.

Robust

Inhalte müssen von einer Vielzahl von User Agents – Browsern, Screenreadern, assistiven Technologien – zuverlässig interpretiert werden können. Das setzt valides, semantisch korrektes HTML voraus. ARIA-Attribute (Accessible Rich Internet Applications) können eingesetzt werden, um dynamische Inhalte und komplexe UI-Komponenten für assistive Technologien zugänglich zu machen, sollten aber nur dort genutzt werden, wo native HTML-Elemente nicht ausreichen.

Technische Maßnahmen für eine barrierefreie Website

Semantisches HTML als Fundament

Die wichtigste technische Grundlage für Barrierefreiheit ist sauberes, semantisches HTML. Verwende Überschriften-Tags (h1 bis h6) in der richtigen Hierarchie, setze nav-Elemente für die Navigation ein, nutze main für den Hauptinhalt und footer für den Seitenabschluss. Vermeide es, div- und span-Container für alles zu missbrauchen – sie haben keine semantische Bedeutung und sind für Screenreader unsichtbar.

Listen sollten als ul oder ol ausgezeichnet werden, Datentabellen mit thead, tbody und th-Elementen. Formulare benötigen label-Elemente, die korrekt mit den zugehörigen Eingabefeldern verknüpft sind. All das klingt nach Grundlagen – und genau das ist es. Viele Barrierefreiheitsprobleme entstehen nicht durch fehlende Spezialfeatures, sondern durch schlampiges Markup.

Kontraste und Farben

Für Text auf Hintergrundflächen schreibt die WCAG AA ein Kontrastverhältnis von mindestens 4,5:1 vor (für großen Text ab 18pt oder 14pt fett reicht 3:1). Tools wie der WebAIM Contrast Checker oder der Colour Contrast Analyser helfen dir, die Werte schnell zu prüfen. Achte darauf, dass auch interaktive Elemente wie Buttons und Links im Normalzustand, im Hover-Zustand und im Fokus-Zustand ausreichend Kontrast bieten.

Bilder und Medien

Jedes inhaltlich relevante Bild braucht einen Alt-Text, der den Bildinhalt oder -zweck beschreibt. Dekorative Bilder erhalten ein leeres alt-Attribut (alt=""), damit Screenreader sie überspringen. Bei komplexen Grafiken wie Infografiken oder Diagrammen reicht ein kurzer Alt-Text nicht aus – hier solltest du eine ausführliche Beschreibung im umgebenden Text oder über eine separate Textversion bereitstellen.

Videos sollten grundsätzlich Untertitel haben. Für vorproduzierte Videos sind synchronisierte Untertitel auf WCAG-AA-Niveau Pflicht, für Live-Inhalte werden sie empfohlen. Audiodeskriptionen für rein visuelle Informationen in Videos sind ein weiterer wichtiger Baustein, der allerdings erst auf AA-Niveau zwingend wird.

Tastaturnavigation und Fokusmanagement

Teste deine Website regelmäßig, indem du ausschließlich die Tastatur verwendest. Mit der Tab-Taste solltest du jeden interaktiven Bereich erreichen können, die Reihenfolge sollte logisch dem visuellen Layout folgen. Der Fokus-Indikator – in den meisten Browsern ein blauer oder schwarzer Rahmen – darf niemals per CSS entfernt werden (outline: none ist einer der häufigsten Barrierefreiheits-Fehler). Du kannst den Fokus-Stil anpassen, aber er muss immer deutlich sichtbar bleiben.

Bei Single-Page-Applikationen oder dynamisch nachgeladenen Inhalten ist Fokusmanagement besonders wichtig. Wenn sich Inhalte auf der Seite ändern – etwa nach dem Absenden eines Formulars oder beim Öffnen eines Modals – muss der Fokus programmatisch an die richtige Stelle gesetzt werden, damit Screenreader-Nutzer die Änderung mitbekommen.

Responsive Design und Zoom

Barrierefreiheit und Responsiveness gehen Hand in Hand. Nutzer müssen die Seite auf 200 Prozent vergrößern können, ohne dass Inhalte abgeschnitten werden oder die Funktionalität leidet. Verwende relative Einheiten wie rem oder em statt fixer Pixelwerte für Schriftgrößen. Teste dein Layout nicht nur auf verschiedenen Viewport-Breiten, sondern auch bei verschiedenen Zoomstufen im Desktop-Browser.

Barrierefreiheit testen: Tools und Methoden

Kein automatisiertes Tool kann alle Barrierefreiheits-Probleme erkennen – Studien zeigen, dass automatische Tests nur etwa 30 bis 50 Prozent der Fehler finden. Trotzdem sind sie ein guter Ausgangspunkt. Browser-Extensions wie axe DevTools, WAVE oder Lighthouse im Chrome-DevTools-Panel prüfen grundlegende Kriterien wie fehlende Alt-Texte, unzureichende Kontraste oder fehlende Formular-Labels.

Für eine gründlichere Prüfung kommst du um manuelle Tests nicht herum. Navigiere deine Seite komplett per Tastatur. Teste mit einem Screenreader – NVDA (kostenlos für Windows) oder VoiceOver (auf macOS und iOS vorinstalliert) sind gute Einstiegspunkte. Prüfe, ob alle Informationen, die visuell vermittelt werden, auch nicht-visuell zugänglich sind. Im Idealfall beziehst du Nutzer mit Behinderungen in dein Testing ein, um reale Erfahrungswerte zu sammeln.

Häufige Fehler und wie du sie vermeidest

Einige Barrierefreiheits-Fehler tauchen auf nahezu jeder Website auf. Der WebAIM Million Report analysiert jährlich die eine Million meistbesuchten Websites und identifiziert regelmäßig dieselben Top-Probleme. Wenn du allein diese abstellst, machst du bereits einen enormen Unterschied.

Fehlender oder nichtssagender Alt-Text: Ein Alt-Text wie "Bild" oder "IMG_2847.jpg" hilft niemandem. Beschreibe, was das Bild zeigt und welche Funktion es hat. Bei einem Produktfoto könnte das sein: "Rote Sneaker aus Leder, seitliche Ansicht mit sichtbarer Sohle."

Niedrige Kontrastverhältnisse: Hellgrauer Text auf weißem Grund mag eleganter aussehen, ist aber für viele Menschen schlicht nicht lesbar. Halte dich an die 4,5:1-Regel und teste kritische Farbkombinationen.

Fehlende Formular-Labels: Platzhaltertext (placeholder) ist kein Ersatz für ein Label. Sobald der Nutzer zu tippen beginnt, verschwindet der Platzhalter – und damit die Information, was in das Feld eingetragen werden soll. Verwende immer sichtbare Labels.

Unzureichende Link-Texte: "Hier klicken" oder "Mehr erfahren" sagt einem Screenreader-Nutzer, der durch die Links der Seite springt, nichts über das Ziel. Formuliere Links so, dass sie auch ohne umgebenden Text verständlich sind: "Unsere Hosting-Pakete im Vergleich" statt "Hier klicken".

Fehlende Dokumentensprache: Ohne lang-Attribut im html-Tag weiß der Screenreader nicht, in welcher Sprache er den Text vorlesen soll, und nutzt die Standardeinstellung des Nutzers – das kann zu völlig unverständlicher Ausgabe führen.

Barrierefreiheit in CMS und Baukastensystemen

Wenn du WordPress, TYPO3 oder ein anderes CMS einsetzt, bist du auf die Barrierefreiheit deines Themes oder Templates angewiesen. Wähle Themes, die explizit als "accessibility-ready" gekennzeichnet sind. Im WordPress-Theme-Verzeichnis kannst du gezielt nach diesem Tag filtern. Prüfe trotzdem manuell, ob die Tastaturnavigation funktioniert und die Semantik stimmt – das Label garantiert nur ein Mindestmaß an Zugänglichkeit.

Bei Homepage-Baukästen hast du weniger Kontrolle über das generierte Markup. Achte bei der Auswahl darauf, ob der Baukasten ARIA-Attribute korrekt einsetzt, ob generierte Formulare Labels haben und ob die Navigation per Tastatur funktioniert. Overlay-Tools, die nachträglich Barrierefreiheit versprechen, sind übrigens keine Lösung – sie beheben keine strukturellen Probleme und werden von der Accessibility-Community nahezu einhellig abgelehnt.

Barrierefreiheit als fortlaufender Prozess

Barrierefreiheit ist kein einmaliges Projekt, das du abhakst und dann vergisst. Jede neue Seite, jeder neue Blogbeitrag, jede Designanpassung kann neue Probleme einführen. Integriere Barrierefreiheits-Checks in deinen Workflow: Prüfe neue Inhalte vor der Veröffentlichung, nutze automatisierte Tests in deiner CI/CD-Pipeline und plane regelmäßige manuelle Audits ein.

Erstelle eine Barrierefreiheitserklärung für deine Website. Diese ist in vielen Fällen gesetzlich vorgeschrieben und signalisiert auch freiwillige Transparenz. Beschreibe darin den aktuellen Stand der Barrierefreiheit, bekannte Einschränkungen und eine Kontaktmöglichkeit für Feedback. So können Nutzer dich auf Probleme hinweisen, die du möglicherweise übersehen hast.

Dein Webprojekt barrierefrei aufsetzen – mit der richtigen Infrastruktur

Barrierefreiheit beginnt nicht erst beim Design oder der Entwicklung – sie fängt bei der technischen Infrastruktur an. Schnelle Ladezeiten, saubere Serverkonfigurationen und eine solide Domain-Struktur bilden die Basis für ein zugängliches Webprojekt.

Mit dem Webhosting von checkdomain stellst du sicher, dass deine Website auf einer performanten Infrastruktur läuft, die schnelle Antwortzeiten liefert – ein wichtiger Faktor für die Nutzererfahrung assistiver Technologien. Wenn du eine neue Domain bei checkdomain registrierst, achte auf eine sprechende, leicht merkbare Adresse, die auch bei der Sprachausgabe durch Screenreader verständlich klingt.

Brauchst du Unterstützung bei der barrierefreien Umsetzung deiner Website? 

Der Website-Erstellungsservice von checkdomain hilft dir, dein Webprojekt von Anfang an auf einem soliden Fundament aufzubauen. Und wenn du sicherstellen willst, dass deine barrierefreien Inhalte auch gefunden werden, unterstützen dich die SEO-Dienstleistungen von checkdomain dabei, technische und inhaltliche Optimierungen zu kombinieren – denn Barrierefreiheit und Suchmaschinenoptimierung verfolgen in vielen Bereichen dieselben Ziele.