Barrierefreie Website Checkliste: So machst du deine Seite fit für 2025

Für wen gilt das Barrierefreiheitsstärkungsgesetz eigentlich?

Gute Frage – denn nicht jede Website ist betroffen.
Hier kommt die Kurzfassung:

✅ Ja, du bist betroffen, wenn du…

• eine Website oder einen Online-Shop für Endkund:innen (B2C) betreibst
• mehr als 10 Mitarbeiter:innen hast oder mehr als 2 Mio. Umsatz/Bilanzsumme machst
• digitale Dienstleistungen anbietest (z. B. Buchung, Anmeldung, Zahlung)

❌ Du bist (noch) nicht betroffen, wenn…

• dein Business zu den Kleinstunternehmen gehört
• du eine rein private oder rein B2B-Website betreibst
• deine Inhalte vor dem 28. Juni 2025 veröffentlicht wurden (und nicht interaktiv sind)

📌 Wichtig: Auch wenn du nicht gesetzlich verpflichtet bist – barrierefreie Websites verbessern immer die Nutzererfahrung und Sichtbarkeit bei Google. Und hey: Inklusion ist immer eine gute Idee 💛

Checkliste für eine barrierefreie Website

1. Textalternativen für Bilder und Multimedia

• Alternativtexte für Bilder und Grafiken: Prüfe ob du alt-tags hinzugefügt bzw. ob du sie in deinem Website Builder ausgefüllt hast
• Untertitel und Transkripte für Videos und Audios: Falls du Videos verwendest, prüfe ob du Untertitel hinzugefügt hast.

Warum wichtig: Screenreader brauchen Alternativtexte, um Bilder verständlich zu machen. Ohne „alt“-Text = unsichtbar für blinde Nutzer:innen.

So kannnst du die alt-Tags Prüfen:

• In deinem Website Builder in dem jeweiligen Bild
• Rechte Maustaste auf das Bild → „Untersuchen“ (Chrome) → Im Element Code das alt-tag suchen
• Eine Browser Erweiterung wie axe Dev Tools oder ACR Toolkit nutzen und den Scan laufen lassen. Damit siehst du allle Fehler die du auf deiner Website verbessern kannst
• Alternativ: Screenreader-Test oder Tool nutzen

Weitere Tools:

WAVE Web Accessibility Tool

2. Verständliche Sprache

Benutze keine Fachausdrücke und schreibe kurze Sätze. Verwende einfache Wörter.

Warum das wichtig ist – Viele Menschen verstehen einfache Sprache besser. Das gilt zum Beispiel für Menschen, die Schwierigkeiten beim Denken haben oder nicht gut lesen können.

So überprüfst du das:

• Lies dir deine Texte durch. Sind deine Texte einfach geschrieben? Hast du lange verschachtelte Sätze?
• Nutze einen Online-Test für Lesbarkeitsindex: Du kannst zum Beispiel das Tool wortliga.de verwenden und deine Texte auf Leichte Sprache prüfen und direkt verbessern lassen. Ich habe für diesen Satz das Tool verwendet:

3. Kontrastreiche Farbgestaltung

• Hoher Kontrast zwischen Text und Hintergrund: Prüfe ob dein Farbkontrast immer ausreichend ist
• Keine alleinige Informationsvermittlung durch Farbe: Versuche immer auch einen Text hinzuzufügen. Zum Beispiel wenn du eine Warnung hast oder wichtigen Text – Mache dies auch schriftlich klar.

Warum wichtig: Menschen mit Sehbehinderungen oder Farbfehlsichtigkeit brauchen klaren Kontrast, um Inhalte zu erkennen.

So testest du’s:

Kontrast zwischen Text und Hintergrund prüfen (Ziel: mindestens 4.5:1)

Tool zum Testen:

WebAIM Contrast Checker: Du kannst hier direkt den Kontrast prüfen, den Score sehen und auch ob der Test bestanden oder nicht bestanden ist

 

4. Struktur und Organisation

• Überschriftenhierarchie (semantisch korrekt mit HTML-Tags): Prüfe ob deine H-Tags Struktur stimmig ist, das heisst H1 kommt zuerst und darunter H2, dann H3. Vermeide Sprünge wie zuerst H1 und dann H5.
• Logische Gliederung der Inhalte

Warum wichtig: Viele Menschen können keine Maus nutzen (z. B. motorische Einschränkungen).

Tool zum Testen: Auch hier zeigen dir die Browser Erweiterungen die Fehler an.

5. Tastatur-Bedienbarkeit

