BFSG-Schnellcheck · WCAG 2.1 A/AA

Barrierefreiheits-Prüfbericht

Muster-Shop GmbH · erstellt am 06. Juli 2026 · Prüfgrundlage: WCAG 2.1 A/AA (Basis EN 301 549 / BFSG)

13von 100

Gesamteinschätzung

Ihr Shop weist gravierende Mängel auf, die mit denselben automatisierten Werkzeugen auffindbar sind, die auch Abmahnkanzleien einsetzen. Wir empfehlen dringend kurzfristiges Handeln.

4hohes Risiko

7mittleres Risiko

2geringes Risiko

39betroffene Elemente

So entsteht dieser Wert: Start bei 100 Punkten, abzüglich je nach Schwere (hoch −12, mittel −5, gering −2). Hier: 100 − 4×12 − 7×5 − 2×2 = 13.

Ausführliche Bewertung

Bei Ihrer Website besteht spürbarer Handlungsbedarf. Mehrere zentrale Anforderungen sind derzeit nicht erfüllt – die gute Nachricht: Fast alles davon lässt sich mit überschaubarem Aufwand beheben, und wir zeigen Ihnen genau wie. Von 46 automatisiert prüfbaren Kriterien erfüllt Ihre Seite 33 ohne Beanstandung. Zu verbessern sind vor allem 4 Punkte mit hohem Abmahnrisiko, verteilt auf 39 Stellen (geprüft auf 5 Seiten). Die konkreten Korrekturen – inklusive Codebeispiel – finden Sie weiter unten. Zusätzlich sollten 2 Punkte von einer Person geprüft werden, die eine Automatik nicht abschließend bewerten kann (siehe Abschnitt „Manuell zu prüfen").

Warum das jetzt wichtig ist: Seit dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) Onlineshops zur Barrierefreiheit. Verstöße können mit Bußgeldern bis 100.000 € geahndet und von Mitbewerbern kostenpflichtig abgemahnt werden (aktuell üblich: über 2.200 € pro Abmahnung). Abmahnkanzleien setzen inzwischen automatisierte Scanner ein – Mängel wie die in diesem Bericht markierten sind für sie in Sekunden auffindbar.

Prüfumfang: Wir haben 46 automatisiert prüfbare WCAG-Kriterien auf 5 Seiten angewandt – davon 33 ohne Beanstandung, 13 mit Mängeln, 2 zur manuellen Prüfung.

Gefundene Mängel – priorisiert nach Abmahnrisiko

Bilder ohne Alternativtext

Hohes Abmahnrisiko

Produktbilder haben keinen beschreibenden Text hinterlegt. Blinde und sehbehinderte Kundinnen und Kunden, die einen Screenreader nutzen, erfahren dadurch nicht, was auf dem Bild zu sehen ist.

Betroffene Stellen: 7 · WCAG: wcag2a, wcag111 · Behebungsaufwand: mittel

Gefunden auf: / /produkte /produkt/artikel-1 /warenkorb /kasse

So beheben Sie das: Für jedes Bild im Shop-System einen kurzen Alternativtext eintragen, der den Bildinhalt beschreibt (z.B. 'Blaue Trinkflasche 750 ml'). Rein dekorative Bilder sollten als dekorativ markiert werden.

Vorher<img src="produkt.jpg">

Nachher<img src="produkt.jpg" alt="Blaue Trinkflasche, 750 ml">

Betroffene Elemente im Detail (7 von 7)

/
img[src$="logo.png"]
<img src="logo.png" width="140">
/produkte
img[src$="sale-icon.png"]
<img src="sale-icon.png">
/produkt/artikel-1
img[src$="lupe.png"]
<img src="lupe.png">
/warenkorb
img[src$="flasche.jpg"]
<img src="flasche.jpg" width="200" height="150">
/kasse
img[src$="rucksack.jpg"]
<img src="rucksack.jpg" width="200" height="150">
/
img[src$="jacke.jpg"]
<img src="jacke.jpg" width="200" height="150">
/produkte
img[src$="info-icon.png"]
<img src="info-icon.png" width="20">

Regel-Referenz (axe-core)

Links ohne aussagekräftigen Text

Hohes Abmahnrisiko

Links haben nur generische Texte wie 'Hier', 'Klick mich' oder 'Mehr'. Nutzer mit Screenreadern oder motorischen Einschränkungen verstehen nicht, wohin der Link führt oder können ihn gezielt nicht auswählen.

Betroffene Stellen: 2 · WCAG: wcag2a, wcag244, wcag412 · Behebungsaufwand: gering

Gefunden auf: /produkt/artikel-1 /warenkorb

So beheben Sie das: Alle Links mit sprechenden Texten beschriften (z.B. statt 'Mehr' lieber 'Datenschutzerklärung lesen'). Der Link-Text sollte auch isoliert verständlich sein.

