Accessibility Quick Check
Kurzliste für eine schnelle Selbst-Prüfung
Tastatur-Check (2 Minuten, extrem aussagekräftig)
Mit TAB / SHIFT+TAB durch die Seite: kommst Du überall hin (Menü, CTA, Formulare, Footer)?
Ist der Fokus immer sichtbar (klarer Rahmen/Highlight)?
Gibt es Tastatur-Fallen (z. B. Menü/Popup, aus dem Du nicht rauskommst)?
Funktioniert „Enter/Space“ auf Buttons/Interaktionen zuverlässig?
Struktur & Semantik (Google-Bot + Screenreader-Fit)
Gibt es genau ein H1 pro Seite (klarer Seiten-Titel)?
Sind Überschriften logisch (H2 unter H1, keine Sprünge H2 → H4)?
Sind Listen wirklich Listen (<ul>/<ol>), nicht nur optisch?
Haben Buttons echte Button-Elemente, Links echte Links (kein „div klickbar“)?
Tabellen
Tabellen nur für Daten. Für Layout/Spalten nutzen wir Grid oder Flexbox – nicht <table>.
Responsive ohne Inhaltverlust. Tabellen müssen auf Mobile sauber nutzbar bleiben – nichts wird abgeschnitten oder „versteckt“.
Überschriften sauber zugeordnet. Bei Datentabellen sind Zellen eindeutig mit Spalten-/Zeilenüberschriften verknüpft (z. B. per scope, headers, id).
Komplexe Tabellen extra sauber bauen. Sobald es mehr als eine Kopfzeile/-spalte gibt, braucht jede Zelle eine eindeutige Zuordnung über headers/id.
Links & CTAs (Conversion-Thema)
Linktexte sind eindeutig: nicht „hier klicken“, sondern „Basis-Check anfragen“.
CTA-Buttons haben klare Bezeichnung (auch ohne Kontext).
BarriereFREIE Texte
Keine unnötigen Fachwörter/Abkürzungen – oder beim ersten Mal kurz erklären.
Wenn spezielle Begriffe nötig sind: Glossar oder kurze Erklärung direkt im Kontext.
Inklusiv formulieren – ohne Klischees.
a) Stereotypen vermeiden, so dass sich alle angesprochen fühlen.
b) Prüfen, ob für bestimmte Zielgruppen Einfache/Leichte Sprache sinnvoll ist.Mehrsprachigkeit sauber umsetzen.
a) Fremdsprachen korrekt kennzeichnen (z. B.lang-Attribut).
b) Klare Möglichkeit anbieten, die Sprache zu wechseln.
c) Inhalte in Gebärdensprache einplanen, wenn es zur Zielgruppe passt.
Bilder & Grafiken (schnell übersehen)
Wichtige informative Bilder haben Alt-Texte, die die Information, die das Bild übermittelt, wiedergeben.
Dekorative Bilder ohne Informationsgehalt sind mit alt=““ korrekt als dekorativ markiert.
Icons, die Bedeutung tragen (z. B. Pfeile, Häkchen), sind nicht nur optisch.
Wahrnehmbarkeit von Farben
Hervorgehobene Informationen sind auch für Nutzer, die keine Farbe wahrnehmen können, klar als solche erkennbar, z.B. für Farbenblinde oder Menschen mit Farbsehschwäche.
Farbliche Hervorhebungen kommen gezielt zum Einsatz, z.B. bei:
a) Überschriften
b) Menüpunkten, Links, Pfadangaben
c) Diagrammen und FormularenBei Diagrammen und Infografiken wird die jeweilige Bedeutung der farblichen Hervorhebungen durch eine Legende erläutert.
Farben & Kontrast (Umsatz-Killer, wenn’s schiefgeht)
Zwischen Text und Hintergrund ist genügend Kontrast, insbesondere bei:
a) Buttons / CTAs
b) Links im Fließtext
c) Platzhaltertexten in FormularfeldernGrundsätzlich beträgt der Farbkontrast zwischen Text und Hintergrund mindestens 4.5:1.
Ein Kontrastverhältnis von 3:1 reicht aus bei
a) Texten in einer Schriftgröße ab 18 Punkt.
b) Texten mit einer Schriftgröße unter 18 Punkt, die fett gedruckt sind
c) Infografiken, Diagrammen, Icons und Formular-EingabefeldernInformationen werden nicht nur über Farbe vermittelt (z. B. Fehler rot + zusätzlich Text/Icon)
Lesbarkeit und Zoom-Fähigkeit von Texten
Der Text kann auf 200% vergrößert werden, ohne dass das Layout bricht und Inhalte aus dem sichtbaren Bereich verschwinden.
Informationen werden außer durch Farbe auch durch Alternativen vermittelt, z.B.
a) :hover– oder :active-Zustände von Links und Menüpunkten
b) :focus– oder :focus-within-Zustände bei FormularfeldernLinks sind zusätzlich durch fette oder kursive Schrift oder durch Unterstreichungen gekennzeichnet.
Technische Kompatibilität (Robustheit)
Die Website wurde auf verschiedenen Browsern und Ausgabegeräten getestet und kann auf all diesen korrekt und konsistent dargestellt werden.
Die Website ist für Screenreader optimiert und wurde mit diesen getestet.
Formulare (Lead-Gen entscheidet sich hier)
Jedes Feld hat ein aussagekräftiges Label (nicht nur Placeholder).
Fehlermeldungen sind verständlich und sagen, was zu tun ist.
Für jedes Feld sollte eine eigene Fehlermeldung vorgesehen sein.
Pflichtfelder sind klar gekennzeichnet, z.B. mit * (und maschinenlesbar).
Medien (Video/Audio)
Videos haben Untertitel, die direkt im Video oder über den Player eingebunden werden können.
Wenn Audios wichtige Informationen enthalten, muss ein Transkript vorhanden sein.
Für Videos mit wichtigen visuellen Inhalten sind Audiodeskriptionen vorhanden.
Für „stumme“ Videos ohne Ton gibt es alternative Medien.
PDF/Downloads (falls vorhanden)
PDFs sind getaggt, haben Überschriftenstruktur und sind mit Tastatur nutzbar –sonst lieber als HTML anbieten.
Dateiformat und Inhalt sind deutlich angegeben, z.B. „Speisekarte (PDF)“
Die Erklärung zur BarriereFREIHEIT ist auf unserer Seite vorhanden
Sie enthält alle Mindest-Inhalte
1. Geltungsbereich
2. Stand der Barrierefreiheit (Konformitätsstatus)
3. Angaben zu (noch) nicht barrierefreien Inhalten + Begründung
4. Datum und Methode der Erstellung
5. Feedback-Mechanismus (Kontaktweg) + Reaktionslogik
6. Hinweis auf Durchsetzungsverfahren / zuständige StelleAuffindbarkeit: Link im Footer (neben Impressum/Datenschutz) und auf mobilen Geräten genauso sichtbar.
Verständlichkeit: Klartext statt Juristen-Deutsch – aber präzise.
Aktualität: Nach Releases/Design-Änderungen mit anfassen (Datum/Stand anpassen).
Konsistenz: Was Ihr in der Erklärung nennt (z. B. bekannte Barrieren), muss in Eurem Maßnahmenplan wieder auftauchen.
Deine 3 Quick-Wins (die fast immer sofort zahlen)
Quick-Win 1: Fokus sichtbar machen (Keyboard + UX + Professionalität)
Ziel: Der Nutzer oder die Nutzerin sieht sofort, auf welcher Unterseite oder an welcher Stelle einer Webseite oder eines Web-Shops er sich gerade befindet, z.B. auf der Checkout-Seite.
Warum Umsatz: Weniger Abbrüche, bessere Bedienbarkeit, wirkt „sauber“ und vertrauenswürdig.
Typische Umsetzung: Deutliche Fokus-Styles für Links/Buttons/Formulare (nicht entfernen, sondern verbessern).
Quick-Win 2: Überschriften & CTA-Linktexte „bot- und menschenlesbar“ machen
Ziel: Die Struktur ist glasklar für Google Bot, Screenreader und schnelle Leser.
Warum Umsatz: Bessere Orientierung = bessere Conversion; plus SEO-Stabilität.
Typische Umsetzung:
a. Eine klare H1-Überschrift
b. saubere H2/H3-Logik
c. CTAs mit eindeutigen Namen („Basis-Check anfragen“ statt „Mehr erfahren“)
Quick-Win 3: Formulare absichern (Labels + Fehlermeldungen)
Ziel: Die Leadgenerierung soll nicht an kleinen Nachlässigkeiten wie fehlenden oder nichtssagenden Labels scheitern .
Warum Umsatz: Jede Form-Optimierung ist direkt Conversion-optimierend.
Typische Umsetzung:
a. Labels statt Placeholder-only,
b. Fehlermeldungen mit konkreter Handlungsanweisung,
c. Fokus springt zum Fehler.