Prüfe deine Website ob du sie auch ohne Maus bedienen kannst.

Warum wichtig: Viele Menschen können keine Maus nutzen (z. B. motorische Einschränkungen).

So testest du’s:

• Mit der Tabulator-Taste und Pfeiltasten durch die Seite navigieren
• Achte darauf, ob alle Elemente erreichbar und der Fokus sichtbar ist, der Fokus ist ein Rechteck das sich um die Felder oder Links legt, um dir zu zeigen, wo du dich auf der Webseite gerade befindest

Tools:

Kein Tool nötig – nur Tastatur! Verwende die Tab-Taste zum herunternavigieren und Shift+Tab um heraufzunavigieren.

Für Analyse: axe DevTools → zeigt Fokusprobleme

6. Lesbare Schriftarten

• Gut lesbare, ausreichend große Schrift
• Verzicht auf ausgefallene oder verschnörkelte Fonts

Warum wichtig: Verschnörkelte oder zu kleine Schriften machen Texte schwer lesbar – besonders für Menschen mit Sehschwächen oder Leseschwierigkeiten.

So testest du’s:

Lies den Text auf dem Handy – ohne zu zoomen!

Achte auf Mindestgröße: 16px + klare Schriftarten wie Open Sans, Roboto, Lato etc.

Tools:

Browser-Zoom-Test (auf 150 % stellen): mit command + „+“ auf dem Mac oder Strg+ „+“ auf Windows

7. Vermeidung von Flackern und Blinken

• Keine animierten oder blinkenden Elemente, die zu Problemen führen können

Warum wichtig: Blinkende oder flackernde Elemente können epileptische Anfälle auslösen oder extrem ablenken.

So testest du’s:

• Schau dir animierte Inhalte kritisch an: Ist alles ruhig genug?

• Wenn du Animationen auf deiner Website hast, dann gebe dem user die Möglichkeit diese auszuschalten. (Siehe Telekom Seite. )
• Wenn du Animationen programmierst kannst du „prefers-reduced-motion“ prüfen, damit die Animation erst gar nicht startet. In den Developer Tools kannst du „prefers-reduced-motion“ simulieren.

8. Barrierefreie Formulare

Das ist leider insgesamt sehr technisch und betrifft vor allem den HTML Code des Formulars:

• Hilfetexte und Hinweise mit aria-describedby, z. B. bei E-Mail-Feldern
• Beschriftungen mit , die eindeutig mit den Feldern verknüpft sind
• Fehlermeldungen, die sichtbar UND vorgelesen werden (per aria-live)
• Logische Tab-Reihenfolge, keine versteckten Felder

Warum wichtig: Formulare müssen mit Screenreadern nutzbar sein. Ohne Labels oder klare Fehlermeldungen kann man sie nicht bedienen.

So testest du’s:

Wenn du mit dem Screenreader testest: Tab durch dein Formular – wird alles angesagt?

Absichtlich fehlerhafte Eingaben machen – sind die Fehlermeldungen verständlich?

Tools:

ARC Toolkit oder axeDevTools Browser Erweiterung  → zeigt Label-Probleme und erkennt fehlende Beschriftungen

 

9. Geräteunabhängigkeit und Responsivität

Funktion auf verschiedenen Geräten und Screenreadern
Warum wichtig: Eine barrierefreie Website muss auf allen Geräten + Screenreadern funktionieren.

So testest du’s:

Öffne die Website auf Handy, Tablet, Desktop

Test mit Bildschirmleseprogrammen wie NVDA oder VoiceOver

Windows Nutzer: Screenreader NVDA (kostenlos)

Mac Nutzer: VoiceOver auf DEsktop öffnen mit Command + „F5“ zu aktivieren (integriert im MAC)

Mobile Geräte (Iphone + Android): Gehe zu Einstellungen und Bedienungshilfen, dort gibt es die Option VoiceOver

10. Regelmäßiges Testen

• Nutzung von Tools und Checklisten zur Überprüfung
• Einbindung von Nutzerfeedback ich hätte gerne für jeden Punkt weitere Erläuterungen und wie man das Testen kann bzw mit welchem Tool

Warum wichtig: Accessibility ist kein Einmal-Projekt, sondern ein Prozess.

So testest du’s:

• Wiederholte Tests mit verschiedenen Tools
• Feedback von echten Nutzer:innen einholen (z. B. Sehbehinderte)
• Verwende Tools zum Überprüfen der Barrierefreiheit wie die Browser Erweiterungen und die anderen Tools wie oben erwähnt.