Vorher<a href="/en"><img src="flagge-en.png"></a>

Nachher

<a href="/en" aria-label="English version">
  <img src="flagge-en.png" alt="English">
</a>

Betroffene Elemente im Detail (2 von 2)

/produkt/artikel-1
.nav > a[href$="sale"]
<a href="/sale"><img src="sale-icon.png"></a>
/warenkorb
a[href$="prod/3"]
<a href="/prod/3"><img src="info-icon.png" width="20"></a>

Regel-Referenz (axe-core)

Buttons ohne Beschriftung

Hohes Abmahnrisiko

Schaltflächen haben keine sichtbare oder technische Beschriftung (z.B. nur ein Icon). Screenreader-Nutzer wissen nicht, was der Button tut, und auch Nutzer mit Mobilitätsbeeinträchtigungen können ihn schwer ansteuern.

Betroffene Stellen: 1 · WCAG: wcag2a, wcag412 · Behebungsaufwand: gering

Gefunden auf: /

So beheben Sie das: Jedem Button einen klaren Text hinzufügen (z.B. 'In den Warenkorb', 'Absenden'). Icon-Buttons sollten zusätzlich einen unsichtbaren Label-Text haben.

Vorher<button><svg>…</svg></button>

Nachher<button aria-label="Suche starten"><svg>…</svg></button>

Betroffene Elemente im Detail (1 von 1)

/
.header > button
<button class="btn"><img src="lupe.png"></button>

Regel-Referenz (axe-core)

Bild-Buttons ohne Alternativtext

Hohes Abmahnrisiko

Buttons, die nur aus Bildern bestehen, haben keinen Alt-Text. Screenreader-Nutzer wissen nicht, was der Button tut (z.B. Suchbutton).

Betroffene Stellen: 1 · WCAG: wcag2a, wcag111, wcag412 · Behebungsaufwand: gering

Gefunden auf: /produkte

So beheben Sie das: Dem input-Element type="image" ein alt-Attribut hinzufügen (z.B. alt="Suche starten"). Dies muss im HTML oder Shop-Template eingestellt werden.

Betroffene Elemente im Detail (1 von 1)

/produkte
input[type="image"]
<input type="image" src="submit-arrow.png">

Regel-Referenz (axe-core)

Bereiche nicht als Landmarks gekennzeichnet

Mittleres Risiko

Wichtige Seitenbereiche (Header, Navigation, Sidebar, Footer) sind nicht semantisch ausgezeichnet. Screenreader-Nutzer können diese Bereiche nicht überspringen und müssen alles sequenziell durchlesen.

Betroffene Stellen: 20 · WCAG: Best Practice · Behebungsaufwand: mittel

Gefunden auf: /produkte /produkt/artikel-1 /warenkorb /kasse /

So beheben Sie das: Semantische HTML-Tags verwenden: <header>, <nav>, <aside>, <footer>. Alternativ aria-label mit region-Rolle hinzufügen für bessere Navigation.

Betroffene Elemente im Detail (10 von 20)

/produkte
img[src$="logo.png"]
<img src="logo.png" width="140">
/produkt/artikel-1
.nav
<div class="nav"> <a href="/damen">Damen</a> <a href="/herren">Herren</a> <a href="/sale"><img src="sale-icon.png"></a> </div>
/warenkorb
input[placeholder="Suche..."]
<input type="text" placeholder="Suche...">
/kasse
.hero
<div class="hero"> <h3>Sommer-Sale: Bis zu 50% Rabatt</h3> <a href="/sale" class="btn">Jetzt shoppen</a> </div>
/
h5
<h5>Bestseller</h5>
/produkte
img[src$="flasche.jpg"]
<img src="flasche.jpg" width="200" height="150">
/produkt/artikel-1
.product:nth-child(2) > h6
<h6>Trinkflasche Alpin 750ml</h6>
/warenkorb
.product:nth-child(2) > .price
<span class="price">19,90 €</span>
/kasse
.badge
<span class="badge">Nur noch 3 auf Lager</span>
/
img[src$="rucksack.jpg"]
<img src="rucksack.jpg" width="200" height="150">

Regel-Referenz (axe-core)

Seiten haben keinen Titel

Mittleres Risiko

Der Seitentitel (im Browser-Tab und Fenster-Titel) fehlt. Screenreader-Nutzer wissen nicht, auf welcher Seite sie sind, und es ist schwer zu navigieren.

Betroffene Stellen: 1 · WCAG: wcag2a, wcag242 · Behebungsaufwand: gering

Gefunden auf: /produkte

So beheben Sie das: Alle Seiten mit unique, aussagekräftigen Titeln versehen (z.B. 'Startseite - MeinShop', 'Warenkorb - MeinShop'). Dies geschieht über den title-Tag im HTML-Head.

