Barrierefreie Website Checkliste

Lesezeit: 8 Minuten
Ist Deine Webseite barrierefrei? Diese Frage wird man in dem Jahr 2025 noch oft hören. Besonders am 28.06.2025 denn da tritt das Barrierefreiheitsstärkungsgesetz ( BFSG ) in Kraft und verändert die Web-Welt, wie wir sie kennen, maßgeblich für uns alle.
Viele Menschen nutzen täglich das Internet. Doch nicht jede Webseite ist barrierefrei und dadurch für jeden einfach zu nutzen. Eine barrierefreie Website und das barrierefreie Design sorgen dafür, dass alle Deine Besucher Deine Webseite einfach und angenehm besuchen können. Egal, ob sie eine Beeinträchtigung haben oder nicht. Eine barrierefreie Website zeigt zudem, dass Du als Unternehmen offen und inklusiv bist. Außerdem wird die Barrierefreiheit ab 2025 für viele Websites gesetzlich vorgeschrieben. Wie kannst Du aber prüfen, ob deine Website barrierefrei ist? Unsere umfassende Barrierefreie Website Checkliste hilft dir dabei!
Warum ist Barrierefreiheit wichtig?
Eine barrierefreie Website ermöglicht es allen Menschen, problemlos auf Informationen und Funktionen im Internet zuzugreifen. Davon profitieren nicht nur Menschen mit Beeinträchtigungen, sondern alle Deine Besucher. Du erreichst dadurch mehr Menschen, verbesserst dein Ranking bei Google und zeigst, dass du soziale Verantwortung übernimmst.
Was bedeutet eine barrierefreie Website?
Eine barrierefreie Webseite mit barrierefreiem Design bedeutet, dass eine Webseite so gestaltet ist, dass sie von allen Menschen problemlos genutzt werden kann. Dabei spielen eine klare Struktur, einfache Bedienbarkeit und hohe Benutzerfreundlichkeit eine wichtige Rolle. Die barrierefreie Website berücksichtigt unterschiedliche Einschränkungen, etwa Sehbehinderungen, Hörbeeinträchtigungen oder motorische Einschränkungen.
Muss Deine Webseite barrierefrei sein?
Mach hier den Test.
Vorteile einer barrierefreien Website
Eine barrierefreie Webseite hat viele Vorteile für den Nutzer.
Folgend diese in Kürze aufgelistet für die schnelle Argumentation:
- Mehr Nutzer erreichen
- Verbesserte Usability
- Besseres Ranking bei Google
- Positive Markenwahrnehmung
Doch wie wird Deine Webseite barrierefrei?
Das erfährst Du ausführlich durch unsere barrierefreie Website Checkliste.
Barrierefreie Website Checkliste
Gestaltung
- Informationen sollten nicht ausschließlich durch Farben vermittelt werden, sondern immer auch durch Text oder Symbole.
- Stelle sicher, dass das Kontrastverhältnis von Texten mindestens 4,5:1 beträgt (Level AA). Für optimale Lesbarkeit wird ein Verhältnis von 7:1 (Level AAA) empfohlen.
- Verwende links- oder rechtsbündigen Flattersatz statt Blocksatz.
- Die Zeilen sollten nicht länger als 80 Zeichen sein.
- Der Zeilenabstand sollte mindestens 1,5‑fach sein, ebenso der Absatzabstand.
Sprache
- Kennzeichne die Sprache der Website deutlich im HTML-Code (
<html lang="de">
). - Biete zusätzlich Versionen in leichter Sprache an, besonders wenn dein Inhalt komplex ist.
- Fachbegriffe, Abkürzungen und spezielle Ausdrücke sollten verständlich erklärt werden, idealerweise mit Glossaren oder direkt im Text.
Seitenstruktur
- Strukturiere den HTML-Code logisch, sodass Screenreader den Inhalt richtig wiedergeben können.
- Überschriften sollten klar sein und den HTML-Elementen h1, h2, h3 usw. entsprechen.
- Inhalte wie Listen, Zitate und Tabellen sollten im HTML-Code entsprechend korrekt formatiert sein.
- Deine Website sollte vergrößerbar sein, idealerweise bis zu 200 %, ohne dass die Bedienbarkeit oder Lesbarkeit verloren geht.
- Prüfe regelmäßig, ob dein HTML-Code fehlerfrei und standardkonform ist.
Multimedia und Interaktive Inhalte barrierefrei gestalten
Bilder und Grafiken
- Jedes Bild sollte einen Alternativtext (ALT-Attribut) besitzen, damit Screenreader diese Informationen vorlesen können.
- Dekorative Bilder sollten kein ALT-Attribut besitzen oder per CSS eingebunden werden, sodass Screenreader diese ignorieren.
- Nutze echte Texte statt Schriftgrafiken, Logos ausgenommen.
Audiovisuelle Inhalte
- Stelle Transkripte für Audios wie Podcasts zur Verfügung.
- Videos und Live-Übertragungen sollten Untertitel haben.
- Biete Audiobeschreibungen für Videos an, wenn Inhalte rein visuell dargestellt werden.
Automatische Inhalte
- Inhalte, die automatisch abgespielt werden (z.B. Videos, Animationen), sollten von Nutzern gestoppt oder pausiert werden können.
- Inhalte, die automatisch aktualisiert werden (z.B. Newsticker oder Chats), sollten pausierbar sein.
- Vermeide automatische Wiedergaben oder ermögliche Nutzern eine einfache Kontrolle darüber.
Formulare barrierefrei gestalten
Übersichtlicher Aufbau
- Verknüpfe Formularfelder eindeutig mit passenden Beschriftungen (
<label>
). - Gruppiere mehrteilige Formulare übersichtlich mit (
<fieldset>
). - Vermeide Platzhalter-Texte als alleinige Beschriftung.
Einfache und barrierefreie Nutzung
- Verzichte auf komplizierte Captchas oder biete barrierefreie Alternativen an.
- Sorge dafür, dass Formulareingaben bei Unterbrechungen nicht verloren gehen.
- Warne deine Nutzer rechtzeitig vor Datenverlust durch Sitzungsunterbrechungen.
Hilfestellungen bei Eingabefehlern
- Fehlermeldungen sollten klar und hilfreich formuliert sein.
- Biete Hilfen an, wie Nutzer ihre Fehler korrigieren können.
- Prüfe Eingaben auf rechtliche oder finanzielle Konsequenzen und ermögliche eine Bestätigung vor dem Absenden.
Navigation und Bedienbarkeit
- Stelle eine einheitliche Navigation auf allen Seiten sicher.
- Ergänze deine Webseite durch eine Suchfunktion oder ein Inhaltsverzeichnis.
- Formuliere Anweisungen eindeutig, ohne auf visuelle Merkmale wie Farben oder Formen zurückzugreifen.
- Prüfe, ob alle Funktionen und Links über die Tastatur zugänglich sind und logisch sortiert erscheinen.
Technische Anforderungen
- Nutze ausschließlich barrierefreie Plugins und Themes für dein Content-Management-System.
- Dynamische Inhalte (Slider, Pop-ups, Animationen) sollten steuerbar und barrierefrei gestaltet sein.
- Deine Inhalte sollten skalierbar und bis zu 200 % vergrößerbar bleiben.
Praxisempfehlungen und kontinuierliche Verbesserung
- Sensibilisiere dein Team regelmäßig für das Thema Barrierefreiheit durch Schulungen.
- Führe regelmäßige Tests und Audits durch, um praktische Barrieren zu erkennen und zu beheben.
- Dokumentiere deine Fortschritte bei der Barrierefreiheit, um Transparenz und ständige Verbesserungen sicherzustellen.
Regelmäßige Prüfungen und Feedback
Barrierefreiheit ist ein laufender Prozess. Prüfe regelmäßig:
- Technische Tests mit Tools wie WAVE, Contrast Checker und Screenreadern.
- Manuelle Prüfungen durch Menschen mit Behinderungen.
- Hole dir aktives Feedback von deinen Nutzern und setze dieses um.
Barrierefreiheit Tools
Erweiterungen für Deinen Browser
Brauchst Du einen schnellen Check?
Diese Browser-Erweiterungen unterstützen Dich in der schnellen Analyse:
- Der WCAG Contrast Checker für Firefox, Chrome und Edge.
- Accessibility Insights for Web ist eine Browser-Erweiterung (Chrome, Edge) von Microsoft, die bspw. sehr anschaulich die Fokus-Reihenfolge (und damit verbundene Fehler) auf bestehenden Webseiten visualisiert.
Kommerzielle Test-Browser
Der kostenpflichtige Test-Browser Polypane bietet ein Testing der Barrierefreiheit an.
Es ist möglich, eine angepasste Testumgebung für solche Tests zu erstellen.
Online-Tools
- Contrast Tools – WCAG 2 + WCAG 3 (APCA) Kontrast Tests
- Contrast Checker aus dem Hause webAIM, das auch das Tool Wave anbietet.
- Contrast Grid – Erzeugt ein Raster mit Kombinationen aller angelegten Farben. Es ist auf einen Blick ersichtlich, welche Kombinationen erlaubt sind.
- Die Seite »Color Contrast Tools« führt noch weitere Tools im Dutzend auf, sodass für jede*n etwas dabei sein sollte.
Fazit
Barrierefreies Design und eine barrierefreie Website bieten dir viele Vorteile, wie mehr Nutzer, bessere Suchmaschinenrankings und eine inklusive Nutzererfahrung. Nutze diese umfassende Checkliste regelmäßig, um Barrierefreiheit zu einem festen Bestandteil deiner digitalen Strategie zu machen. Starte noch heute und trage aktiv dazu bei, das Internet für alle Menschen zugänglich und angenehm nutzbar zu gestalten!
Nun steht Deiner barrierefreien Webseite nichts mehr im Weg!
Hier geht es außerdem weiter zu barrierefreien Apps. Diese sind nämlich vom BFSG auch nicht ausgenommen.
Hast Du Fragen zum BFSG?
Oder willst Du Deine Webseite analysieren lassen?
12. März | 09:18 Uhr | BFSG, Digitalisierung