Website auf Barrierefreiheit testen – Praxisleitfaden

Website auf Barrierefreiheit testen: Dein Praxisleitfaden für inklusive Webseiten

Geschätzte Lesezeit: 8 Minuten

Wichtigste Erkenntnisse

• Gesetzliche Pflicht: Ab 2025 müssen viele Websites in Deutschland die Anforderungen des BFSG erfüllen.
• Systematischer Ansatz: Kombination aus automatisierten Tools und manuellen Tests liefert die besten Ergebnisse.
• Regelmäßigkeit zählt: Barrierefreiheit ist ein kontinuierlicher Prozess, kein einmaliger Check.
• WCAG als Standard: Die Web Content Accessibility Guidelines bilden die Grundlage für barrierefreie Websites.
• Nutzertests sind Gold wert: Menschen mit Behinderungen decken Barrieren auf, die Tools übersehen.

Inhaltsverzeichnis

• Warum du deine Website auf Barrierefreiheit testen solltest
• Die WCAG-Kriterien: Dein Kompass für Barrierefreiheit
  • Wahrnehmbarkeit
  • Bedienbarkeit
  • Verständlichkeit
  • Robustheit
• Automatisierte Tools: Dein Schnelltest
• Manuelle Tests: Was Tools nicht erkennen können
• Deine praktische Checkliste für den Barrierefreiheits-Test
• Formulare und interaktive Elemente richtig testen
• Videos, PDFs und andere Medien barrierefrei gestalten
• Kontinuierliche Überwachung und Weiterentwicklung
• FAQ

Warum du deine Website auf Barrierefreiheit testen solltest

Ich erinnere mich noch genau an den Moment, als ich das erste Mal einem blinden Nutzer zusah, wie er versuchte, eine vermeintlich "moderne" Website mit seinem Screenreader zu bedienen. Es war frustrierend – für ihn und für mich. Buttons ohne Beschriftung, Bilder ohne Alt-Text, eine Navigation die nur mit der Maus funktionierte. Das war 2019, und seitdem hat sich einiges getan.

Heute ist Barrierefreiheit nicht mehr nur eine nette Geste, sondern eine rechtliche Notwendigkeit. Das Barrierefreiheitsstärkungsgesetz (BFSG) macht ab 2025 klare Vorgaben für digitale Angebote. Aber mal ehrlich, es geht um viel mehr als nur Gesetze. In Deutschland leben etwa 13 Millionen Menschen mit Behinderungen – das ist ein riesiger Teil deiner potenziellen Nutzer. Wenn deine Website Barrieren aufweist, verlierst du nicht nur diese Zielgruppe, sondern schadest auch deinem Google-Ranking.

Die gute Nachricht? Du musst kein Experte sein, um deine Website auf Barrierefreiheit zu testen. Es gibt inzwischen echt gute Tools und Methoden, die dir den Einstieg erleichtern. Manche sind kostenlos, andere kosten ein bisschen was, aber alle helfen dir dabei, deine Webseite inklusiver zu gestalten.

Der erste Schritt ist immer eine ehrliche Bestandsaufnahme. Wo steht deine Website gerade? Welche Elemente sind problematisch? Nur wenn du weißt, wo die Probleme liegen, kannst du sie auch lösen. Das ist wie beim Training – ohne Diagnose keine gezielte Verbesserung.

Die WCAG-Kriterien: Dein Kompass für Barrierefreiheit

Die Web Content Accessibility Guidelines (WCAG) sind der internationale Standard für barrierefreie Websites. Aktuell ist Version 2.2 die Referenz, und sie basiert auf vier grundlegenden Prinzipien: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit. Klingt kompliziert? Ist es gar nicht.

Wahrnehmbarkeit

Wahrnehmbarkeit bedeutet, dass alle Nutzer die Inhalte wahrnehmen können müssen. Ein Beispiel: Bilder brauchen Alt-Texte, damit Screenreader-Nutzer wissen, was drauf zu sehen ist. Videos benötigen Untertitel für gehörlose Menschen. Farben dürfen nicht die einzige Informationsquelle sein – wenn du beispielsweise Fehler in Formularen nur rot markierst, hilft das farbenblinden Menschen wenig.

Bedienbarkeit

