Barrierefreies Webdesign ist nicht nur eine gesetzliche Pflicht — es ist gutes Design. Seit dem BFSG 2025 müssen viele Websites und Shops barrierefrei sein. In diesem Artikel zeigen wir Ihnen die Grundlagen: Von WCAG-Prinzipien über Farbkontraste bis zu barrierefreien Formularen.
♿ 1. Was ist barrierefreies Webdesign?
Barrierefreies Webdesign sorgt dafür, dass alle Menschen eine Website nutzen können. Egal ob jemand blind ist, eine motorische Einschränkung hat oder schlecht sieht. Die Idee ist einfach: Niemand soll ausgeschlossen werden.
In Deutschland leben über 10 Millionen Menschen mit einer Behinderung. Dazu kommen Millionen ältere Menschen mit nachlassender Sehkraft. Barrierefreies Design erreicht diese Zielgruppe — und verbessert die Nutzung für alle.
Seit dem Barrierefreiheitsstärkungsgesetz (BFSG) vom 28. Juni 2025 ist Barrierefreiheit für viele digitale Angebote Pflicht. Betroffen sind Online-Shops und digitale Dienste für Verbraucher.
📖 2. WCAG-Prinzipien verstehen
Die Web Content Accessibility Guidelines (WCAG) sind der internationale Standard. Sie basieren auf vier Prinzipien:
👁️ Wahrnehmbar
Inhalte müssen für alle wahrnehmbar sein. Alt-Texte für Bilder. Untertitel für Videos. Ausreichende Kontraste.
⌨️ Bedienbar
Alles muss per Tastatur bedienbar sein. Keine Zeitlimits. Keine blinkenden Inhalte. Klare Fokus-Anzeige.
📝 Verständlich
Texte müssen verständlich sein. Navigation vorhersagbar. Fehler klar beschrieben. Hilfe angeboten.
🔧 Robust
Inhalte müssen mit verschiedenen Technologien funktionieren. Screenreader, Braillezeilen, ältere Browser.
Es gibt drei Konformitätsstufen: A (Minimum), AA (Standard) und AAA (Maximum). Das BFSG verlangt mindestens WCAG 2.1 Level AA.
🎨 3. Farben und Kontraste
Farbe ist einer der häufigsten Stolpersteine. Rund 8 Prozent der Männer haben eine Farbschwäche. Darauf müssen Sie achten:
Kontrastverhältnis
WCAG AA verlangt ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text (ab 18px fett oder 24px normal). Nutzen Sie Tools wie den WebAIM Contrast Checker.
Farbe nicht als einziges Merkmal
Markieren Sie Pflichtfelder nicht nur rot. Fügen Sie ein Sternchen oder Text hinzu. Zeigen Sie Erfolg nicht nur durch grüne Farbe. Nutzen Sie zusätzlich Icons oder Text.
Praxis-Tipps
- Dunkler Text auf hellem Grund ist am sichersten
- Vermeiden Sie Rot-Grün-Kombinationen
- Testen Sie mit einem Farbblindheits-Simulator
- Buttons brauchen mindestens 3:1 Kontrast zum Hintergrund
🔤 4. Typografie
Gute Typografie macht Texte lesbar. Für Barrierefreiheit gelten diese Regeln:
- Schriftgröße: Mindestens 16px für Fließtext. Besser 18px.
- Zeilenabstand: Mindestens 1,5-fach. Das verbessert die Lesbarkeit deutlich.
- Zeilenlänge: Maximal 80 Zeichen pro Zeile. Zu lange Zeilen sind schwer zu lesen.
- Schriftart: Sans-Serif-Schriften sind am Bildschirm besser lesbar.
- Textausrichtung: Linksbündig. Blocksatz erzeugt ungleichmäßige Abstände.
Wichtig: Die Website muss auf 200 Prozent zoombar sein, ohne dass Inhalte verloren gehen. Das ist eine WCAG-Pflicht.
🧭 5. Navigation
Eine barrierefreie Navigation ist die Basis. Jeder muss sich zurechtfinden:
Tastatur-Navigation
Alle Funktionen müssen per Tab-Taste erreichbar sein. Die Reihenfolge muss logisch sein. Der aktive Fokus muss sichtbar sein — ein deutlicher Rahmen oder Farbwechsel.
Skip-Links
Ein "Zum Inhalt springen"-Link am Anfang der Seite. So können Screenreader-Nutzer die Navigation überspringen. Der Link kann visuell versteckt sein, muss aber per Tastatur erreichbar bleiben.
Überschriften-Hierarchie
Genau eine H1 pro Seite. Dann H2, H3, H4 — keine Ebene überspringen. Screenreader nutzen Überschriften zur Navigation. Falsche Hierarchie verwirrt.
📝 6. Formulare
Formulare sind oft die größte Hürde. So machen Sie sie barrierefrei:
- Labels: Jedes Eingabefeld braucht ein sichtbares Label. Placeholder-Text reicht nicht.
- Fehlermeldungen: Klar beschreiben was falsch ist. Nicht nur "Ungültige Eingabe" sondern "Bitte geben Sie eine gültige E-Mail-Adresse ein".
- Pflichtfelder: Klar markieren. Nicht nur mit Farbe, sondern mit Text oder Sternchen.
- Gruppierung: Zusammengehörige Felder mit Fieldset und Legend gruppieren.
- Autofill: Autocomplete-Attribute setzen. Das hilft allen Nutzern.
🖼️ 7. Bilder und Medien
Alt-Texte
Jedes Bild braucht einen Alt-Text. Beschreiben Sie was auf dem Bild zu sehen ist. Für dekorative Bilder setzen Sie alt="" (leer). So überspringt der Screenreader sie.
Videos
Videos brauchen Untertitel. Für gehörlose Nutzer sind sie unverzichtbar. Auto-generierte Untertitel sind ein Start, aber prüfen Sie die Qualität. Für rein visuelle Videos bieten Sie eine Audiobeschreibung an.
Icons und SVGs
Icons brauchen entweder einen Alt-Text oder ein aria-label. Wenn ein Icon nur dekorativ ist, verstecken Sie es mit aria-hidden="true". Icons dürfen nie die einzige Information sein — immer Text dazu.
Mehr zum Testen Ihrer Website finden Sie in unserer Barrierefreiheit-Checkliste.
❓ Häufige Fragen zu barrierefreiem Webdesign
Was bedeutet barrierefreies Webdesign?
Alle Menschen sollen eine Website nutzen können. Auch mit Sehbehinderung, motorischen Einschränkungen oder kognitiven Beeinträchtigungen. Die Grundlage bilden die WCAG-Richtlinien.
Ist Barrierefreiheit ab 2025 Pflicht?
Ja, das BFSG gilt seit dem 28. Juni 2025. Es betrifft Online-Shops und digitale Dienste für Verbraucher. Ausnahmen gibt es für Kleinstunternehmen unter 10 Mitarbeitern.
Was ist der Unterschied zwischen WCAG A, AA und AAA?
A ist das Minimum, AA ist der Standard den die meisten Gesetze verlangen, AAA ist die strengste Stufe. In der Praxis reicht AA für die meisten Websites.
Wie teste ich meine Website auf Barrierefreiheit?
Nutzen Sie Tools wie WAVE, axe oder Lighthouse. Testen Sie auch manuell: Tab-Navigation, Screenreader, Zoom auf 200 Prozent. Automatische Tests finden nur 30 Prozent der Probleme.
Was kostet barrierefreies Webdesign?
Bei Neubau kaum extra. Nachrüstung kostet 2.000 bis 10.000 Euro. Audits kosten 500 bis 2.000 Euro pro Jahr. Lassen Sie sich kostenfrei beraten.