Barrierefreiheit (BFSG / WCAG 2.1 AA) – Checkliste für eure Website
Diese Checkliste fasst die wichtigsten Anforderungen aus WCAG 2.1 Level AA bzw. EN 301 549 praxisnah zusammen – der Maßstab für das Barrierefreiheitsstärkungsgesetz (BFSG, seit 28. Juni 2025). Sie ersetzt kein vollständiges Audit, hilft aber, die größten Hürden systematisch abzuarbeiten. Arbeitet sie der Reihe nach durch und holt euch für die finale Konformität fachkundige Unterstützung.
- 1. Vollständige Tastaturbedienung
Alle Funktionen müssen ohne Maus erreichbar und bedienbar sein – Menüs, Dropdowns, Formulare, Slider, Pop-ups. Die Fokus-Reihenfolge ist logisch, es gibt keine Tastaturfallen, und der Fokus springt nach dem Schließen von Dialogen sinnvoll zurück.
- 2. Sichtbarer Fokus
Das aktuell fokussierte Element ist immer klar erkennbar (deutlicher Rahmen/Outline mit ausreichendem Kontrast). Entfernt niemals den Fokus-Indikator per CSS, ohne einen besseren zu ersetzen.
- 3. Ausreichender Farbkontrast
Normaler Text mindestens 4,5:1, große Schrift (ab ca. 24px bzw. 19px fett) mindestens 3:1. Auch Bedienelemente und Grafiken brauchen genügend Kontrast. Verlasst euch nicht allein auf Farbe, um Bedeutung zu transportieren (z. B. Fehler nicht nur rot markieren).
- 4. Skalierbarkeit & responsives Layout
Inhalte bleiben bis 200 % Zoom nutzbar, ohne dass Text abgeschnitten wird oder horizontales Scrollen nötig wird. Verwendet relative Einheiten und vermeidet feste Pixelhöhen, die Text einsperren.
- 5. Textalternativen für Bilder & Grafiken
Informative Bilder bekommen einen aussagekräftigen Alt-Text, dekorative bleiben leer (alt=""). Icons mit Funktion brauchen ein zugängliches Label. Komplexe Grafiken/Diagramme benötigen eine Textbeschreibung.
- 6. Saubere Struktur & Semantik
Eine sinnvolle Überschriftenhierarchie (genau eine H1, danach H2/H3 in Reihenfolge), echte HTML-Elemente (Buttons, Links, Listen) statt nachgebauter DIVs, klare Landmarks (header, nav, main, footer) und ein Skip-Link zum Inhalt.
- 7. Zugängliche Formulare
Jedes Feld hat ein sichtbares, verknüpftes Label (kein reiner Placeholder). Pflichtfelder sind gekennzeichnet, Fehlermeldungen sind klar, stehen am Feld und werden Screenreadern angekündigt (role="alert"/aria-live). Sinnvolle autocomplete-Attribute erleichtern die Eingabe.
- 8. Multimedia barrierefrei
Videos brauchen Untertitel, Audio ein Transkript; bei rein visuellen Videos eine Audiodeskription oder Alternative. Medien starten nicht automatisch mit Ton und sind pausierbar.
- 9. Bewegung & Zeit im Griff
Automatische Bewegung (Slider, Animationen, Auto-Scroll) ist pausierbar und respektiert die Systemeinstellung „Bewegung reduzieren". Es gibt keine blitzenden Inhalte (Epilepsie-Risiko) und keine knappen Zeitlimits ohne Verlängerungsmöglichkeit.
- 10. Verständlichkeit & Konsistenz
Klare, einfache Sprache; die Seitensprache ist im HTML gesetzt (lang). Navigation und Bedienelemente sind seitenübergreifend konsistent. Wichtige Hinweise sind nicht nur als Bild-Text versteckt.
- 11. Mit echten Hilfsmitteln testen
Automatisierte Tools (z. B. axe-core, Lighthouse) finden nur einen Teil der Probleme. Prüft zusätzlich manuell: komplette Tastatur-Bedienung und ein Durchlauf mit einem Screenreader (z. B. VoiceOver, NVDA).
- 12. Barrierefreiheitserklärung veröffentlichen
Stellt eine Erklärung bereit mit Konformitätsstatus, bekannten Einschränkungen, dem zugrunde gelegten Standard und einem Feedback-/Kontaktweg für Barrieren-Meldungen. Datiert sie und haltet sie aktuell.
Nächste Schritte: Beginnt mit einem Audit, behebt die Punkte mit der größten Wirkung zuerst (Tastatur, Kontrast, Formulare, Struktur) und veröffentlicht eine Barrierefreiheitserklärung. Unsicher, ob ihr betroffen seid oder wo ihr steht? Schreibt uns an info@rocket-monkeys.com für ein unverbindliches Erstgespräch.
⚠️ Wichtiger Hinweis: Dieser Inhalt dient der allgemeinen Information und ist keine Rechtsberatung. Die konkrete Betroffenheit und die nötigen Maßnahmen hängen vom Einzelfall ab. Für eine verbindliche rechtliche Einordnung wendet euch an eine fachkundige Beratung.