Die Bedienbarkeit stellt sicher, dass alle interaktiven Elemente auch wirklich bedient werden können. Ich teste meine Websites immer erstmal komplett ohne Maus – nur mit der Tastatur. Tab, Shift+Tab, Enter, die Pfeiltasten. Wenn das nicht funktioniert, hast du ein Problem. Buttons und Schaltflächen müssen fokussierbar sein, die Fokus-Anzeige muss deutlich sichtbar sein.

Verständlichkeit

Verständlichkeit heißt, dass deine Inhalte klar und nachvollziehbar formuliert sind. Keine Fachsprache ohne Erklärung, keine verschachtelten Sätze, die man dreimal lesen muss. Formularfelder brauchen eindeutige Beschriftungen – nicht nur Platzhalter-Text, der verschwindet sobald man tippt.

Robustheit

Robustheit bedeutet, dass deine Website mit verschiedenen Technologien funktioniert. Verschiedene Browser, verschiedene Geräte, verschiedene assistive Tools. Dein Code sollte sauber sein und ARIA-Labels dort einsetzen, wo sie Sinn machen. Die WCAG unterscheidet übrigens drei Konformitätsstufen: A (Basis), AA (erweitert) und AAA (höchste Stufe). Für die meisten Websites ist Level AA das Ziel.

Automatisierte Tools: Dein Schnelltest für die wichtigsten Barrieren

Automatisierte Tools sind der perfekte Einstieg, wenn du deine Website auf Barrierefreiheit testen willst. Sie finden viele technische Probleme schnell und zuverlässig. Mein persönlicher Favorit ist WAVE von WebAIM – das Tool zeigt direkt auf deiner Webseite an, wo Probleme sind. Du gibst einfach deine URL ein und siehst sofort, welche Elemente Fehler haben.

Google Lighthouse ist direkt in Chrome eingebaut und testet nicht nur Barrierefreiheit, sondern auch Performance und SEO. Einfach die Developer Tools öffnen, zum Lighthouse-Tab wechseln und den Accessibility-Test starten. Du bekommst einen Score von 0-100 und konkrete Verbesserungsvorschläge. Super praktisch für einen ersten Überblick.

Der eRecht24 Barrierefreiheits-Scanner ist speziell auf deutsche Anforderungen zugeschnitten und prüft deine Website nach BITV-Kriterien. Das ist besonders wichtig, wenn du sichergehen willst, dass du die gesetzlichen Anforderungen erfüllst. Der Contrast Checker von WebAIM hilft dir dabei, Farbkontraste zu überprüfen – ein häufiges Problem, das viele übersehen.

Aber Vorsicht: Automatisierte Tools finden nur etwa 30–40% aller Barrierefreiheitsprobleme. Sie erkennen fehlende Alt-Texte, aber nicht ob der Alt-Text sinnvoll ist. Sie checken die Kontraste, aber nicht ob die Navigation logisch aufgebaut ist. Deshalb sind diese Tools nur der erste Schritt – nie die komplette Lösung.

Ich nutze meistens mehrere Tools parallel. WAVE für den visuellen Überblick, Lighthouse für den schnellen Score, und dann noch spezifische Checker für einzelne Aspekte wie Kontraste oder Formular-Validierung. Jedes Tool hat seine Stärken und findet manchmal Dinge, die die anderen übersehen. Die Kombination macht's.

Manuelle Tests: Was Tools nicht erkennen können

Nach den automatisierten Tests kommt die eigentliche Arbeit: die manuellen Überprüfungen. Ich setze mich erstmal hin und navigiere meine gesamte Website nur mit der Tastatur. Klingt banal, ist aber unglaublich aufschlussreich. Du merkst sofort, wenn Links nicht in logischer Reihenfolge angesprungen werden oder wenn Buttons plötzlich nicht mehr erreichbar sind.

Die Screenreader-Tests sind besonders wichtig, aber auch ein bisschen gewöhnungsbedürftig. Für Windows nutze ich NVDA (kostenlos), für Mac ist VoiceOver bereits vorinstalliert. Ich schließe die Augen und versuche, meine Website zu bedienen – nur über das akustische Feedback. Du glaubst nicht, wie viele Probleme du dabei entdeckst. Überschriften die fehlen, Links die nur "hier klicken" sagen, Formulare ohne klare Struktur.

Die Zoom-Tests sind ebenfalls wichtig. Viele Menschen mit Sehbehinderung vergrößern Websites auf 200% oder mehr. Deine Website muss dabei benutzbar bleiben – kein horizontales Scrollen, keine überlappenden Texte, keine verschwindenden Buttons. Ich teste immer bis 400% Zoom, um sicherzugehen.

