♿ Barrierefreie Website erstellen 2026

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:

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

• 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.

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.

❓ Häufige Fragen