10 Grundregeln für mehr Barrierefreiheit

Barrierefreiheit macht digitale Angebote für alle Menschen zugänglich – unabhängig von Sehvermögen, Motorik, kognitiven Fähigkeiten oder Gerät. Barrierefreiheit erhöht die Nutzbarkeit, senkt Abbrüche und stärkt Vertrauen. Die folgenden zehn Grundregeln zeigen, wie Sie Barrierefreiheit systematisch umsetzen – orientiert an der WCAG 2.1 AA.

Definition: Barrierefreiheit bedeutet, dass Inhalte wahrnehmbar, bedienbar, verständlich und robust sind. Dazu gehören ausreichende Kontraste, klare Struktur, semantisches HTML, Tastaturbedienung, verständliche Sprache, fehlerverzeihende Formulare und testbare Komponenten. Wer Barrierefreiheit priorisiert, verbessert zugleich SEO, Performance und Conversion.

Kontraste konsequent einhalten

Ohne ausreichenden Kontrast leidet die Lesbarkeit. Gemäss WCAG 2.1 AA muss Text zu Hintergrund mindestens 4.5:1 erreichen; grosser Text ab ~24 px Regular / ~19 px Bold darf 3:1 aufweisen. Planen Sie Farben früh und prüfen Sie Kontraste in allen Zuständen (Default, Hover, Focus, Disabled).

Farbschema für lesbare Buttons

• Primär: Blau #0A84FF (RGB 10,132,255; CMYK 96,48,0,0)
• Text: Weiss #FFFFFF (Kontrast 8.6:1 zu #0A84FF → WCAG 2.1 AA erfüllt)
• Hover: #0666CC (Kontrast zu Weiss 5.2:1)

