Barrierefreiheit testen: Wie lassen sich Websites und Online-Shops auf Barrieren prüfen?

 

Barrierefreie Websites sind für Menschen mit Einschränkungen essenziell – und verbessern gleichzeitig die Nutzerfreundlichkeit für alle. Für Betreiber von Online-Shops ist das nicht nur ein rechtliches Thema, sondern verbessert auch die Reichweite und das Nutzererlebnis.


Viele Barrieren bleiben oft unbemerkt: fehlende Alternativtexte, unklare Strukturen oder nicht bedienbare Formulare. Wer Barrierefreiheit frühzeitig prüft, spart später Aufwand – und sorgt für ein besseres Nutzungserlebnis auf allen Geräten.


In diesem Beitrag zeigen wir, wie Sie die Barrierefreiheit ihrer Website oder ihres Online-Shops testen – mit dem BITV-Test und Tools wie Google Lighthouse oder Screaming Frog. Außerdem nennen wir typische Fehler, die Sie vermeiden sollten.

<–– Nutzen Sie unser Inhaltsverzeichnis 🙂

Wie lässt sich Barrierefreiheit testen?

 

Die Prüfung der digitalen Barrierefreiheit basiert auf zwei Säulen:

  • Automatisierte Tests, die mithilfe von Tools wie Lighthouse oder Screaming Frog typische technische Fehler erkennen.
  • Manuelle Prüfungen, bei denen visuelle Gestaltung, semantische Struktur und Bedienbarkeit aus Nutzersicht bewertet werden.

Ein rein automatisierter Test deckt nur einen Teil der tatsächlichen Probleme ab. Um z. B. die Lesbarkeit, den logischen Aufbau oder die Tastaturbedienbarkeit wirklich zuverlässig zu prüfen, ist der menschliche Blick unverzichtbar.

 

Automatisierte Barrierefreiheittests mit Google Lighthouse und Screaming Frog

Automatisierte Prüfwerkzeuge sind ein guter erster Schritt, um typische Barrierefreiheitsprobleme schnell zu erkennen. Zwei besonders hilfreiche Werkzeuge sind Google Lighthouse und Screaming Frog SEO Spider.

Google Lighthouse (Chrome DevTools)

Lighthouse ist direkt in den Chrome-Browser integriert und liefert auf Knopfdruck eine Analyse der Barrierefreiheit einer einzelnen Seite. Der Audit überprüft unter anderem:

  • Farbkontraste zwischen Text und Hintergrund

  • Vorhandensein von Alternativtexten für Bilder

  • Nutzung semantisch korrekter HTML-Elemente

  • Fokus-Reihenfolge und Tastaturbedienbarkeit
    Beschriftung von Formularfeldern und Buttons

Die Ergebnisse werden in einem übersichtlichen Bericht zusammengefasst, der neben einem Accessibility-Score auch konkrete Handlungsempfehlungen zur Behebung der identifizierten Barrieren enthält.

 

Screaming Frog mit axe-Core-Integration

Der Screaming Frog SEO Spider ist ein leistungsstarkes Tool, das komplette Websites automatisiert crawlen kann. In Verbindung mit dem axe-Core-Framework von Deque Systems lassen sich damit auch umfangreiche Barrierefreiheitsanalysen durchführen. Axe-Core ist eine der meistgenutzten Open-Source-Engines zur Accessibility-Prüfung und bildet die Grundlage vieler anderer Tools, etwa auch im Chrome DevTools.

