Barrierefreie Website Checkliste: 25 Schritte zur BITV 2.0

Bereite Deine Website optimal auf die BFSG / BITV 2.0 vor: Entdecke die 25-Schritte-Checkliste für barrierefreie Websites, um den Anforderungen gerecht zu werden.

Einführung

Die Barrierefreiheit Deiner Website ist nicht nur gesetzlich vorgeschrieben, sondern auch ein Zeichen von Inklusion und Benutzerfreundlichkeit.

Damit Du den Anforderungen gerecht wirst, habe ich eine umfassende 25-Schritte-Checkliste erstellt, die Dir hilft, Deine Website barrierefrei zu gestalten und BFSG-konform zu machen.

Falls Du diese Liste direkt in Form einer Tabelle genießen willst, hier habe ich sie in Google Sheets für Dich erstellt.

Wenn Du wissen willst, wie Barrierefreiheit funktioniert, dann schau Dir meinen Artikel an:

Barrierefreie Website Pflicht: Das sollst Du bis 2025 wissen!

Und jetzt das Wichtigste – die Checkliste.

Die 25-Schritte-Checkliste zur barrierefreien Website

Webseitenstruktur und Layout

1. Eindeutige Seitentitel: Stelle sicher, dass jede Seite einen einzigartigen und aussagekräftigen Titel hat.
   • Tipp: Überprüfe Deine Seitentitel mit einem SEO-Tool wie SEMrush, um sicherzustellen, dass sie aussagekräftig und einzigartig sind.
2. Kontrastverhältnis: Achte auf ein ausreichendes Kontrastverhältnis zwischen Text und Hintergrundfarben (mind. 4,5:1).
   • Tipp: Verwende Tools wie den „Contrast Checker“ von WebAIM, um das Kontrastverhältnis zu testen.
3. Abschnittsüberschriften: Strukturiere Deinen Inhalt klar mit Überschriften (H1, H2, H3 etc.).
   • Tipp: Nutze Browser-Plug-ins wie „HeadingsMap„, um die Hierarchie der Überschriften auf Deiner Seite zu überprüfen.
4. Farbgebrauch: Farben sollten nicht allein zur Informationsübermittlung oder zur Kennzeichnung von Aktionen verwendet werden.
   • Tipp: Teste Deine Website in Graustufen, um sicherzustellen, dass sie auch ohne Farbindikatoren verständlich ist. Nutze dafür dieses Plug-in.
5. Zeitbegrenzungen: Inhalte sollten keine Zeitbegrenzung haben, um allen Nutzern ausreichend Zeit zur Nutzung zu geben.
   • Tipp: Wenn Zeitlimits unvermeidbar sind, biete eine Option zur Verlängerung der Zeit an.

Bilder

6. Alt-Text für Bilder: Jedes Bild sollte eine genaue Beschreibung im Alt-Text haben.
   • Tipp: Überprüfe Alt-Texte regelmäßig und sorge dafür, dass sie den Bildinhalt präzise beschreiben. Mehr dazu findest Du in meinem Artikel hier.
7. Vermeidung von Text-Only-Bildern: Nutze keine Bilder, die ausschließlich Text enthalten.
   • Tipp: Wenn Text-Bilder unvermeidlich sind, sorge dafür, dass der Text auch im HTML vorhanden ist. So sicherst Du Dir auch den SEO-Vorteil.
8. Tabellenbeschreibung: Tabellen sollten einen beschreibenden Alt-Text enthalten, der den Inhalt oder die Daten erklärt.
   • Tipp: Verwende für komplexe Tabellen detaillierte Beschreibungen, die in einem separaten Dokument verlinkt werden.

Videos und Medien

9. Transkripte: Für alle Audio- und Videoinhalte sollten schriftliche Transkripte verfügbar sein.
   • Tipp: Erstelle Transkripte mithilfe von Tools wie Otter.ai oder lasse sie manuell erstellen und überprüfe sie auf Genauigkeit.
10. Untertitel: Alle Videos (einschließlich Livestreams) müssen mit Untertiteln versehen sein.
    • Tipp: Nutze Plattformen wie YouTube oder Vimeo, die automatische Untertitel anbieten, und korrigiere diese manuell.
11. Kontrolle über Medieninhalte: Medieninhalte sollten pausierbar sein. Der Nutzer muss die Kontrolle haben können.
    • Tipp: Implementiere eine klare Steuerung für alle Medieninhalte, damit Nutzer diese bei Bedarf starten und stoppen können.

Animationen

12. Keine schnellen Blitzeffekte: Der Inhalt darf nicht mehr als dreimal pro Sekunde blinken oder blitzen, um Nutzer mit lichtempfindlicher Epilepsie zu schützen.
    • Tipp: Überprüfe alle Animationen und Effekte mit Tools wie Photosensitive Epilepsy Analysis Tool (PEAT).
13. Stoppfunktion für Animationen: Nutzer sollten in der Lage sein, blinkende oder flackernde Inhalte zu stoppen.
    • Tipp: Implementiere eine Stopp- oder Pausenfunktion für alle Daueranimationen, wie bei den Medieninhalten.

Navigation

14. Einheitliche Kopfzeilen-Navigation: Alle Seiten sollten dieselbe Kopfzeilen-Navigation aufweisen, um Konsistenz zu gewährleisten.
    • Tipp: Stelle sicher, dass die Navigation auf jeder Seite identisch ist und überprüfe dies mit Benutzer-Tests.
15. Breadcrumb-Navigation: Implementiere eine Brotkrumen-Navigation, um den Nutzerweg nachvollziehbar zu machen.
    • Tipp: Nutze Breadcrumbs vor allem auf großen Websites, um die Orientierung zu erleichtern.