Vorher<title></title>

Nachher<title>Restaurant Frohsinn – Küche & Gastfreundschaft</title>

Betroffene Elemente im Detail (1 von 1)

/produkte
html
<html>

Regel-Referenz (axe-core)

Leere Überschriften

Mittleres Risiko

Überschriften sind ohne Text oder nur mit Bildern/Icons ohne Alt-Text. Screenreader-Nutzer hören eine leere Überschrift und verstehen die Struktur nicht.

Betroffene Stellen: 1 · WCAG: Best Practice · Behebungsaufwand: gering

Gefunden auf: /produkt/artikel-1

So beheben Sie das: Jeder Überschrift aussagekräftigen Text hinzufügen. Wenn nur ein Icon angezeigt wird, einen versteckten Text-Label hinzufügen.

Betroffene Elemente im Detail (1 von 1)

/produkt/artikel-1
h2
<h2></h2>

Regel-Referenz (axe-core)

Überschriften in falscher Reihenfolge

Mittleres Risiko

Überschriften springen Ebenen (z.B. H1 direkt zu H3). Screenreader-Nutzer verstehen die Struktur nicht und können nicht effizient navigieren. Die Seite wirkt desorganisiert.

Betroffene Stellen: 1 · WCAG: Best Practice · Behebungsaufwand: mittel

Gefunden auf: /warenkorb

So beheben Sie das: Überschriften-Hierarchie korrigieren: H1 (Seitentitel), dann H2, H3 usw. ohne Sprünge. Im Editor oder HTML die Tags konsistent setzen.

Vorher

<h1>…</h1>
<h3>…</h3>  <!-- h2 übersprungen -->

Nachher

<h1>…</h1>
<h2>…</h2>

Betroffene Elemente im Detail (1 von 1)

/warenkorb
h5
<h5>Bestseller</h5>

Regel-Referenz (axe-core)

Sprache nicht ausgezeichnet

Mittleres Risiko

Das HTML-Dokument hat kein lang-Attribut. Screenreader nutzen diese Information, um die richtige Sprache einzustellen. Nutzer hören den Text möglicherweise in falscher Aussprache.

Betroffene Stellen: 1 · WCAG: wcag2a, wcag311 · Behebungsaufwand: gering

Gefunden auf: /kasse

So beheben Sie das: Im HTML das lang-Attribut auf dem html-Element setzen (z.B. <html lang="de">). Dies ist meist eine Konfiguration im Shop-System oder CMS.

Vorher<html>

Nachher<html lang="de">

Betroffene Elemente im Detail (1 von 1)

/kasse
html
<html>

Regel-Referenz (axe-core)

Viewport-Meta-Tag fehlt

Mittleres Risiko

Das viewport-Meta-Tag ist nicht gesetzt. Die Seite wird auf mobilen Geräten nicht richtig angezeigt und ist für viele Nutzer unlesbar. Dies erschwert auch die Navigation.

Betroffene Stellen: 1 · WCAG: wcag2aa, wcag144 · Behebungsaufwand: gering

Gefunden auf: /

So beheben Sie das: In den HTML-Head das viewport-Meta-Tag einfügen: <meta name="viewport" content="width=device-width, initial-scale=1">. Dies ist meist im Shop-Template bereits vorhanden.

Betroffene Elemente im Detail (1 von 1)

/
meta[name="viewport"]
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Regel-Referenz (axe-core)

Unangemessene tabindex-Werte

Mittleres Risiko

Positive tabindex-Werte führen zu verwirrender Tab-Reihenfolge. Nutzer mit Tastaturnavigation können nicht logisch durch die Seite navigieren.

Betroffene Stellen: 1 · WCAG: Best Practice · Behebungsaufwand: mittel

Gefunden auf: /produkt/artikel-1

So beheben Sie das: Positive tabindex-Werte entfernen und statt dessen native HTML-Elemente in der richtigen Reihenfolge ordnen. Nur tabindex="-1" für Elemente verwenden, die nicht fokussierbar sein sollen.

Betroffene Elemente im Detail (1 von 1)

/produkt/artikel-1
input[placeholder="Vorname"]
<input type="text" placeholder="Vorname" tabindex="3">

Regel-Referenz (axe-core)

Listen nicht korrekt ausgezeichnet

Geringes Risiko

Listen werden mit div- oder span-Elementen statt mit ul/ol/li erstellt. Screenreader erkennen die Listenstruktur nicht und können Inhalte nicht richtig vorlesen.

Betroffene Stellen: 1 · WCAG: wcag2a, wcag131 · Behebungsaufwand: mittel

Gefunden auf: /warenkorb

