Eine barrierefreie Website entsteht nicht beim Code, sondern bei der Planung. Sie folgt den vier WCAG-Prinzipien — wahrnehmbar, bedienbar, verständlich, robust — und erfüllt mindestens WCAG 2.1 Level AA, das auch das BFSG verlangt. Planen Sie Barrierefreiheit von Anfang an mit, setzen Sie auf semantisches HTML, klare Kontraste und Tastatur-Bedienbarkeit, und testen Sie automatisch, manuell und mit echten Nutzern. So erreichen Sie mehr Menschen, ranken besser bei Google und vermeiden rechtliche Risiken. In diesem Leitfaden gehen wir den gesamten Weg von der Planung bis zur laufenden Pflege durch.
1. Warum Barrierefreiheit kein Bonus ist
Rund 7,8 Millionen Menschen in Deutschland leben mit einer Schwerbehinderung. Dazu kommen Millionen mit Sehschwäche, Farbfehlsichtigkeit oder motorischen Einschränkungen. Wenn Ihre Website diese Menschen ausschließt, verlieren Sie potenzielle Kunden.
Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG). Online-Shops und digitale Dienste müssen barrierefrei sein. Wer das ignoriert, riskiert Abmahnungen und Bußgelder.
Aber Barrierefreiheit lohnt sich auch ohne Pflicht. Barrierefreie Websites laden schneller, ranken besser bei Google und sind für alle Nutzer angenehmer. Sie schaffen Vertrauen und zeigen, dass Ihnen Ihre Besucher wichtig sind.
2. WCAG und BFSG — die wichtigsten Grundlagen
Die Web Content Accessibility Guidelines (WCAG) sind der weltweite Standard für barrierefreie Websites. Die aktuelle Version 2.1 definiert vier Prinzipien:
Wahrnehmbar
Inhalte müssen für alle Sinne zugänglich sein. Bilder brauchen Alt-Texte. Videos brauchen Untertitel. Texte müssen genug Kontrast haben.
Bedienbar
Alle Funktionen müssen per Tastatur erreichbar sein. Nutzer brauchen genug Zeit. Inhalte dürfen keine Anfälle auslösen.
Verständlich
Texte müssen lesbar sein. Die Navigation muss vorhersehbar funktionieren. Fehler bei Eingaben müssen klar erklärt werden.
Robust
Der Code muss valide sein. Inhalte müssen mit verschiedenen Browsern und Hilfstechnologien funktionieren.
Das BFSG verweist auf die europäische Norm EN 301 549, die wiederum WCAG 2.1 Level AA fordert. Konkret heißt das: 50 Erfolgskriterien, die Ihre Website erfüllen muss.
3. Barrierefreie Website planen
Barrierefreiheit beginnt nicht beim Code, sondern bei der Planung. Je früher Sie darüber nachdenken, desto günstiger und einfacher wird die Umsetzung.
Zielgruppen-Analyse
Fragen Sie sich: Wer nutzt meine Website? Menschen mit Sehbehinderung navigieren per Screenreader. Ältere Nutzer brauchen große Schrift und klare Kontraste. Mobile Nutzer bedienen alles per Touch. Planen Sie für alle diese Gruppen.
Informationsarchitektur
Eine klare Struktur hilft allen Nutzern. Verwenden Sie maximal drei Navigationsebenen. Benennen Sie Menüpunkte eindeutig. Bieten Sie eine Suchfunktion an. Erstellen Sie eine logische Seitenhierarchie mit klaren Überschriften.
Design-Entscheidungen
| Kriterium | Anforderung |
|---|---|
| Farbkontrast | Mindestens 4,5:1 für normalen Text, 3:1 für großen Text (WCAG AA) |
| Schriftgröße | Mindestens 16 Pixel Grundschrift, skalierbar bis 200 Prozent |
| Abstände | Genug Platz zwischen klickbaren Elementen (mindestens 44 × 44 Pixel) |
| Farben | Nie Farbe als einziges Unterscheidungsmerkmal nutzen |
4. Technische Umsetzung Schritt für Schritt
Semantisches HTML
Nutzen Sie HTML-Elemente nach ihrer Bedeutung, nicht nach ihrem Aussehen. Ein <nav> für die Navigation. Ein <main> für den Hauptinhalt. Ein <footer> für die Fußzeile. Screenreader verstehen diese Elemente und können Nutzern eine Übersicht geben.
ARIA-Attribute richtig einsetzen
ARIA ergänzt HTML, wenn semantische Elemente nicht reichen. Verwenden Sie aria-label für Buttons ohne sichtbaren Text. Nutzen Sie aria-expanded für aufklappbare Menüs. Aber: Zu viel ARIA schadet. Nutzen Sie immer zuerst natives HTML.
Tastatur-Navigation
Jedes interaktive Element muss per Tab erreichbar sein. Die Reihenfolge muss logisch sein. Fokus-Indikatoren müssen sichtbar bleiben. Testen Sie: Können Sie Ihre gesamte Website nur mit der Tastatur bedienen? Wenn nicht, fehlt etwas.
Formulare barrierefrei gestalten
- Jedes Eingabefeld braucht ein sichtbares
<label> - Pflichtfelder mit
aria-required="true"kennzeichnen - Fehlermeldungen neben dem betroffenen Feld anzeigen
- Captchas durch Alternativen ersetzen (Honeypot, zeitbasiert)
- Eingabeformate klar kommunizieren ("TT.MM.JJJJ")
5. Barrierefreie Inhalte erstellen
Texte
Schreiben Sie in kurzen Sätzen. Vermeiden Sie Fachjargon oder erklären Sie ihn. Nutzen Sie Zwischenüberschriften alle 200 bis 300 Wörter. Listen und Tabellen gliedern komplexe Informationen. Ein Flesch-Score über 30 ist ein guter Richtwert.
Bilder
Jedes Bild braucht einen Alt-Text. Beschreiben Sie, was das Bild zeigt, nicht wie es aussieht. Dekorative Bilder bekommen ein leeres alt-Attribut (alt=""). Infografiken brauchen eine Langbeschreibung im Text.
Videos und Audio
Videos brauchen Untertitel. Audiodeskriptionen helfen blinden Nutzern. Transkripte sind die beste Lösung, weil sie für alle zugänglich sind und gleichzeitig SEO-Vorteile bringen.
Links
Vermeiden Sie "Hier klicken" oder "Mehr erfahren". Der Link-Text muss das Ziel beschreiben. "WCAG-Richtlinien herunterladen" statt "Hier klicken". Externe Links mit target="_blank" brauchen einen Hinweis.
6. Testen und validieren
Barrierefreiheit braucht drei Arten von Tests. Keine allein reicht aus.
Automatisch
Tools wie WAVE, axe DevTools oder Lighthouse prüfen den Code. Sie finden etwa 30 Prozent der Probleme: fehlende Alt-Texte, Kontrast-Fehler, falsche ARIA-Attribute.
Manuell
Navigieren Sie per Tastatur. Testen Sie mit einem Screenreader (NVDA oder VoiceOver). Zoomen Sie auf 200 Prozent. Prüfen Sie die Reihenfolge der Inhalte.
Nutzer-Test
Lassen Sie Menschen mit Behinderung Ihre Website testen. Echte Nutzer finden Probleme, die kein Tool erkennt.
Testen Sie nicht erst am Ende. Prüfen Sie jede Seite während der Entwicklung. Je später Sie Fehler finden, desto teurer ist die Korrektur.
7. Launch und laufende Pflege
Die barrierefreie Website ist fertig. Aber die Arbeit hört nicht auf. Neue Inhalte müssen ebenfalls barrierefrei sein. Regelmäßige Audits decken Probleme auf, die sich einschleichen.
Barrierefreiheitserklärung
Veröffentlichen Sie eine Erklärung zur Barrierefreiheit. Beschreiben Sie, welchen WCAG-Level Sie einhalten. Nennen Sie bekannte Einschränkungen. Bieten Sie einen Feedback-Kanal an, über den Nutzer Probleme melden können.
Redaktionsleitfaden
Erstellen Sie Regeln für Ihre Redaktion: Alt-Texte für jedes Bild, Untertitel für jedes Video, klare Überschriften-Hierarchie. Schulen Sie Ihr Team. Barrierefreiheit ist kein Projekt, sondern ein fortlaufender Prozess.
Tipp: Behandeln Sie Barrierefreiheit von der ersten Skizze an als festen Bestandteil — nicht als Korrektur am Ende. Beim Neubau kostet sie nur 10 bis 20 Prozent Mehraufwand, beim nachträglichen Nachrüsten ein Vielfaches.
8. Fazit: So gelingt die barrierefreie Website
Eine barrierefreie Website ist kein Sonderfall, sondern guter Standard. Wer die vier WCAG-Prinzipien von Anfang an mitplant, semantisch sauber baut und konsequent testet, erreicht mehr Menschen, erfüllt das BFSG und gewinnt obendrein bei Geschwindigkeit und Google-Ranking. Die Arbeit endet nicht zum Launch — sie wird zum laufenden Prozess in Redaktion und Pflege.
Sie möchten Ihre Website barrierefrei machen oder eine neue barrierefreie Seite erstellen? Wir unterstützen Sie bei der Barrierefreiheit und WCAG-Umsetzung, von der Analyse bis zum Audit. Für eine pragmatische Sofortlösung beraten wir Sie zur Eye-Able BFSG-Lösung. Und wenn ein barrierefreier Neubau ansteht, hilft unsere Beratung dabei, Ihren Online-Shop erstellen zu lassen — barrierefrei von Grund auf. Die Erstberatung ist kostenfrei.
9. Häufige Fragen: Barrierefreie Website erstellen
Was kostet eine barrierefreie Website?
Bei einem Neubau kostet Barrierefreiheit kaum mehr. Rechnen Sie mit 10 bis 20 Prozent Mehraufwand gegenüber einer nicht barrierefreien Seite. Die Nachrüstung einer bestehenden Website liegt bei 3.000 bis 15.000 Euro, je nach Umfang und Komplexität. In einem kostenfreien Erstgespräch schätzen wir den Aufwand für Ihr Projekt ein.
Ist eine barrierefreie Website ab 2025 Pflicht?
Das BFSG gilt seit dem 28. Juni 2025 für Online-Shops und digitale Dienste, die an Verbraucher gerichtet sind. Reine Unternehmenswebsites ohne Shop sind nicht direkt betroffen. Trotzdem empfehlen wir Barrierefreiheit für jede Website — Sie erreichen mehr Menschen und verbessern Ihr Google-Ranking.
Wie lange dauert es, eine barrierefreie Website zu erstellen?
Ein barrierefreier Neubau dauert etwa 6 bis 12 Wochen. Die Nachrüstung einer bestehenden Seite hängt vom Umfang ab. Rechnen Sie mit 2 bis 8 Wochen für Audit, Umsetzung und Testing. Wir begleiten Sie durch den gesamten Prozess.
Reichen automatische Tests für Barrierefreiheit?
Nein. Automatische Tools wie WAVE oder axe finden nur etwa 30 Prozent aller Probleme. Manuelle Tests mit Tastatur und Screenreader sind unverzichtbar. Am besten kombinieren Sie automatische Prüfung, manuelle Tests und Nutzertests mit echten Betroffenen.
Welche WCAG-Stufe muss ich erreichen?
WCAG 2.1 Level AA ist der Standard, den das BFSG und die europäische Norm EN 301 549 verlangen. Level AAA ist wünschenswert, aber in der Praxis selten vollständig umsetzbar. Wir empfehlen AA als Ziel und AAA dort, wo es einfach möglich ist.