Barrierefreies Webdesign

Warum barrierefreies Webdesign mehr ist als ein Pflichtprogramm

Barrierefreiheit ist nicht für "die anderen" – sie hilft allen

"Wir brauchen barrierefreies Webdesign." – "Aber unsere Zielgruppe hat keine Behinderung."

Das ist ein Missverständnis. Barrierefreiheit hilft nicht nur Menschen mit dauerhaften Einschränkungen. Sie hilft allen:

• Jemand mit gebrochenem Arm kann nur eine Hand nutzen
• Jemand in der S-Bahn hat eine schlechte Verbindung
• Jemand ist über 60 und sieht kleine Schriften schlecht
• Jemand nutzt deine Website am Handy in der Sonne

Barrierefreiheit ist wie ein Lift. Gedacht für Rollstuhlfahrer, genutzt von allen.

Was barrierefreies Webdesign wirklich leistet

Barrierefreies Webdesign macht drei Dinge:

1. Es macht Inhalte zugänglich
Jeder kann sie lesen, hören, verstehen – unabhängig von Gerät oder Einschränkung.

2. Es macht Funktionen bedienbar
Formulare, Buttons, Navigationen funktionieren – auch mit Tastatur, Screenreader oder Vergrösserung.

3. Es macht Websites besser
Klare Strukturen, gute Kontraste, lesbare Texte – das hilft allen.

Die häufigsten Barrieren

Barriere 1: Schlechte Kontraste

Hellgraue Schrift auf weissem Hintergrund. Sieht modern aus. Ist aber unleserlich – besonders für Menschen mit Sehschwäche oder in hellem Licht.

Lösung: Mindestens 4,5:1 Kontrast für normalen Text, 3:1 für grosse Schrift.

Tool zum Prüfen: WebAIM Contrast Checker

Barriere 2: Fehlende Alt-Texte bei Bildern

Ein Screenreader liest: "Bild 1234.jpg". Niemand weiss, was auf dem Bild ist.

Lösung: Jedes Bild braucht einen Alt-Text. "Mann am Laptop" statt "DSC_1234".

Ausnahme: Rein dekorative Bilder brauchen einen leeren Alt-Text: alt=""

Ein Alt-Text ist wie eine Bildbeschreibung am Telefon. Klar, konkret, hilfreich.

Barriere 3: Unlogische Überschriften-Struktur

H1 → H3 → H2 → H4. Screenreader nutzen Überschriften zur Navigation. Wenn die Struktur nicht stimmt, ist die Seite unverständlich.

Lösung: H1 (eine pro Seite) → H2 → H3 → H4. Hierarchisch, logisch.

Barriere 4: Nur mit Maus bedienbar

Manche Menschen nutzen keine Maus. Sie navigieren mit der Tastatur (Tab, Enter, Pfeiltasten).

Lösung: Alle Funktionen müssen per Tastatur erreichbar sein. Test: Versuch deine Website ohne Maus zu bedienen.

Barriere 5: Videos ohne Untertitel

Gehörlose Menschen hören nichts. Menschen in lauter Umgebung auch nicht.

Lösung: Untertitel für alle Videos. Idealerweise auch eine Transkription.

Die WCAG-Richtlinien: Was du wissen musst

Was ist WCAG?

WCAG = Web Content Accessibility Guidelines. Der internationale Standard für barrierefreies Webdesign.

Aktuell: WCAG 2.1 (bald WCAG 2.2)

Die drei Konformitätsstufen

Level A: Minimale Barrierefreiheit. Besser als nichts.
Level AA: Empfohlenes Niveau. Das solltest du anstreben.
Level AAA: Höchste Stufe. Schwer zu erreichen, nicht immer nötig.

Empfehlung: Ziel ist WCAG 2.1 Level AA.

Die vier Prinzipien

WCAG basiert auf vier Prinzipien. Inhalte müssen:

1. Wahrnehmbar sein
Nutzer müssen Inhalte wahrnehmen können (sehen, hören, fühlen).

2. Bedienbar sein
Nutzer müssen die Website bedienen können (Tastatur, Touch, Maus).

3. Verständlich sein
Inhalte und Funktionen müssen verständlich sein.

4. Robust sein
Inhalte müssen mit verschiedenen Geräten und Hilfsmitteln funktionieren.

WCAG klingt kompliziert. Ist es aber nicht. Es ist Hausverstand in Regeln gegossen.

Was du konkret tun kannst

Für Designer

• Kontraste prüfen (4,5:1 für Text)
• Schriftgrösse mindestens 16px
• Klickbare Elemente mindestens 44×44px
• Fokus-Zustände sichtbar machen
• Nicht nur Farbe als Information nutzen ("Roter Button = Fehler" → zusätzlich Icon)

Für Entwickler

• Semantisches HTML nutzen (header, nav, main, footer)
• Alt-Texte bei Bildern
• Korrekte Überschriften-Hierarchie (H1 → H2 → H3)
• Tastaturbedienbarkeit testen
• ARIA-Labels für komplexe Interaktionen

Für Content-Ersteller

• Klare, einfache Sprache
• Kurze Sätze
• Aussagekräftige Linktexte ("Mehr erfahren" statt "Hier klicken")
• Untertitel für Videos
• Transkriptionen für Podcasts

Tools zum Testen

WAVE (empfohlen)

Browser-Extension. Zeigt Fehler direkt auf der Seite. Kostenlos.

Lighthouse (Chrome)

In Chrome DevTools integriert. Prüft Barrierefreiheit und mehr.

axe DevTools

Ausführlicher als WAVE. Zeigt konkrete Lösungen.

Screenreader testen

• NVDA (Windows): Kostenlos
• JAWS (Windows): Kostenpflichtig, Industriestandard
• VoiceOver (Mac/iPhone): Vorinstalliert

Tipp: Teste deine Website mit ausgeschaltetem Bildschirm. Hör nur zu. Verstehst du alles?

Rechtliche Anforderungen

In der Schweiz

BehiG (Behindertengleichstellungsgesetz): Öffentliche Websites müssen barrierefrei sein.

Betrifft: Bund, Kantone, Gemeinden. Teilweise auch Unternehmen mit öffentlichem Auftrag.

In der EU

European Accessibility Act: Ab 2025 müssen viele digitale Dienste barrierefrei sein.

Betrifft: E-Commerce, Banken, Telekommunikation, Transportdienste.

Für alle anderen

Auch ohne gesetzliche Pflicht: Barrierefreiheit ist gut. Sie erweitert deine Reichweite, verbessert deine Website und zeigt Verantwortung.

Barrierefreiheit ist kein Luxus. Es ist gute Praxis.

Wann du Barrierefreiheit priorisieren solltest

Barrierefreiheit ist besonders wichtig, wenn:

• Du gesetzlich verpflichtet bist
• Du ein breites Publikum erreichst
• Du öffentliche Dienstleistungen anbietest
• Du ältere Zielgruppen hast
• Du eine neue Website baust (jetzt ist der richtige Zeitpunkt)

Wenn du mit uns ein Projekt realisierst

Wir entwickeln Websites, die barrierefrei sind – nicht perfekt, aber zugehörig. Das heisst: Gute Kontraste, klare Strukturen, bedienbar für alle. Und wir prüfen, bevor wir live gehen.

Falls du unsicher bist, ob deine Website barrierefrei ist, beraten wir dich gerne unverbindlich.