So beheben Sie das: Semantische Listen-Tags verwenden: <ul> für ungeordnete Listen, <ol> für nummerierte Listen, und <li> für Einträge. Dies hilft auch der Seitenstruktur.

Vorher

<div>
  <li>Eintrag</li>
</div>

Nachher

<ul>
  <li>Eintrag</li>
</ul>

Betroffene Elemente im Detail (1 von 1)

/warenkorb
ul
<ul class="footer-links"> <a href="/agb">AGB</a> <li>Impressum</li> <div><li>Datenschutz</li></div> </ul>

Regel-Referenz (axe-core)

Listeneinträge nicht semantisch ausgezeichnet

Geringes Risiko

Listenelemente werden nicht mit <li>-Tags markiert. Screenreader können die Listenstruktur nicht erkennen und lesen nur Text ohne Kontext vor.

Betroffene Stellen: 1 · WCAG: wcag2a, wcag131 · Behebungsaufwand: mittel

Gefunden auf: /kasse

So beheben Sie das: Alle Listeneinträge in <li>-Tags wrappen und diese in <ul> oder <ol> einbauen. Dies verbessert die Navigation für Screenreader-Nutzer.

Vorher<li>Eintrag</li> 

Nachher

<ul>
  <li>Eintrag</li>
</ul>

Betroffene Elemente im Detail (1 von 1)

/kasse
div > li
<li>Datenschutz</li>

Regel-Referenz (axe-core)

Manuell zu prüfen – für eine vollständige Bewertung

Diese Punkte kann die automatische Prüfung nicht eindeutig entscheiden (z. B. Kontrast über Bildern, Sinn von Linktexten). Sie gehören zu einer vollständigen WCAG-Bewertung und sollten von einer Person geprüft werden.

M01

Zu geringer Farbkontrast

manuell prüfen

Text und Hintergrund haben nicht genug Kontrastabstand. Menschen mit Sehbehinderung oder Farbenblindheit können den Text schwer oder gar nicht lesen, besonders auf mobilen Geräten in heller Umgebung.

Betroffene Stellen: 1 · Gefunden auf: /produkte

Betroffene Elemente (1 von 1)

/produkte
<h2 style="color:#fff">Sale</h2>

M02

link-in-text-block

manuell prüfen

Link nur farblich erkennbar

Betroffene Stellen: 1 · Gefunden auf: /kasse

Betroffene Elemente (1 von 1)

/kasse
<a href="/agb">AGB</a>

Empfohlenes Vorgehen

1. Beheben Sie zuerst alle Punkte mit hohem Risiko – diese sind automatisiert nachweisbar.

2. Punkte mit mittlerer und geringer Einstufung innerhalb der nächsten 4–8 Wochen einplanen.

3. Nach der Behebung erneut prüfen lassen – jedes Update Ihres Shops kann neue Mängel erzeugen. Unser laufendes Monitoring übernimmt das automatisch.

Mehr als Pflicht – Ihr Nutzen

Barrierefreiheit zahlt sich doppelt aus: Sie erreichen mehr Kundinnen und Kunden (in Deutschland leben rund 7,8 Mio. schwerbehinderte Menschen) und verbessern zugleich Bedienbarkeit, Nutzung auf dem Smartphone und Ihre Auffindbarkeit bei Google. Wer jetzt handelt, ist vorbereitet, bevor andere es sind – und macht aus einer Pflicht einen Vorsprung.

Dauerhaft sicher bleiben – ohne selbst daran zu denken

Ihr Shop verändert sich öfter als das Gesetz: Jedes neue Produkt, jedes Theme-Update, jede neue Seite kann unbemerkt neue Hürden einbauen. Damit Sie einmal Erreichtes nicht wieder verlieren, prüfen wir Ihren Shop auf Wunsch automatisch weiter:

Jahres-Check – 99 EUR/Jahr: Einmal jährlich prüfen wir Ihren kompletten Shop erneut und senden Ihnen einen frischen Bericht. So bleiben Sie dauerhaft auf dem Stand.

Laufendes Monitoring – 29 EUR/Monat: Wir behalten Ihren Shop im Blick und melden uns, sobald etwas Neues auffällt.

Interesse? Eine kurze Antwort auf diese E-Mail genügt – wir empfehlen ehrlich, was zu Ihrem Shop passt.

Wichtiger Hinweis: Dieser Bericht ist eine automatisierte technische Ersteinschätzung auf Basis von Greenlight Check v0.1 (axe-core 4.12.1) (WCAG 2.1 A/AA). Automatisierte Prüfungen decken einen wesentlichen, aber nicht den vollständigen Kriterienkatalog der EN 301 549 ab; einzelne Anforderungen erfordern eine manuelle Prüfung. Dieser Bericht ist keine Rechtsberatung und kein Konformitätsnachweis.