Checkliste: Ist unsere Website barrierefrei?

Wie finden Sie heraus, ob Ihre Website barrierefrei ist?

Für einen ersten Überblick reicht ein Selbstcheck mit den Punkten in dieser Checkliste, nach unserer Erfahrung dauert das rund 30 Minuten. Für ein genaueres Bild ergänzen Sie kostenlose Tools wie einen Kontrast-Checker oder einen kurzen Screenreader-Test. Wenn Sie die Barrierefreiheit belastbar nachweisen müssen, etwa für eine Ausschreibung, führt an einer strukturierten Prüfung nach anerkannter Methode kein Weg vorbei.

Am einfachsten übernimmt diesen ersten Durchgang die Person, die Ihre Website ohnehin redaktionell oder technisch betreut, sie kennt Formulare, Unterseiten und eingebundene Tools am besten und kann Auffälligkeiten direkt einordnen.

Diese Checkliste ergänzt unseren Grundlagenbeitrag zur gesetzlichen Pflicht für soziale Träger, der vier kurze Einstiegstests zeigt. Hier finden Sie die vollständige Prüfliste für die eigene, gründliche Kontrolle.

Welche vier Prinzipien der WCAG prüft die Checkliste?

Die international anerkannten Web Content Accessibility Guidelines (WCAG) ordnen alle Anforderungen vier Prinzipien zu: wahrnehmbar, bedienbar, verständlich und robust. Diese Struktur macht die Prüfung Ihrer Website übersichtlich, weil jeder Bereich eine klare Leitfrage bekommt.

Gehen Sie die vier Bereiche der Reihe nach durch und notieren Sie Auffälligkeiten stichwortartig, das ergibt am Ende eine kurze, priorisierbare Liste statt eines vagen Gesamteindrucks.

Die folgenden vier Abschnitte gehen jedes Prinzip einzeln durch, mit konkreten Prüfpunkten für Websites sozialer Träger.

Wahrnehmbar: Können alle Ihre Inhalte erfassen?

Wahrnehmbarkeit bedeutet, dass Informationen unabhängig davon ankommen, ob jemand sieht, hört oder liest.

• Alt-Texte: Alle Bilder mit Bedeutung haben eine kurze, sinnvolle Textalternative.
• Kontrast: Text zu Hintergrund erreicht nach WCAG mindestens ein Kontrastverhältnis von 4,5 zu 1, große Schrift mindestens 3 zu 1.
• Untertitel: Videos, etwa vom letzten Sommerfest oder aus der Öffentlichkeitsarbeit, haben Untertitel oder ein Transkript.
• Struktur: Überschriften sind als solche ausgezeichnet, nicht nur optisch fett formatiert.

Ein kurzer Blick in den Quellcode oder ein Browser-Plugin für Kontrastmessung reicht meist aus, um die gröbsten Lücken in diesem Bereich zu finden.

Bedienbar: Funktioniert alles ohne Maus?

Bedienbarkeit prüfen Sie am schnellsten, indem Sie die Maus beiseitelegen und ausschließlich mit der Tabulatortaste durch die Website navigieren.

• Tastaturbedienung: Menü, Formulare und Buttons lassen sich vollständig ohne Maus erreichen und auslösen.
• Sichtbarer Fokus: Es ist jederzeit erkennbar, welches Element gerade ausgewählt ist.
• Keine Zeitlimits: Formulare, etwa zur Anmeldung, laufen nicht ungefragt ab, bevor jemand fertig ausgefüllt hat.
• Sprungmarken: Ein „Zum Inhalt springen"-Link erspart es, bei jeder Seite durch die komplette Navigation zu tabben.

Wenn Sie an einer Stelle hängen bleiben und ohne Maus nicht mehr weiterkommen, ist das ein zuverlässiges Zeichen dafür, dass auch Nutzerinnen und Nutzer mit motorischen Einschränkungen dort nicht weiterkommen.

Verständlich: Weiß jeder Besucher und jede Besucherin, was zu tun ist?

Verständlichkeit betrifft Sprache genauso wie Bedienung. Beides sollte ohne Vorwissen nachvollziehbar sein.

• Klare Sprache: kurze Sätze, erklärte Fachbegriffe, wo passend ergänzt durch Leichte Sprache.
• Beschriftete Formularfelder: Jedes Eingabefeld hat ein sichtbares, zugeordnetes Label, nicht nur einen Platzhaltertext.
• Verständliche Fehlermeldungen: Ein Formular benennt konkret, welches Feld fehlt oder falsch ausgefüllt ist.
• Konsistente Navigation: Menü und Struktur bleiben auf allen Seiten gleich aufgebaut.

Lesen Sie zentrale Seiten testweise laut vor oder lassen Sie sie von Mitarbeitenden lesen, die die Website noch nicht kennen, Verständlichkeit fällt im eigenen Team oft weniger auf als bei Außenstehenden.