16. Klarer Seitenaufbau: Alle Bereiche der Website sollten über Tastaturnavigation erreichbar sein.
    • Tipp: Teste die vollständige Website-Navigation nur mit der Tastatur, ohne Maus. Drucke einfach die Tab-Taste und schau, ob Du dort ankommst, wo Du hinwolltest.
17. Dropdown-Funktionalität: Dropdown-Menüs müssen auch mit der Tastatur zugänglich sein.
    • Tipp: Verwende ARIA-Attribute und semantisches HTML, um sicherzustellen, dass Menüs korrekt als solche erkannt werden.
18. Keine Tastaturfallen: Vermeide Sackgassen, aus denen Nutzer nicht mit der Tastatur herausnavigieren können.
    • Tipp: Führe Usability-Tests durch, um sicherzustellen, dass alle interaktiven Elemente zugänglich sind.

Texte

19. Manuelle Vergrößerung: Der Text muss sich um 200 % vergrößern lassen, ohne an Funktionalität zu verlieren.
    • Tipp: Teste die Skalierbarkeit des Textes auf verschiedenen Geräten und Browsern.
20. Kontrast bei kleinem Text: Stelle sicher, dass kleiner Text ein Kontrastverhältnis von mindestens 4,5:1 aufweist.
    • Tipp: Verwende den WAVE Accessibility Tool, um Kontrastprobleme zu identifizieren.
21. Kontrast bei großem Text: Für größeren Text ist ein Kontrastverhältnis von mindestens 3:1 erforderlich.
    • Tipp: Gleiche den Kontrast entsprechend der Textgröße an, um Lesbarkeit zu gewährleisten.

Sonstiges

22. Inhalte mehrfach zugänglich: Inhalte sollten auf verschiedene Weise zugänglich sein, ohne dass Informationen verloren gehen.
    • Tipp: Biete alternative Textversionen oder Beschreibungen für komplexe Inhalte an.
23. Klarer Linktext: Links sollten klare und handlungsorientierte Texte haben, anstatt vager Bezeichnungen wie „hier klicken“.
    • Tipp: Überarbeite alle Linktexte, um sicherzustellen, dass sie den Zielinhalt eindeutig beschreiben.
24. Barrierefreiheitserklärung: Eine dokumentierte Barrierefreiheitserklärung sollte auf der Website verlinkt sein.
    • Tipp: Verlinke die Barrierefreiheitserklärung im Footer und aktualisiere sie regelmäßig.
25. Meldemöglichkeit für Barrieren: Nutzer sollten eine einfache Möglichkeit haben, Barrieren auf der Website zu melden.
    • Tipp: Integriere ein leicht zugängliches Feedback-Formular auf jeder Seite.

Fazit

Die Barrierefreiheit Deiner Website ist mehr als nur eine gesetzliche Anforderung – sie ist ein wesentlicher Bestandteil eines inklusiven und benutzerfreundlichen Webauftritts.

Mit dieser 25-Schritte-Checkliste hast Du nun einen umfassenden Leitfaden, um sicherzustellen, dass Deine Website für alle Nutzer zugänglich ist.

Doch Barrierefreiheit ist ein kontinuierlicher Prozess, der Nutzertests und sonstige laufende Maßnahmen erfordert.

Wenn Du tiefer in das Thema eintauchen oder eine individuelle Beratung benötigst, stehe ich Dir gerne zur Verfügung.

Buche ein 1:1-Beratungsgespräch mit mir, und wir erarbeiten gemeinsam eine maßgeschneiderte Strategie für Deine barrierefreie Website und mehr.

Häufig gestellte Fragen

Wie gestalte ich meine Website barrierefrei?

Um Deine Website barrierefrei zu gestalten, achte auf eine klare Struktur mit verständlichen Überschriften und gutem Kontrast zwischen Text und Hintergrund. Verseh alle Bilder mit beschreibenden Alt-Texten und stelle sicher, dass die Seite per Tastatur navigierbar ist. Formulare sollten gut beschriftet und einfach auszufüllen sein. Biete für Multimedia-Inhalte Untertitel oder Transkripte an und vermeide blinkende Inhalte. Teste die Barrierefreiheit regelmäßig mit Tools und durch Usability-Tests, um sicherzustellen, dass Deine Website für alle Nutzer zugänglich ist.

Wann ist eine Website barrierefrei?

Eine Website ist barrierefrei, wenn sie laut BITV 2.0 für alle Nutzer zugänglich und nutzbar ist. Dies bedeutet, dass sie klare Strukturen, ausreichenden Kontrast und Alt-Texte für Bilder bietet, vollständig per Tastatur navigierbar ist und verständliche, gut strukturierte Inhalte hat. Zudem muss sie auf verschiedenen Geräten und mit assistiven Technologien funktionieren. Untertitel für Multimedia-Inhalte sowie die Vermeidung von blinkenden Elementen sind ebenfalls erforderlich. Regelmäßige Tests stellen sicher, dass die Barrierefreiheit kontinuierlich gewährleistet bleibt.

Wie testet man, ob eine Website oder Anwendung barrierefrei ist?

Verwende Screenreader, Tastaturnavigationstests und automatisierte Prüfwerkzeuge, um die Barrierefreiheit zu überprüfen.

Wer ist zur Erstellung barrierefreier Websites verpflichtet?

Ab dem 28. Juni 2025 werden alle öffentlichen Stellen und private Unternehmen zur Barrierefreiheit ihrer digitalen Angebote nach BFSG verpflichtet.