Checkliste: Ist deine Website barrierefrei genug?

Barrierefreiheit bedeutet, dass deine Website von Menschen mit den unterschiedlichsten Fähigkeiten und Einschränkungen genutzt werden kann. Das betrifft nicht nur Menschen mit Seh-, Hör- oder motorischen Einschränkungen, sondern auch zum Beispiel Menschen mit kognitiven Beeinträchtigungen oder ältere Nutzer. Eine barrierefreie Website ist für alle besser nutzbar!

  • Alt-Texte:
    • Was hören ScreenreaderScreenreader Software, die Texte am Bildschirm laut vorliest oder als Braille ausgibt.-Nutzer:innen bei deinen Bildern?
    • Jede Grafik, jedes Icon braucht eine Textalternative, die von Screenreadern vorgelesen wird.
    • Alternativ-Texte bei Bildern vorhanden und sinnvoll?
    • Bei rein dekorativen Bildern: alt="" setzen, damit sie ignoriert werden.
    • Für komplexe Grafiken: längere Beschreibungen in Textform oder über aria-describedby.
  • Einfache SpracheEinfache Sprache Verständliche, klar strukturierte Alltagssprache. Nicht ganz so streng geregelt wie Leichte Sprache.:
    • Verzichte auf Schachtelsätze und unnötigen Jargon. Wer unbedingt einen Fachbegriff benutzt, erklärt ihn kurz.
  • Hoher Farbkontrast:
    • Text muss sich vom Hintergrund abheben (z.B. schwarz auf weiß) – hilft auch bei Farbenblindheit.
    • Kann man deinen Text auch lesen, wenn man nicht 100% Sehkraft hat?
    • Verwende hohe Farbkontraste – mindestens 4,5:1 zwischen Text und Hintergrund (laut WCAG 2.1).
    • Tools wie WebAIM Contrast Checker helfen beim Testen.
  • Tastatur-Navigation:
    • Alles auf der Seite lässt sich per Tab-Taste erreichen – auch Menüs, Modale, Slider?
    • Tab-Reihenfolge logisch?
  • Fokus-Sichtbarkeit:
    • Wenn man mit der Tab-Taste springt, sieht man, welches Element gerade aktiv ist?
    • Auch bei Bildern, Formularfeldern, Navigations-Icons?
  • Lesbare Schrift:
    • Keine verspielten Fonts, sondern klare Schriftschnitte und angenehme Größen.
  • Keine Flacker-Effekte:
    • Blinkende oder zuckende Elemente sind tabu – das kann Nutzer mit Epilepsie gefährden.
  • Untertitel & Transkripte:
    • Videos mit (Live-)Untertiteln versehen.
    • Für komplexe Inhalte ggf. auch AudiodeskriptionAudiodeskription Auch akustische Bildbeschreibung oder Audiokommentierung, ist ein Verfahren, das blinden und sehbehinderten Menschen ermöglichen soll, visuelle Vorgänge besser wahrnehmen zu können. Dabei wird die Handlung mit einem akustischen Kommentar versehen, um sie für das Publikum erfassbar zu machen..
    • Audio ohne visuelle Begleitung: vollständiges Transkript bereitstellen.
    • Videos haben Untertitel, Audios eine Textversion (Transkript) für Gehörlose und Höreingeschränkte. Auch für Nicht-Muttersprachler hilfreich.
  • Responsive und kompatibel:
    • Deine Seite läuft mobil, am Desktop und auf Hilfsgeräten wie Screenreadern.
    • Sind Bedienelemente groß genug (mind. 48x48px)?
    • Zoom auf 200% ohne Layoutbruch möglich?
    • Inhalte auch bei starker Vergrößerung oder Querformat nutzbar?
  • Regelmäßige Tests:
    • Nutze automatische Tools und echte Nutzertests mit Hilfstechnologien.
  • Animationen steuerbar:
    • Animationen können gestoppt oder pausiert werden.
  • Nicht nur Farbe kommuniziert:
    • Informiere nicht nur durch Farbe, sondern auch durch Formen, Icons oder Texthinweise.
  • Linktexte klar und verständlich
    • Sind deine Linktexte aussagekräftig und beschreiben das Ziel des Links?
    • Statt „Hier klicken“ lieber „Mehr über Barrierefreiheit erfahren“.
  • Barrierefreie Formulare:
    • Füllen Menschen mit Screenreadern oder motorischen Einschränkungen dein Formular aus?
    • Jedes Feld ist klar beschriftet, Fehler werden verständlich erklärt.
    • Labels klar zugeordnet (HTML: label for="...")
    • Fehlermeldungen verständlich und zugänglich (nicht nur in roter Schrift!)
    • Platzhalter ≠ Label – niemals nur placeholder statt label nutzen.
  • Struktur und sauberer Code:
    • Valides HTML und ARIA-RollenARIA-Rollen Zusätzliche Infos im HTML, die Screenreadern sagen, was ein Element ist (z. B. „Button“ oder „Navigation“). helfen Browsern und Screenreadern, die Seite korrekt zu verstehen.
    • Nutze Standard-Elemente, wann immer möglich, z.B. <button> statt div mit JavaScript-Click.
    • Strukturelemente wie <section>, Bilder mit <figcaption>, Tabellen mit <thead> und <tfoot>,
    • Überschriften in sinnvoller Reihenfolge und Struktur: <h1> bis <h6>.
  • Barrierefreiheitserklärung:
    • Erkläre auf einer eigenen Unterseite, wie barrierefrei deine Website ist und wie man Support bekommt.