Robust: Kommen Screenreader mit Ihrem Code klar?

Robustheit heißt, dass verschiedenste Technik, von älteren Browsern bis zu Screenreadern, Ihre Website zuverlässig auslesen kann.

• Valides HTML: sauber verschachtelter Code ohne grobe technische Fehler.
• ARIA nur wo nötig: zusätzliche Auszeichnungen ergänzen semantisches HTML, ersetzen es aber nicht.
• Screenreader-Test: ein kurzer Testlauf mit einem kostenlosen Screenreader wie NVDA unter Windows oder VoiceOver unter macOS und iOS.

Dieser Bereich lässt sich am schwersten ohne technisches Wissen prüfen, ein kurzer Screenreader-Test zeigt aber schon viel: Werden zentrale Inhalte gar nicht oder in wirrer Reihenfolge vorgelesen, braucht der Code technische Nacharbeit.

Welche Stellen auf Träger-Websites fallen am häufigsten durch?

Aus unserer Projektpraxis wiederholen sich bestimmte Problemstellen bei Trägern der Sozialen Arbeit immer wieder.

• Anmeldeformulare: für Kita-Plätze oder Hilfeangebote, oft ohne Labels oder mit Zeitlimit.
• Elternportale: häufig von externen Anbietern eingebunden, mit eigenen, teils schlechteren Standards.
• Spendenformulare: besonders kritisch, weil hier zusätzlich Vertrauen und Zahlungssicherheit eine Rolle spielen.
• PDFs: Konzeptionen, Anmeldebögen oder Jahresberichte, oft eingescannt oder ohne Struktur exportiert.
• Eingebettete Videos: ohne Untertitel oder mit Playern, die sich nicht per Tastatur bedienen lassen.
• Karten: eingebettete Standortkarten ohne Textalternative für die Adresse.

Diese sechs Bereiche haben eines gemeinsam: Sie werden oft nachträglich eingebunden, von externen Anbietern geliefert oder selten aktualisiert, deshalb geraten sie bei der laufenden Pflege der Website leicht aus dem Blick.

Welche kostenlosen Tools helfen, und wo hören sie auf?

Kostenlose Tools sind ein guter Einstieg, ersetzen aber keine vollständige Prüfung, weil sie nur automatisiert auslesbare Fehler erkennen, nicht aber, ob sich eine Website tatsächlich sinnvoll bedienen lässt.

• WAVE: zeigt fehlende Alt-Texte, Kontrastprobleme und Strukturfehler direkt auf der Seite an.
• Lighthouse: in Chrome eingebautes Prüfwerkzeug mit einem groben Barrierefreiheits-Score.
• Kontrast-Checker: prüft einzelne Farbkombinationen gezielt gegen die Kontrastwerte der WCAG.
• Kurzer Screenreader-Test: zeigt, ob sich zentrale Wege wie das Kontaktformular überhaupt vorlesen und bedienen lassen.
• BIK für Alle: ergänzt die technischen Tools um Hintergrundwissen und Selbsttests zu einzelnen Prüfschritten.

Automatische Tools finden nach gängigen Einschätzungen nur einen Teil der tatsächlichen Barrieren, der Rest zeigt sich erst im echten Bedienungstest. Kombinieren Sie deshalb mehrere dieser Werkzeuge, ein einzelnes Tool deckt selten alle vier WCAG-Prinzipien gleich gut ab.

Wann brauchen Sie eine Prüfung durch Fachleute?

Für den eigenen Überblick reicht der Selbstcheck. Sobald Sie Barrierefreiheit jedoch belastbar nachweisen müssen, etwa gegenüber einem Zuwendungsgeber oder in einer Ausschreibung, brauchen Sie eine strukturierte Prüfung, zum Beispiel nach der Methodik des BITV-Tests. Auch wenn Ihre Website mehrere der oben genannten Problemstellen gleichzeitig zeigt, lohnt sich eine fachliche Prüfung, um zu priorisieren, was zuerst behoben wird.

Planen Sie für die Behebung realistische Zeitfenster ein: Kleinere Korrekturen lassen sich oft im laufenden Betrieb erledigen, strukturelle Änderungen an Navigation oder Formularen gehören eher in den nächsten Relaunch.

Beheben Sie zuerst, was den Zugang am stärksten blockiert: Fehlende Tastaturbedienbarkeit und nicht ausgefüllte Formular-Labels verhindern oft die gesamte Nutzung, während einzelne Kontrastfehler sich meist schneller nachbessern lassen. Wie Sie offene Punkte transparent dokumentieren, zeigt unser Beitrag zur Barrierefreiheitserklärung.

Mehr zur praktischen Umsetzung von Barrierefreiheit auf Trägerwebsites finden Sie auf unserer Leistungsseite Barrierefreiheit. Auf Wunsch senden wir Ihnen diese Checkliste auch als Druckversion, sprechen Sie uns dazu einfach über unser Kontaktformular an.