Mobile Tests gehören auch dazu, auch wenn das nicht direkt unter Barrierefreiheit fällt. Aber kleine Touchziele sind für Menschen mit motorischen Einschränkungen ein echtes Problem. Buttons sollten mindestens 44×44 Pixel groß sein – das ist die Mindestgröße, die auch die WCAG empfiehlt.

Am wertvollsten sind aber Tests mit echten Nutzern. Wenn möglich, lass Menschen mit verschiedenen Behinderungen deine Website testen. Ihr Feedback ist Gold wert und zeigt dir Barrieren, die du selbst nie finden würdest. Das ist wie beim Sport – ein Coach sieht Fehler in deiner Technik, die du selbst nicht bemerkst.

Deine praktische Checkliste für den Barrierefreiheits-Test

Eine gute Checkliste ist unbezahlbar, wenn du systematisch deine Website auf Barrierefreiheit testen willst. Ich hab über die Jahre meine eigene entwickelt, die auf den WCAG-Kriterien basiert, aber praktisch anwendbar ist. Fangen wir mit den Basics an.

Bilder und Grafiken

• Haben alle informativen Bilder aussagekräftige Alt-Texte?
• Sind dekorative Bilder mit leerem Alt-Attribut markiert?
• Vermitteln Alt-Texte den gleichen Informationsgehalt wie die Bilder?
• Sind komplexe Grafiken zusätzlich im Text beschrieben?

Farben und Kontraste

• Ist der Kontrast zwischen Text und Hintergrund mindestens 4,5:1 (normale Schrift) bzw. 3:1 (große Schrift)?
• Werden Informationen nicht nur durch Farbe vermittelt?
• Sind Fehlermeldungen auch ohne Farbe erkennbar?
• Funktioniert die Website auch im Hochkontrast-Modus?

Tastatur-Navigation

• Sind alle interaktiven Elemente per Tastatur erreichbar?
• Ist die Fokus-Reihenfolge logisch und nachvollziehbar?
• Ist der Tastaturfokus immer deutlich sichtbar?
• Gibt es keine Tastaturfallen, wo man steckenbleibt?

Überschriften und Struktur

• Gibt es eine klare Überschriftenhierarchie (h1, h2, h3)?
• Ist die h1 einmalig und aussagekräftig?
• Werden Überschriften nicht nur für Formatierung missbraucht?
• Ist die Dokumentstruktur semantisch korrekt?

Die Liste geht noch weiter, aber das sind die wichtigsten Punkte für einen ersten Durchgang. Ich arbeite diese Checkliste bei jedem Projekt durch – und finde immer noch was zum Verbessern.

Formulare und interaktive Elemente richtig testen

Formulare sind oft die größte Barriere auf Websites. Ich hab schon Seiten gesehen, wo das Kontaktformular für Screenreader-Nutzer komplett unbenutzbar war. Das ist besonders ärgerlich, weil Formulare meist wichtige Funktionen haben – Anmeldung, Bestellung, Kontaktaufnahme.

Jedes Formularfeld braucht ein eindeutiges label-Element, das fest mit dem Input verbunden ist. Nicht nur ein Platzhalter, der verschwindet wenn man reinklickt. Die Beschriftung muss außerhalb des Eingabefelds stehen und auch bei Zoom oder Vergrößerung sichtbar bleiben. Bei meinen Tests achte ich besonders darauf, dass das Label per Klick das zugehörige Feld fokussiert – das ist ein guter Indikator für korrekte Verknüpfung.

Fehlermeldungen müssen klar und hilfreich sein. "Fehlerhafte Eingabe" hilft niemandem weiter – besser ist "Die E-Mail-Adresse muss ein @-Zeichen enthalten". Die Fehlermeldung sollte direkt beim betroffenen Feld erscheinen und für Screenreader zugänglich sein. ARIA-Attribute wie aria-invalid und aria-describedby sind dabei deine Freunde.

Pflichtfelder müssen als solche erkennbar sein – nicht nur durch ein rotes Sternchen. Der Text "(Pflichtfeld)" oder "erforderlich" sollte im Label stehen. Bei komplexeren Formularen helfen fieldset und legend, zusammengehörige Felder zu gruppieren. Das ist besonders bei Adressformularen oder mehrteiligen Fragebögen wichtig.