Durch die Integration mit Screaming Frog können große Websites systematisch auf folgende Barrieren geprüft werden:

  • Fehlende oder leere alt-Attribute bei Bildern
    Bilder ohne Alternativtext oder mit irrelevanten Platzhaltern (alt=““)
  • Duplicate IDs im HTML
    Doppelte IDs können die Orientierung und Bedienung mit Screenreadern beeinträchtigen
  • Fehlende oder falsche ARIA-Rollen
    z. B. fehlerhafte role-Attribute oder unlogische Anwendung von aria-labelledby und aria-describedby
  • Nicht beschriftete interaktive Elemente
    z. B. Buttons, Links oder Formularfelder ohne sichtbare oder programmatisch verknüpfte Labels
  • Unzureichender Farbkontrast
    Axe prüft den Kontrastwert von Texten gegen ihren Hintergrund nach den WCAG-Kriterien
  • Fehlende Fokus-Indikatoren
    Prüft, ob interaktive Elemente bei Tastatur-Navigation visuell hervorgehoben werden
  • Probleme mit der Tab-Reihenfolge
    Erkennt unlogische Fokusabfolgen und „tote Ecken“, die nicht erreicht werden können
  • Nicht erreichbare dynamische Inhalte
    z. B. Pop-ups oder Modale, die nicht korrekt in den Fokus gesetzt oder verlassen werden können

Manuelle Prüfungen: Was automatisierte Tools nicht erkennen

Automatisierte Tests erfassen viele technische Probleme – aber sie stoßen schnell an Grenzen. Ob eine Website wirklich barrierefrei ist, zeigt sich oft erst bei der manuellen Prüfung. Hier geht es vor allem um die tatsächliche Nutzbarkeit aus Sicht von Menschen mit Einschränkungen.

Folgende Aspekte lassen sich nur manuell oder mit Hilfsmitteln wie Screenreadern zuverlässig bewerten:

  • Tastaturbedienung in der Praxis
    Funktionieren Navigation, Formulare und Interaktionen vollständig ohne Maus? Ist der Fokus sichtbar und logisch geführt?
  • Überschriftenstruktur und Seitenlogik
     Sind Inhalte in sinnvoller Reihenfolge gegliedert? Stimmen visuelle und semantische Hierarchien überein?
  • Screenreader-Kompatibilität
    Wird der Inhalt korrekt und verständlich vorgelesen? Sind ARIA-Rollen sinnvoll eingesetzt?
  • Verständlichkeit von Sprache und Texten
    Sind Formulierungen klar, einfach und präzise – insbesondere bei Fehlermeldungen und Anleitungen?
  • Responsive Darstellung und Zoom-Verhalten
    Bleiben Inhalte auch bei hoher Vergrößerung oder auf kleinen Bildschirmen bedienbar?

Für eine systematische manuelle Prüfung empfiehlt sich ein strukturierter Leitfaden – zum Beispiel das BITV Prüfverfahren auf Basis der WCAG 2.2.

BITV-Test: Barrierefreiheit systematisch testen

Der BITV-Test ist ein etabliertes Verfahren zur Bewertung der Barrierefreiheit von Websites im deutschsprachigen Raum. Er basiert auf der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) und bildet die Anforderungen der internationalen WCAG 2.2 (Web Content Accessibility Guidelines) ab – konkret die Konformitätsstufen A und AA.

Die aktuelle Version des Tests – BITV 2.0 – umfasst 98 Prüfschritte, die in verschiedene Themenbereiche untergliedert sind:

  • Textalternativen für Bilder, Grafiken und Bedienelemente
  • Struktur und Navigierbarkeit (z. B. Überschriften, Links, Sprungmarken)
  • Visuelle Gestaltung (z. B. Kontraste, Vergrößerbarkeit)
  • Eingabeformulare (z. B. Labels, Fehlermeldungen, Hilfehinweise)
  • Zeitabhängige Inhalte und Bewegungen
  • Tastaturbedienung und Fokussteuerung
  • Anforderungen aus WCAG 2.2 wie Zielgrößen, konsistente Hilfe und verständliche Anleitungen

Einige dieser Prüfschritte lassen sich automatisiert analysieren – z. B. Farbkontraste oder fehlende Alternativtexte – andere erfordern eine kontextbezogene Bewertung. Der Test bietet dafür eine klare Struktur mit Anforderungen, Beispielen und Beurteilungskriterien.

Häufige Barrierefreiheitsfehler auf Websites – und wie man sie vermeidet

Viele Barrieren auf Websites sind technisch leicht zu beheben – werden aber oft übersehen. Gerade Online-Shops mit vielen Unterseiten, Formularen und komplexen Inhalten profitieren davon, typische Fehler zu kennen und zu vermeiden. Hier sind zehn besonders häufige Stolpersteine – und wie man sie richtig angeht.

