So sieht ein echter Compliance-Nachweis aus
Dies ist kein Marketingbeispiel und keine Zusammenfassung. Unten sehen Sie einen vollständigen, ungekürzten Bericht, erstellt von genau derselben Scan-Engine, die später auch Ihre Plattform durchgehend prüft.
Was dieses Beispiel zeigt
Ein echter Scan, keine Inszenierung
Erstellt in unserer eigenen Demo-Umgebung mit bewusst eingebauten Fehlern. Nicht für die Präsentation zusammengestellt oder angepasst.
Dieselbe Engine wie in der Produktion
Das ist genau derselbe Scan mit derselben Tiefe, der später deine Seiten beurteilt, gebaut auf axe-core, derselben Engine, die Google Lighthouse nutzt.
Ungekürzt, Zeile für Zeile
Jeder Befund inklusive exakter Position und konkreter Korrektur. Nichts weggelassen, nichts beschönigt.
Skalierbar vom einzelnen Webshop bis zum Enterprise
Dieselbe Norm, dieselbe Tiefe und derselbe Nachweis, unabhängig von der Größe Ihrer Plattform.
Wie dieses Beispiel entstanden ist
Dies ist ein echter Scan unseres eigenen Demo-Shops „Nordlys Living“, ein fiktiver Onlineshop, in dem wir die Fehler eingebaut haben, die uns in freier Wildbahn am häufigsten begegnen: Bilder ohne Alt-Text, zu geringer Farbkontrast, ein Feld ohne Label, ein Button und ein Link ohne Namen. Du kannst sich die Demo-Seite selbst ansehen. Nichts an diesem Bericht ist erfunden oder aufgebauscht, was die Engine gefunden hat, siehst du unten.
Ergebnis für https://seviranta.com/demo-winkel.html
5 Verstöße · 12 Stellen auf dieser Seite versagen die WCAG 2.1 & 2.2 AA-Prüfung.
Verkaufst du an Verbraucher in der EU, dann gilt der European Accessibility Act für deine Website. Starte ein laufendes Audit und vermeide Bußgelder.
Geprüft gegen EN 301 549 (WCAG 2.1 AA) + WCAG 2.2 AA mit axe-core 4.11.4. Automatisierte Prüfung erkennt zuverlässig etwa 57 % der Probleme; die Prüfpunkte erfordern ein menschliches Urteil. So siehst du genau, was schwarz auf weiß feststeht und wo der nächste Gewinn liegt.
Nach WCAG-Kriterium
Dieselben Verstöße, gruppiert nach dem Erfolgskriterium, das sie betreffen.
- 1.4.3 Kontrast (Minimum)7 Stellen
- 4.1.2 Name, Rolle, Wert3 Stellen
- 1.1.1 Nicht-Text-Inhalt2 Stellen
- 2.4.4 Linkzweck (im Kontext)1 Stelle
Verstöße, maschinell sicher
- Kritisch1× auf dieser Seite
Was es bedeutet · Ein Button ohne Namen wird als 'Schaltfläche' vorgelesen, unbrauchbar für alle, die nicht sehen können. Betrifft häufig den Warenkorb- und den Such-Button.
Wie du es behebst · Geben Sie dem Button Text oder ein aria-label, das die Aktion beschreibt ('In den Warenkorb', 'Suchen').
Auf deiner Seite
Falsch ·<button class="icon-btn"><span aria-hidden="true">🔍</span></button>Richtig ·<button aria-label="In den Warenkorb"><svg>…</svg></button>WCAG wcag2a, wcag412 · Technischer Name: Buttons must have discernible text · technische Quelle für deinen Entwickler
- Schwerwiegend7× auf dieser Seite
Was es bedeutet · Text mit zu geringem Kontrast ist für sehbeeinträchtigte Menschen und bei hellem Sonnenlicht auf dem Smartphone unlesbar. Dies ist mit Abstand der häufigste EAA-Befund in Webshops.
Wie du es behebst · Machen Sie die Text- oder Hintergrundfarbe dunkler/heller, bis das Verhältnis mindestens 4,5:1 beträgt (3:1 bei großem Text). In Shopify: Theme-Einstellungen → Farben; passen Sie Button- und Textfarben einmal an, und die Änderung gilt für das gesamte Theme.
Auf deiner Seite
Beispieltextgemessen 1,87:1, erforderlich 4,5:1#b8b2a7 auf #f4f1ecBeispieltextgemessen 1,52:1, erforderlich 4,5:1#ffffff auf #a8dadcBeispieltextgemessen 1,73:1, erforderlich 4,5:1#c9c4bb auf #ffffffWCAG wcag2aa, wcag143 · Technischer Name: Elements must meet minimum color contrast ratio thresholds · technische Quelle für deinen Entwickler
- Kritisch2× auf dieser Seite
Was es bedeutet · Bilder ohne Alt-Text sind für Screenreader unsichtbar. Bei Produktfotos bedeutet das: Ein blinder Kunde weiß nicht, um welches Produkt es sich handelt.
Wie du es behebst · Geben Sie jedem informativen Bild einen kurzen Alt-Text, der beschreibt, was darauf zu sehen ist. In Shopify: Produkt → Medien → 'Alt-Text bearbeiten'. Rein dekorative Bilder erhalten ein leeres Alt-Attribut (alt="").
Auf deiner Seite
Falsch ·<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 140'%3E%3Crect fill='%23dfe7e2' width='220' height='140'/%3E%3Ccircle cx='110' cy='70' r='38' fill='%238aa39b'/%3E%3C/svg%3E" width="220" height="140">Richtig ·<img src="hond.jpg" alt="Brauner Labrador-Welpe mit Halsband">…und 1 ähnliches Element auf dieser Seite.
WCAG wcag2a, wcag111 · Technischer Name: Images must have alternative text · technische Quelle für deinen Entwickler
- Kritisch1× auf dieser Seite
Was es bedeutet · Eingabefelder ohne Beschriftung lassen sich mit einem Screenreader nicht bedienen und sind für alle Menschen mit Einschränkungen schwer nutzbar. Betrifft Such-, Login- und Checkout-Felder.
Wie du es behebst · Verknüpfen Sie ein sichtbares <label> mit jedem Eingabefeld (for/id), oder verwenden Sie ein aria-label, wenn kein Platz für sichtbaren Text ist.
Auf deiner Seite
Falsch ·<input type="email" name="email">Richtig ·<label for="email">E-Mail-Adresse</label><input id="email" type="email">WCAG wcag2a, wcag412 · Technischer Name: Form elements must have labels · technische Quelle für deinen Entwickler
- Schwerwiegend1× auf dieser Seite
Was es bedeutet · Ein Link ohne lesbaren Text (z. B. nur ein Icon) wird von einem Screenreader als 'Link' ohne Ziel vorgelesen, der Besucher weiß nicht, wohin er gelangt.
Wie du es behebst · Geben Sie dem Link sichtbaren Text oder ein aria-label / verborgenen Text, der das Ziel beschreibt (z. B. 'Warenkorb ansehen' statt eines bloßen Warenkorb-Icons).
Auf deiner Seite
Falsch ·<a href="#cart"><span aria-hidden="true">🛒</span></a>Richtig ·<a href="/winkelwagen" aria-label="Warenkorb ansehen"><svg>…</svg></a>WCAG wcag2a, wcag244, wcag412 · Technischer Name: Links must have discernible text · technische Quelle für deinen Entwickler
Erfordert manuelle Prüfung
- Schwerwiegend1× auf dieser Seite
Was es bedeutet · Text mit zu geringem Kontrast ist für sehbeeinträchtigte Menschen und bei hellem Sonnenlicht auf dem Smartphone unlesbar. Dies ist mit Abstand der häufigste EAA-Befund in Webshops.
Wie du es behebst · Machen Sie die Text- oder Hintergrundfarbe dunkler/heller, bis das Verhältnis mindestens 4,5:1 beträgt (3:1 bei großem Text). In Shopify: Theme-Einstellungen → Farben; passen Sie Button- und Textfarben einmal an, und die Änderung gilt für das gesamte Theme.
Auf deiner Seite
Falsch ·<h2>Get 10% off your first order</h2>WCAG wcag2aa, wcag143 · Technischer Name: Elements must meet minimum color contrast ratio thresholds · technische Quelle für deinen Entwickler
Warum das zählt
Der European Accessibility Act gilt seit dem 28. Juni 2025, keine künftige Pflicht, sondern geltendes Recht. Die Mitgliedstaaten müssen Sanktionen verhängen, die „wirksam, verhältnismäßig und abschreckend“ sind. Hinzu kommt: Jeder Besucher, der deine Website nicht nutzen kann, ist ein Kunde, der nicht bezahlt. Die gute Nachricht: Die maschinell sicheren Verstöße oben sind lösbar.
Was Nichteinhaltung kosten kann
- Niederlande, bis zu Zehntausenden Euro pro Verstoß plus Zwangsgeld; die ACM setzt aktiv durch und schrieb 2026 die schlechtesten Onlineshops an.
- Deutschland, bis zu 100.000 € (BFSG).
- Frankreich, bis zu 50.000 € pro Online-Dienst (Arcom).
- Spanien, 90.000 € tatsächlich gegen Vueling verhängt (bestätigt durch die Audiencia Nacional).
- 2024 wurden 1.023 Onlineshops mit einem Overlay-Widget verklagt, das Widget schützte sie nicht.
Unter dem EAA sind die ersten Durchsetzungen und Klagen 2025-2026 eine Tatsache; der Apparat steht und baut sich aus. Dies sind die gesetzlichen Höchstgrenzen.
Die Overlay-Falle
Widgets, die versprechen, deine Website mit einer Codezeile „zu 100 % barrierefrei“ zu machen, reparieren den zugrunde liegenden Code nicht, sie legen eine Schicht darüber, können neue Probleme verursachen und schützen dich nicht vor Klagen. Die US-Behörde FTC verhängte 2025 gegen einen bekannten Overlay-Anbieter ein Bußgeld von 1 Mio. $ wegen irreführender Compliance-Behauptungen. Wir machen das Gegenteil: Wir zeigen, was wirklich los ist und wie du es wirklich behebst.
Chat-Widget erkannt: Tidio
Ab dem 2. August 2026 muss sich ein KI-Chatbot beim ersten Kontakt als KI zu erkennen geben (EU AI Act, Artikel 50), ohne Ausnahme für kleine Unternehmen. Der Verstoß steht öffentlich auf deiner Website: ein Blick der Aufsichtsbehörde genügt. Ist dein Chat KI-gesteuert? Dann stelle sicher, dass dieser Hinweis aktiv ist.
Zum KI-Transparenz-CheckWas kostet es, das selbst zu pflegen?
Eine Schätzung auf Basis deines eigenen Scans, pass die Zahlen an deine eigene Situation an.
Die 12 Stellen auf dieser Seite kosten schätzungsweise 3 Stunden ≈ 270 € an Reparaturzeit.
Und das ist eine einmalige Behebung. Deine Website ändert sich ständig, ohne Überwachung schleichen sich immer wieder neue Fehler ein und es beginnt von vorn. Seviranta findet und überwacht das laufend, damit du die Arbeit gezielt und gleich richtig erledigst.
Wie deine Website gebaut ist, bestimmt den Aufwand: Mit wiederverwendbaren Komponenten und Vorlagen behebst du mehr Stellen auf einmal.
Deine Barrierefreiheitserklärung, automatisch erstellt
Aus einem vollständigen Audit erstellen wir deine gesetzlich erforderliche Barrierefreiheitserklärung, für die EU, die USA oder weltweit, bereit zur Veröffentlichung auf deiner Website. Erstell ein Konto, um sie zu generieren und herunterzuladen.
Konto erstellenSieh, was dieselbe Engine auf deiner Website findet.
Der kostenlose Scan prüft eine Seite deiner Website in voller Tiefe. Kein Konto, keine Kreditkarte, wir speichern nichts.