Du möchtest Deine Website auf Barrierefreiheit testen? Super! Denn in diesem Artikel lernst Du, wie Du eine Website manuell und ohne eine Agentur oder eine zertifizierte Person auf Barrierefreiheit testen kannst. Ganz im Sinne der Barrierefreiheit wollen wir die Hürden für das Testen so niedrig wie möglich halten. Also, los geht’s!
Deshalb solltest Du Deine Website testen
Barrierefreiheit im Web war lange ein Randthema, auch für uns. Heute blicken wir etwas schuldbewusst auf diese Zeit zurück. Ob es Dir auch so geht, spielt eigentlich keine Rolle. Denn so oder so, ab Juni 2025 ist die digitale Barrierefreiheit eine Anforderung des Gesetzgebers. Bei Interesse empfehlen wir Dir unsere Beiträge zu Barrierefreiheits-Gesetze im Überblick und das Barrierefreiheitsstärkungsgesetz (BFSG).
Abgesehen von der Barrierefreiheit-Pflicht bringt Dir die eine barrierefreie Website aber auch einige wirtschaftliche Vorteile. Sie erschließt neue Zielgruppen, verbessert das Nutzererlebnis auch für ältere Menschen und Menschen mit temporären Einschränkungen durch Operationen und Verletzungen. Mehr als genug Gründe also, um die Website auf Barrierefreiheit zu testen.
Niemand leidet unter einer barrierefreien Website, es gibt für alle User nur Vorteile.
Wann ist eine Website barrierefrei?
Die kurze Antwort: Eigentlich nie und in Wahrheit kommt es auf jeden Einzelfall an. Es wird immer Situationen geben, die zu einer Barriere auf Deiner Website führen. Konzentriere Dich deshalb auf grundlegende Barrieren und das Ziel, die Website barrierearm zu bekommen.
Den minimalen Anspruch an eine barrierefreie Website definieren verschiedene nationale und internationale Richtlinien. Orientieren solltest Du Dich an der europäischen Norm 301 549. Etwas greifbarer sind für Dich vermutlich die Web Content Accessibility Guidelines (WCAG) in der Version 2.2 sowie die BITV 2.0.
Wer sollte eine Website auf Barrierefreiheit testen?
In einer perfekten Welt machen das die Website-Verantwortlichen aus Redaktion, Marketing und Webentwicklung. Leider ist das bloßes Wunschdenken. Deshalb gibt es zertifizierte Einzelpersonen und Agenturen, die für solche Barrierefreiheit-Tests von Websites oder Apps herangezogen werden.
Das alles lässt sich sogar zertifizieren. Gesetzlich vorgeschrieben ist das aber nicht. Der Weg zur barrierefreien Website bleibt Dir überlassen. Genau deshalb haben wir diesen Artikel erstellt. Denn wir glauben, viele können die eine selbst Website auf Barrierefreiheit testen.
3 Phasen eines Barrierefreiheit-Tests für Websites
Ein systematischer und von allen Beteiligten gelebter Ansatz zur Überprüfung der Barrierefreiheit stellt sicher, dass alle Aspekte eines professionellen Testablaufs abgedeckt werden.
Phase 1: Die Planung
Relevante Kriterien definieren
Zunächst sollten konkrete Ziele und Kriterien definiert werden, die für Deine Tests auf Barrierefreiheit einer Website gelten. Halte Dich an vorgefertigte Listen wie die WCAG-Richtlinien. Persönlich nutze ich dafür gerne die Prüfschritte des BIK oder neuere Formate wie unser ZeBa-Google-Sheet inklusive internationaler WCAG- und deutscher BITV-Kriterien. Außerdem solltest Du alle Kriterien mindestens gegen die WCAG-Konformitätsstufen AA testen. Dieses mittlere AA-Anforderungslevel wird vom Gesetzgeber als Barrierefreiheit-Standard interpretiert.
Zu testende Seiten identifizieren
In keinem Website-Barrierefreiheit-Test wird wirklich jede einzelne Seite geprüft, auch nicht in offizielleren und beauftragten Tests. Das ist aber auch nicht nötig, weil jede Website aus den immer gleichen Bausteinen besteht. Ein Kontaktformular zum Beispiel wird einmal gebaut und dann auf vielen Webseiten implementiert.
Konzentriere Dich bei Deiner Seitenauswahl deshalb auf die für Deinen Webauftritt typischen Webseiten und Templates. Achte darauf, dass Bausteine Deiner Website in den Test einfließen. Hast Du einen E-Commerce-Shop, sollte der komplette Verkaufsprozess in Deinem Test enthalten sein. Zum Beispiel von der Produkt- und Produktkategorie-Seite bis hin zur Dankeseite nach dem Kaufabschluss. Auch das Thema Widerruf, Kündigung oder E-Mail-Verkehr inklusive PDF sollten auf Barrierefreiheit getestet werden.
Behalte im Hinterkopf, dass der Gesetzgeber die digitale Barrierefreiheit als ein Verbraucherschutzthema einstuft. Er möchte also, dass das Kaufen und Stornieren genauso einfach sind wie das Informieren.
Auswahl der Testmethoden und Tools
Entscheide Dich für die geeigneten Testmethoden. Du musst wissen, ob Du manuelle oder automatisierte Website-Tests durchführen möchtest beziehungsweise kannst. Unsere Empfehlung: Kombiniere beides. Wie das geht, erklären wir Dir Schritt für Schritt. Idealerweise beteiligst Du sogar Menschen mit Behinderungen an den Barrierefreiheit-Tests.
Phase 2: Die Durchführung des Tests
Vorgehensweise
Im Prinzip ist die Durchführung recht simpel. Sie kann zugegebenermaßen aber anstrengend sein. Meiner Erfahrung nach ist es am einfachsten, wenn Du jede der in Phase 1 identifizierten Webseiten einzeln anhand der Kriterien überprüfst. Du nimmst Dir also immer nur eine Webseite vor und gehst damit durch den gesamten WCAG-Kriterienkatalog.
Die Dokumentation Deiner Testergebnisse ist so wichtig wie der Barrierefreiheit-Test selbst. Damit die umsetzenden Personen gut weiterarbeiten können, oder Du Dich später selbst daran erinnerst, solltest Du die identifizierten Barrieren ausreichend beschreiben und idealerweise auch mit Code und Screenshot oder Videos ergänzen.
Um diese Testergebnisse festzuhalten, gibt es zahlreiche kostenlose und kostenpflichtige Checklisten. Einige davon möchten wir Dir vorstellen, da wir diese selbst schon genutzt haben und zufrieden waren:
- In Deutschland ist der Selbsttest des BIK weit verbreitet.
- Die Checkliste von Xperients.de ist einfach und übersichtlich gehalten. Super für einen unkomplizierten Überblick.
- Unsere eigene Checkliste in Form eines Google-Sheet, inklusive WCAG- und BITV-Kriterien zum kostenlosen Kopieren.
Automatisierte Tests für barrierefreie Websites
Automatisierte Testwerkzeuge sind für zwei Dinge besonders gut geeignet, einen ersten groben Überblick zu erhalten und um große Mengen an Webseiten-Inhalten effizient zu überprüfen. Eine englischsprachige Übersicht zu Barrierefreiheit-Testwerkzeugen biete die Web Accessibility Initiative (WAI) auf ihrer Website. Die dortige Auswahl kann auch nach automatisierten Test-Tools gefiltert werden. Einige ergänzende Tools aus meiner eigenen Praxis möchte ich hier noch anbringen:
- Fürs Marketing
- Lighthouse: Ein Open-Source-Tool von Google, das in den Chrome Entwicklertools (klicke „STRG“ + „Shift“ + „I“) integriert ist oder über die Pagespeed-Domain von Google aufgerufen werden kann.
- AccessiBe und UserWay: Beide Plattformen sind recht bekannt, UserWay habe ich selbst schon genutzt und war positiv überrascht. Trotzdem sollen diese beiden Tools keine Empfehlung sondern vielmehr die Anregung zur eigenen Tool-Recherche sein.
- Für Entwickler und technisch versierte Personen
- Pa11y: Bei Pa11y handelt es sich um ein auf Node.js basierendes Tool, das verschiedene Tests zur Barrierefreiheit auszuführen kann und einfach in den Entwicklungsprozess zu integrieren ist. Durch die Installation von Pa11y und die Integration in automatisierte Build-Prozesse kannst Du Deine Webseiten-Inhalte kontinuierlich überprüfen.
Manuelle Barrierefreiheit-Tests für Websites
- Manuelle Bedientests: Manuelle Tests sind entscheidend, um spezifische Barrierefreiheitsprobleme zu identifizieren. Dies umfasst die Durchführung von Tests durch Beauftragte ohne Behinderungen sowie die Einbindung von Menschen mit Behinderungen, um ihre Erfahrungen und Herausforderungen zu verstehen.
- Screenreader-Tests: Die Benutzbarkeit aus Sicht der Nutzenden kann durch die Integration von Screenreader-Tests weiter erleichtert werden. Diese Tests helfen, die Website auf ihre Bedienbarkeit für sehbehinderte Nutzende zu prüfen.
Phase 3: Messen und Tracken
Schwerpunkte definieren
Nach dem Barrierefreiheit-Test Deiner Website wirst Du eine lange Liste mit Aufgaben erstellt haben. Diese Liste sollte so aufbereitet sein, dass die Aufgaben gruppiert werden und effizient und effektiv abgearbeitet werden können. Zunächst solltest Du Dich immer um die Probleme mit den absoluten Minimalanforderungen (WCAG-Konformitätsstufe A) kümmern. Erst anschließend sollte die maßgebende AA-Konformitätsstufe zum Tragen kommen.
Natürlich könntest Du auch eine andere Priorisierung vornehmen, zum Beispiel anhand des Schwierigkeitsgrades oder anhand der Aufrufzahlen der Webseiten mit Problemen im Hinblick auf die Zugänglichkeit. Wichtig ist nur, dass Du eine Priorisierung vornimmst und ohne den Überblick oder die Lust zu verlieren am Ende die Konformitätsstufe AA erreichst.
Vergiss nicht, Umsetzungserfolge zu feiern. Das erhöht die Motivation und eine Barriere weniger ist immer ein Grund zu Feiern.
Als letzten Aspekt möchten wir noch die Verantwortlichkeit für die Lösung (und Vermeidung künftiger) Barrieren anbringen. Hinter jedem nicht erfüllten Barrierefreiheitskriterium in Deiner Website-Test-Checkliste sollte eine verantwortliche Person eingetragen sein. Dadurch gibt es klare Ansprechpersonen und das Verantwortungsgefühlt steigt.
Monitoring und kontinuierliche Verbesserungen
Eine einmal barrierefreie Website bleibt ohne einen entsprechenden Entwicklungs- und Design-Prozess mit hoher nicht lange barrierefrei. Deshalb sind Schulungen für alle an der Website und am Design Mitarbeitenden absolut empfehlenswert. Die Pflege der Barrierefreiheit kann auf unterschiedliche Arten umgesetzt werden. Zum Beispiel können die den Kriterien zugeordneten Personen für die kontinuierliche Einhaltung und Verbesserung der Barrierefreiheit Deiner Website dazu beauftragt werden.
In jedem Fall muss Dein Prozess eine kontinuierliche und regelmäßige Prüfung vorsehen. Das kann Quartalsweise geschehen. Vor allem aber, wenn neue Website-Elemente und Website-Templates gebaut und integriert werden, musst Du Deine Website auf Barrierefreiheit testen. Idealerweise geschieht das schon durch das Qualitätsmanagement während der Entwicklung.
7 Testkriterien, die Deine Website erfüllen muss
Es gibt Dutzenden Kriterien, anhand derer Du Deine Website auf Barrierefreiheit testen kannst und musst. Aber es gibt einige wenige, die absolut essenziell sind. Die folgenden Kriterien gehören unserer Meinung nach dazu, damit Menschen mit einer Behinderung Dein Webangebot halbwegs frustfrei erleben können.
- Alternative Texte für Bilder (Alt-Text): Bilder sollten immer mit alternativen Texten versehen sein. Diese beschreibenden Texte helfen Screenreader-Nutzenden, den Kontext und die Bedeutung der Bilder zu erfassen.
- Tastaturbedienbarkeit: Alle interaktiven Elemente Deiner Website sollten vollständig nur mit der Tastatur bedienbar sein. Dies schließt die Bedienung von Formulare, Links und interaktive Menüs mittels „Tab“, „Enter“, „Pfeiltasten“, „Leertaste“ und „Esc“-Tasten ein.
- Heading-Strukturen: Textinhalte, egal ob auf der Website oder im PDF, brauchen eine saubere Überschriftenstruktur und sollten mit den Headings <h1> bis <h6> ausgezeichnet sein.
- Barrierefreie Farben: Farben sollten so gewählt werden, dass der Text vor dem Hintergrund deutlichen Kontrast aufweist. Contrast Checker Tools helfen dabei, die idealen Farben zu finden.
- Barrierefreie PDFs: PDF-Dokumente sollten den gleichen Barrierefreiheitsstandards wie Webseiten entsprechen. Tools wie der PDF Accessibility Checker können helfen, diese Anforderungen zu evaluieren und umzusetzen.
- Verständliche Sprache (Leichte/Basissprache): Textinhalte sollten in einer klaren, einfachen Sprache verfasst sein, um das Verständnis für alle Nutzenden zu erleichtern.
- Screenreader ausprobieren: Websites sollten so gestaltet sein, dass sie nahtlos mit verschiedenen Screenreadern funktionieren. Screenreader tragen zur Benutzerfreundlichkeit für sehbehinderte Nutzende bei und sind ein wichtiges Testinstrument, um die Barrierefreiheit zu prüfen.
Manuell, schnell und unkompliziert testen
Für schnelle und unkomplizierte manuelle Tests gibt es eine Vielzahl von Tools, die Dir helfen, die wichtigsten Barrierefreiheitsaspekte zu überprüfen.
- WAVE (Web Accessibility Evaluation Tool): Dieses Tool analysiert Deine Webseite visuell und generiert eine Übersicht der Barrierefreiheitsprobleme. Geprüft wird beispielsweise auf barrierefreie Farben und Seitenstruktur. Das Tool gibt es als Plattform und als Browser-Erweiterung. Der große Vorteil dieses Tools ist die Schnelligkeit der Analyse und die eifnache Handhabung.
- AXE (Accessibility Checker): AXE bietet eine umfassende Chrome- und Edge-Browser-Erweiterung, die speziell für Entwickelnde gebaut wurde und über die Entwicklerkonsole detaillierte Berichte über Barrierefreiheits-Probleme liefert.
- Color Contrast Analyzer: Der Color Contrast Analyzer ist eines von vielen guten Werkzeugen, um die Farbkontraste auf Deiner Website zu überprüfen.
Unsere Zusammenfassung, Dein Startschuss
Digitale Barrierefreiheit ist ein Grund- und Menschenrecht. Aber es geht nicht nur darum, gesetzliche Anforderungen zu erfüllen. Das Ziel ist eine inklusive und benutzungsfreundliche digitale Umgebung zu schaffen. Deshalb zählt auch Deine Website und Dein Engagement. Es ist sicher nicht leicht, aber keinesfalls unmöglich und ganz bestimmt lohnenswert!
Wenn Du Fragen hast oder Unterstützung benötigst, zögere nicht, uns zu kontaktieren. Wir sind da, um Dir zu helfen!