Buttons und Schaltflächen brauchen aussagekräftige Beschriftungen. "Absenden" ist okay, "Jetzt kostenloses Angebot anfordern" ist besser. Icon-Buttons ohne Text sind problematisch – nutze dann aria-label, damit Screenreader wissen, was der Button macht. Ich teste immer, ob ich das gesamte Formular nur mit der Tastatur ausfüllen und absenden kann.

Videos, PDFs und andere Medien barrierefrei gestalten

Multimediale Inhalte sind eine besondere Herausforderung bei der Barrierefreiheit. Videos ohne Untertitel schließen gehörlose Menschen aus, PDFs ohne richtige Struktur sind für Screenreader unlesbar. Dabei ist es gar nicht so schwer, diese Inhalte zugänglich zu machen – wenn man weiß wie.

Bei Videos sind Untertitel das Minimum. Die sollten nicht nur die gesprochene Sprache enthalten, sondern auch wichtige Geräusche beschreiben. "Musik setzt ein", "Tür schlägt zu" – solche Infos gehören in gute Untertitel. YouTube bietet automatische Untertitel an, aber die sind oft fehlerhaft. Besser ist, sie selbst zu erstellen oder professionell erstellen zu lassen.

Audiodeskriptionen sind für blinde Menschen wichtig. Sie beschreiben, was im Video zu sehen ist – zwischen den Dialogen. "Anna betritt den Raum und setzt sich an den Schreibtisch" – so etwas. Bei vielen Videos ist das nicht nötig, weil alles Wichtige eh gesprochen wird. Aber bei visuell erzählten Inhalten ist es unverzichtbar.

PDFs sind eine Wissenschaft für sich. Ein PDF einfach aus Word zu exportieren reicht nicht. Du musst Tags setzen, eine logische Lesereihenfolge definieren, Alt-Texte für Bilder ergänzen. Adobe Acrobat Pro hat gute Werkzeuge dafür, aber es ist zeitaufwendig. Manche Experten sagen, dass barrierefreie HTML-Seiten immer besser sind als PDFs – und da ist was dran.

Bei Podcasts und Audioinhalten brauchst du Transkripte. Die helfen nicht nur gehörlosen Menschen, sondern auch allen, die den Inhalt lieber lesen oder durchsuchen wollen. Ich habe festgestellt, dass Transkripte auch das SEO verbessern – Google kann Audio nicht indizieren, Text schon.

Kontinuierliche Überwachung und Weiterentwicklung

Barrierefreiheit ist kein Projekt mit festem Ende, sondern ein kontinuierlicher Prozess. Das habe ich am eigenen Leib erfahren, als ich dachte, meine Website wäre fertig – und dann kam das nächste Update, das neue Barrieren eingeführt hat. Seitdem teste ich regelmäßig.

Nach jeder größeren Änderung solltest du einen Schnelltest durchführen. Neue Seiten, neue Funktionen, Design-Updates – alles muss geprüft werden. Ich habe mir angewöhnt, bei jedem Deployment zumindest WAVE und Lighthouse laufen zu lassen. Dauert fünf Minuten, kann aber große Probleme verhindern.

Mindestens einmal im Quartal sollte ein umfassender Test stattfinden. Alle wichtigen Seiten, alle kritischen Funktionen, alle Tools. Dokumentiere die Ergebnisse und verfolge Verbesserungen über die Zeit. Es ist echt motivierend zu sehen, wie der Accessibility-Score steigt.

Die WCAG entwickeln sich weiter – von 2.0 über 2.1 zu 2.2, und bald kommt 3.0. Die Kriterien werden erweitert, neue Technologien kommen dazu. Du musst am Ball bleiben. Ich habe ein paar Blogs und Newsletter abonniert, die mich über Änderungen informieren. So verpasse ich keine wichtigen Updates.

Schulung deines Teams ist ebenfalls wichtig. Entwickler, Designer, Content-Manager – alle sollten die Basics der Barrierefreiheit kennen. Ich habe in meinem Team regelmäßige Workshops eingeführt. Manchmal laden wir auch externe Experten ein, die neue Perspektiven einbringen.

Denk auch an die Barrierefreiheitserklärung auf deiner Website. Die ist seit 2019 für öffentliche Stellen Pflicht und wird auch für private Websites immer wichtiger. Sie zeigt, dass du dich mit dem Thema beschäftigst und gibt Nutzern eine Möglichkeit, Barrieren zu melden.

Häufig gestellte Fragen (FAQ)