Fehlende oder unklare Alternativtexte für Bilder

Bilder ohne alt-Attribut sind für blinde oder sehbehinderte Nutzer:innen nicht zugänglich. Screenreader können solche Inhalte nicht interpretieren. Fehlen dabei wichtige Informationen – etwa bei Produktfotos, Symbolen oder Diagrammen – gehen wesentliche Inhalte verloren.

Alternativtexte sollten den Informationsgehalt des Bildes knapp, aber sinnvoll beschreiben. Dekorative Bilder hingegen sollten mit alt=““ gekennzeichnet werden, damit Screenreader sie überspringen.

Zu geringe Farbkontraste

Wenn Text und Hintergrund zu ähnlich sind – etwa hellgraue Schrift auf weißem Grund – wird Lesen zur Herausforderung. Für Menschen mit eingeschränktem Sehvermögen, Farbenblindheit oder bei schlechten Lichtverhältnissen ist das ein echtes Problem.

Empfohlen wird laut WCAG ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text. Für große Schrift (ab 18 px fett oder 24 px normal) reicht 3:1. Es lohnt sich, mit einem Kontrast-Checker (z. B. von WebAIM oder in Lighthouse) gezielt zu prüfen, ob alle Farben den Richtwerten entsprechen.

Kein sichtbarer Tastaturfokus

Nicht alle Menschen nutzen eine Maus – ob wegen motorischer Einschränkungen oder weil sie Screenreader oder Tastatur-Shortcuts bevorzugen. Damit sie sich auf einer Website orientieren können, muss deutlich sichtbar sein, welches Element gerade aktiv ist.

Viele Websites entfernen versehentlich den Fokus-Ring im CSS – etwa durch outline: none;. Das sollte vermieden werden. Stattdessen kann ein sichtbarer, gut konfigurierter Fokusstil definiert werden, der z. B. aktive Buttons durch einen Rahmen oder eine andere Hintergrundfarbe hervorhebt.

Formulare ohne korrekte Labels und Fehlermeldungen

Formulare gehören zu den häufigsten Problemstellen in der Barrierefreiheit. Wenn Eingabefelder nicht korrekt beschriftet sind oder Fehlermeldungen schwer auffindbar sind, führt das schnell zu Frust.

Jedes Feld sollte ein sichtbares Label besitzen, das technisch mit dem Eingabefeld verknüpft ist (z. B. per for-Attribut). Pflichtfelder müssen klar gekennzeichnet sein, etwa durch einen Zusatz wie „(Pflichtfeld)“. Fehlerhinweise sollten deutlich platziert und auch von Screenreadern angesagt werden.

Überschriften ohne klare Struktur

Überschriften helfen, Inhalte zu gliedern – nicht nur visuell, sondern auch technisch. Screenreader-Nutzer:innen verlassen sich auf eine sinnvolle Hierarchie (<h1> bis <h6>) zur Navigation.

Häufig werden Überschriften visuell hervorgehoben (z. B. mit fetter Schrift), aber nicht korrekt im HTML ausgezeichnet. Das führt zu Verwirrung. Die Regel: Jede Seite hat genau eine <h1>, danach folgt eine logisch verschachtelte Struktur – wie ein Inhaltsverzeichnis. Ebenen sollten nicht übersprungen werden.

Unklare oder nicht sprechende Linktexte

Ein Link wie „Hier klicken“ ist aus dem Zusammenhang gerissen völlig unverständlich – vor allem für Screenreader, die alle Links auflisten. Auch Buttons nur mit Symbol (z. B. ein Einkaufswagen-Icon) sind ohne zusätzliche Informationen nicht barrierefrei.

Besser ist ein Linktext, der das Ziel oder die Aktion beschreibt: „Produktdetails anzeigen“ oder „In den Warenkorb legen“. Bei Icons hilft ein aria-label oder ein title, der die Funktion beschreibt.

Inhalte brechen bei Zoom oder auf kleinen Bildschirmen

