Barrierefreiheit wird oft als „Pflicht“ gesehen. Praktisch ist sie ein Wachstumshebel:
- Nutzer kommen leichter ans Ziel (mehr Leads)
- Inhalte werden klarer strukturiert (bessere SEO-Signale)
- weniger Friktion → weniger Abbrüche (bessere UX)
Wichtig: Barrierefreiheit heißt nicht „Design wird hässlich“. Es heißt: mehr Menschen können deine Seite nutzen – auch bei schlechtem Licht, mit Tastatur, mit Screenreader oder auf dem Handy.
Was bedeutet Barrierefreiheit (Accessibility) überhaupt?
Eine Website ist barrierefrei, wenn Menschen sie wahrnehmen, bedienen und verstehen können – unabhängig von Einschränkungen oder Situation.
Typische Beispiele:
- jemand navigiert nur mit Tastatur (ohne Maus)
- jemand nutzt einen Screenreader
- jemand kann Farben schlecht unterscheiden (Kontrast ist entscheidend)
- jemand hat motorische Einschränkungen (kleine Klickflächen sind ein Problem)
- jemand ist in der Sonne auf dem Handy (Kontrast/Lesbarkeit wieder entscheidend)
Warum Accessibility SEO verbessert (ohne Buzzwords)
Google „sieht“ deine Seite nicht wie ein Mensch. Es braucht Struktur. Genau diese Struktur erzwingt Accessibility oft automatisch:
- Semantik: saubere Überschriften, Listen, Labels → Inhalte sind leichter zu verstehen
- Linktexte: „was passiert beim Klick?“ → bessere Kontextsignale
- Bilder: sinnvolle Alt-Texte → mehr Kontext (und Bildsuche)
- Formulare: klare Labels/Fehler → weniger Abbrüche → mehr Conversions
Accessibility ist also kein direkter Ranking-Hack, sondern ein Fundament, das viele SEO- und UX-Probleme gleichzeitig reduziert.
Die 4 WCAG-Prinzipien als Merkhilfe (POUR)
Du musst die WCAG nicht auswendig lernen. Es reicht, wenn du das Grundprinzip verstehst:
- Perceivable (wahrnehmbar): Text/Bilder/Bedienelemente sind erkennbar (Kontrast, Alt-Texte)
- Operable (bedienbar): alles funktioniert ohne Maus (Tastatur, Fokus)
- Understandable (verständlich): klare Sprache, sinnvolle Fehlermeldungen
- Robust (robust): sauberer HTML-Code, kompatibel mit Assistenztechnik
Quick Wins (30–60 Minuten)
Wenn du heute nur „das Wichtigste“ machen willst:
1) Heading-Struktur fixen
- genau eine H1 pro Seite
- danach logisch: H2 für Abschnitte, H3 für Unterpunkte
- keine Überschrift nur wegen „Optik“ (Optik löst du mit CSS, nicht mit falschen Tags)
2) Linktexte menschlich machen
Schlecht:
- „hier klicken“
- „mehr“
Besser:
- „Preise für Webdesign ansehen“
- „Checkliste: Relaunch ohne Rankingverlust“
3) Fokus sichtbar machen
Wenn du mit Tab navigierst, muss immer klar sein, wo du gerade bist.
4) Formulare: Labels + Fehlertexte
- jedes Feld braucht ein sichtbares Label (nicht nur Placeholder)
- Fehlermeldungen müssen sagen, was falsch ist und wie man es behebt
5) Kontraste prüfen
Wenn Texte „schön hellgrau“ sind, sind sie oft einfach zu schwach.
Schritt-für-Schritt: Accessibility-Audit, das wirklich hilft
Schritt 1: Einmal komplett mit Tastatur testen
Ohne Maus:
Tabdurch die SeiteShift + TabzurückEnter/Spacezum Auslösen
Checke:
- kommst du überall hin?
- ist die Reihenfolge logisch?
- siehst du den Fokus?
- gibt es „Tastaturfallen“ (du kommst nicht mehr raus)?
Schritt 2: Automatische Checks (für die Top-Issues)
Nutze z.B.:
- Lighthouse (Chrome) → Accessibility
- axe DevTools (Browser-Plugin)
Automatische Tools finden nicht alles, aber sie finden schnell echte Blocker (Labels, Kontrast, ARIA-Probleme).
Schritt 3: 5-Minuten Screenreader-Realitätstest
Du musst kein Screenreader-Profi werden. Aber einmal kurz testen zeigt dir sofort, ob die Seite „vorlesbar“ ist:
- Überschriften-Navigation: erkennt man die Struktur?
- Linkliste: sind Linktexte aussagekräftig?
- Formulare: werden Label und Fehler verstanden?
Schritt 4: Fix-Reihenfolge (Impact zuerst)
Priorisiere so:
- Navigation/Buttons/Formulare (bedienbar)
- Fokus/Keyboard-Reihenfolge (bedienbar)
- Kontrast/Lesbarkeit (wahrnehmbar)
- Semantik/Überschriften (verständlich)
- Alt-Texte/Details (Kontext)
Checklisten nach Bereich
A) Semantik (Überschriften & Landmarken)
- genau eine H1
- logische H2/H3 Struktur
- Navigation / Main / Footer klar getrennt (Landmarken)
- Listen sind echte
<ul>/<ol>(keine "Bullet-Optik" mit<div>)
B) Links (Text, der alleine Sinn ergibt)
Gute Linktexte helfen:
- Nutzern
- Screenreadern
- SEO-Tools
Prüfregel:
Wenn ich nur den Linktext lese – weiß ich, wohin es geht?
C) Bilder (Alt-Text als Kontext)
Alt-Text ist eine kurze Beschreibung.
- informatives Bild → beschreiben, was man sieht und warum es wichtig ist
- dekoratives Bild →
alt=""(leer)
Mini-Template:
- „Foto von … (relevant für …)“
- „Diagramm: … zeigt …“
D) Buttons & Icons (Labels)
Typischer Fehler: Icon-Buttons ohne Text.
- jeder Button braucht einen sinnvollen Namen (sichtbar oder per
aria-label) - „X“ oder „Hamburger“-Icons müssen verständlich angekündigt sein
E) Formulare (Conversion-SEO)
Kontaktformulare sind oft der letzte Schritt.
- klare Labels
- verständliche Fehlermeldungen
- Fokus sichtbar
- Pflichtfelder klar markieren
Beispiel für gute Fehlermeldung:
- statt: „Ungültig“
- besser: „Bitte gib eine gültige E-Mail-Adresse ein (z.B. name@firma.de).“
F) Fokus & Tastatur
- Fokus ist immer sichtbar
- Fokus-Reihenfolge ist logisch (visuell und inhaltlich)
- keine Elemente, die nur per Hover funktionieren
G) Kontrast & Lesbarkeit
- Text muss sich klar vom Hintergrund abheben
- nicht nur Farben nutzen, um Informationen zu unterscheiden (z.B. Fehler nur rot)
Häufige Fehler (die fast jede Website hat)
- Buttons ohne Labels (nur Icon)
- Links wie „hier klicken“
- fehlende Fokus-Styles
- zu schwache Kontraste
- Formulare ohne echte Labels (nur Placeholder)
- Fehlermeldungen, die nicht sagen, was zu tun ist
- Überschriften als „Design-Element“ statt Struktur
Accessibility & Performance hängen zusammen
Schnelle Seiten sind zugänglicher: weniger Wartezeit, weniger Layout-Sprünge, bessere Bedienbarkeit.
Mehr dazu: Core Web Vitals erklärt
Nächster Schritt
Wenn du willst, machen wir einen kurzen Accessibility-Check auf den wichtigsten Seiten und fixen die Top-10 Issues (mit klarer Priorisierung nach Impact).