So bleibt die Beschriftung überall klar erkennbar. Prüfen Sie zusätzlich Fehlermeldungen in Rot (#B00020) mit Weiss (Kontrast 5.7:1).

Struktur und Navigation klären

Eine saubere Seitenhierarchie ist Basis der Barrierefreiheit. Eine H1 pro Seite, danach logisch H2–H4. Nutzen Sie Breadcrumbs und sprechende Menüs. So erkennen Screenreader die Struktur, und alle finden Inhalte schneller.

Wie hilft Struktur beim Verständnis?

Struktur schafft Orientierungspunkte. Wenn Kapitel sauber benannt sind und das Menü stabil bleibt, sinkt die kognitive Last. Kombiniert mit konsistenten CTAs steigert das die Erfolgsrate messbar – insbesondere für neue Besuchende und mobile Nutzerinnen und Nutzer.

Weiterführend zu Navigation und Layout lohnt sich ein Blick auf UX Best Practices.

Semantisches HTML verwenden

Barrierefreiheit beginnt im Markup. Nutzen Sie echte Elemente: <button> statt <div>, <label> für Formulare, <header>, <nav>, <main>, <footer> zur Gliederung. Rollen (role) und ARIA-Attribute kommen nur zum Einsatz, wenn Semantik fehlt oder erweitert werden muss.

Wann sind ARIA-Attribute sinnvoll?

ARIA ersetzt Semantik nicht. Verwenden Sie ARIA, wenn ein komplexes Muster (z. B. Akkordeon, Tabs) mit nativem HTML nicht vollständig ausdrückbar ist. Dokumentieren Sie Zustände wie aria-expanded und aktualisieren Sie sie per Script konsistent.

Tastaturbedienung sicherstellen

Barrierefreiheit heisst: Alle Funktionen sind per Tastatur erreichbar. Die Tab-Reihenfolge folgt der visuellen Ordnung, Fokus ist sichtbar und nicht geklaut. Prüfen Sie: Start → Navigation → Inhalt → Formulare → Footer.

Sichtbare Fokuszustände gestalten

• Focus-Ring: 2 px Outline #1E90FF (RGB 30,144,255) auf hellem Hintergrund
• Focus auf dunklem Hintergrund: Outline Weiss #FFFFFF, Offset 2 px
• Kontrast Focus vs. Umgebung ≥ 3:1

Mit deutlichen Fokusindikatoren steigern Sie Bedienbarkeit und erfüllen die Mindestanforderungen der WCAG 2.1 AA.

Alternativtexte und Medien

Für Bilder, Icons und Grafiken liefern Alt-Texte Zweck und Information. Dekorative Elemente erhalten leere Alt-Attribute (alt=»»). Videos brauchen Untertitel; Audiotracks eine Transkription. Steuern Sie Autoplay ab und bieten Sie klare Bedienelemente.

Gute Alt-Texte schreiben

Beispiel: Statt „Bild1“ besser „Produktfoto: Roter Rucksack, 22 l, Fronttasche“.

Formulare fehlertolerant gestalten

Formulare sind häufige Abbruchpunkte. Barrierefreiheit verlangt klare Labels, gruppierte Felder, verständliche Hilfetexte und präzise Fehlermeldungen. Validieren Sie server- und clientseitig, ohne den Fokus zu verlieren.

Fehlermeldungen klar kommunizieren

• Fehlerfarbe: Rot #D32F2F (Kontrast zu Weiss 5.9:1)
• Icon optional, Text verpflichtend
• Beispieltext: „PLZ muss 4 Ziffern enthalten“

Zusätzlich: Erfolgsmeldungen in Grün #2E7D32 mit Klartext („Gesendet“). Für mehr Conversion-Aspekte siehe Usability optimieren.

Klare Sprache und Lesbarkeit

Kurze Sätze, konkrete Verben und aktive Formulierungen erhöhen Barrierefreiheit. Vermeiden Sie Fachjargon oder erklären Sie ihn mit Tooltips. Strukturieren Sie längere Inhalte mit Absätzen, Listen und Zwischenüberschriften.

PAA: Wie einfach ist „einfach genug“?

Auf Leseniveau der 7.–9. Klasse schreiben. Lange Nominalketten vermeiden. Pro Satz ein Gedanke. Wenn ein Fachbegriff unvermeidbar ist, ergänzen Sie eine kurze Erklärung direkt daneben.

Responsives Design und Zoom

Barrierefreiheit umfasst unterschiedliche Viewports und Zoom. Inhalte müssen bei 200 % Zoom ohne horizontales Scrollen nutzbar bleiben. Layouts passen sich an; Klickziele behalten Mindestgrössen von 44×44 px.

Mobile zuerst denken?

Planen Sie Mobile-Pattern zuerst und erweitern Sie für grössere Screens. Dadurch bleiben Hierarchie und Interaktionen klar. Mehr Hintergründe liefert Mobile First.

So bleiben Formulare, Navigation und CTAs auch bei Zoom und kleinen Screens zuverlässig bedienbar.

Bewegung und Animation dosieren

Animieren Sie sparsam und respektieren Sie das Betriebssystem-Setting „Bewegung reduzieren“. Kritische Inhalte (z. B. Banner) dürfen nicht blinken. Animationen unterstützen die Orientierung, statt sie zu stören.

Gute Micro-Interactions

• Hover: Farbwechsel #0A84FF → #0666CC (200 ms)
• Focus: Outline sichtbar (siehe oben)
• Accordion: aria-expanded korrekt toggeln

Testen Sie Bewegungen mit echten Nutzerinnen und Nutzern; vermeiden Sie Dauerloopings.

Fehler vorbeugen und Hilfe bieten

Barrierefreiheit bedeutet auch: Fehler vermeiden. Bieten Sie Auto-Save bei langen Formularen, Undo bei heiklen Aktionen und klare Rückmeldungen nach jedem Schritt. Schreiben Sie leitsystemartige Hilfetexte.

Beispiel Microcopy für Sicherheit

• „Sie können die Angaben später ändern.“
• „Nichts gespeichert? Auto-Save aktiv.“
• „Sie haben 30 Minuten Zeit; Fortschritt bleibt erhalten.“

Solche Texte reduzieren Stress und Abbrüche – ein Gewinn für Barrierefreiheit und Conversion gleichermaßen.

Testen und kontinuierlich prüfen

Barrierefreiheit ist kein Projekt, sondern ein Prozess. Führen Sie regelmässig manuelle Checks, Screenreader-Tests (NVDA, VoiceOver) und Code-Audits durch. Ergänzen Sie automatische Scans – sie finden Schnellfehler, ersetzen aber keine menschliche Prüfung.

Technische Grundlagen und moderne Muster finden Sie gebündelt unter moderne Webentwicklung.

Mini-Case: Formular in 5 Schritten

Ausgangslage: Kontaktformular mit hohen Abbrüchen. Ziel: Barrierefreiheit und Conversion steigern. Umsetzung:

Ergebnis: weniger Fehlversuche, höhere Absendungen. Nebeneffekt: bessere Mobile-Nutzung und weniger Supporttickets. Dieses Vorgehen zeigt, wie Barrierefreiheit direkt Geschäftsergebnisse verbessert.

Fazit: Barrierefreiheit wirkt doppelt

Barrierefreiheit erhöht Nutzbarkeit und Reichweite – und senkt Risiken. Mit klaren Kontrasten, Struktur, Semantik, Tastaturbedienung, verständlicher Sprache, robusten Formularen, Mobile-First, dezenten Animationen und regelmässigen Audits schaffen Sie inklusive Erlebnisse. Beginnen Sie heute mit einem Fokus auf die grössten Hebel – Kontrast, Tastatur, Formulare – und skalieren Sie dann systematisch.

Fragen zu Umsetzung, Audit oder Schulung? Jetzt Kontakt aufnehmen.

Häufige Fragen zu Barrierefreiheit