Viele Nutzer:innen vergrößern Inhalte oder greifen über mobile Geräte auf Websites zu. Werden dabei Texte abgeschnitten, überlagern sich Inhalte oder ist horizontales Scrollen erforderlich, leidet die Bedienbarkeit erheblich.

Barrierefreie Seiten sollten sich flexibel anpassen. Die Anforderungen nach WCAG verlangen, dass Inhalte auch bei 200 % Zoom ohne Informationsverlust nutzbar sind. Responsive Design, relative Einheiten (em, %) und Media Queries sind hier entscheidend.

Falscher oder übermäßiger Einsatz von ARIA

Mit sogenannten ARIA-Attributen lassen sich Webseiten technisch erweitern, um zum Beispiel Tabs, Akkordeons oder andere interaktive Elemente für Screenreader zugänglich zu machen. Das kann hilfreich sein – birgt aber auch Risiken. Denn wer ARIA falsch einsetzt, verschlechtert die Barrierefreiheit oft mehr, als dass sie verbessert wird.

Typische Fehler sind z. B. widersprüchliche Beschriftungen, doppelte Rollen oder unklare Zustände bei interaktiven Bereichen. Deshalb gilt: Am besten zuerst auf die standardmäßigen HTML-Elemente zurückgreifen – etwa <button> statt selbstgebauter Lösungen mit <div> oder <span>. Nur wenn das technisch nicht möglich ist, sollte ARIA ergänzend verwendet werden.

Videos ohne Untertitel oder Audiodeskription

Multimedia-Inhalte sind für viele Nutzer:innen unzugänglich, wenn keine Alternativen bereitgestellt werden. Besonders Videos ohne Untertitel schließen Gehörlose und Schwerhörige aus.

Alle gesprochenen Inhalte sollten als Untertitel eingeblendet oder als Transkript verfügbar sein. Für visuelle Informationen (z. B. eine Szene ohne Ton) ist zusätzlich eine Audiodeskription oder ein erklärender Text hilfreich. Auch die Videosteuerung sollte per Tastatur erreichbar sein.

Interaktive Inhalte nicht per Tastatur bedienbar

Viele Komponenten – z. B. Filtermenüs, Slider, Popups – lassen sich nur mit der Maus bedienen. Wer auf die Tastatur angewiesen ist, bleibt außen vor.

Interaktive Inhalte müssen vollständig mit Tab, Pfeiltasten, Enter oder Leertaste steuerbar sein. Die Fokusreihenfolge muss logisch verlaufen, und es darf keine „Fallen“ geben, aus denen man nicht mehr per Tastatur herauskommt.

Barrierefreiheit testen lohnt sich

Barrierefreiheit ist kein einmaliges Projekt, sondern ein kontinuierlicher Prozess. Wer frühzeitig prüft, typische Fehler vermeidet und sowohl automatisierte als auch manuelle Tests kombiniert, legt den Grundstein für eine Website, die alle Menschen erreicht – unabhängig von Einschränkungen oder Geräten.

Davon profitieren nicht nur Menschen mit Behinderung, sondern alle Nutzer:innen. Barrierefreie Websites sind klarer strukturiert, einfacher bedienbar und oft auch schneller verständlich. Das verbessert die Usability, reduziert Absprungraten und sorgt für zufriedenere Besucher:innen – ganz gleich, ob sie per Tastatur, Smartphone oder Screenreader unterwegs sind.

Lassen Sie Ihre Website durch uns auf Barrierefreiheit testen!

Barrierefreiheit ist kein einmaliges Projekt, sondern ein fortlaufender Prozess. Nur durch kontinuierliche Kontrolle und Anpassungen gewährleisten Sie, dass Ihre Website gesetzliche Vorgaben erfüllt und für alle Nutzer zugänglich bleibt.

Wir begleiten Sie durch den gesamten Prozess – von der Analyse bis zur finalen Umsetzung. Kontaktieren Sie uns jetzt!

 

Das ist nicht das Ende. Ganz im Gegenteil.

Lernen Sie uns kennen!

Wissen

Tools

Die neusten Blogbeiträge

Facebook-f Instagram Youtube

Copyright 2012 - 2025 netgrade®

Zur Werkzeugleiste springen