WCAG-2.2-Prüfbericht · Komplett mit Siegel

Barrierefreiheits-Prüfbericht (Komplett)

Muster-Boutique · 20. Juli 2026 · Prüfstandard: WCAG 2.2 A/AA (Basis EN 301 549)

Geprüfte Website: muster-boutique.ch

Siegel-Status: Noch nicht erteilt – Nach Behebung der unten aufgeführten Mängel und dem kostenlosen Re-Test wird das Siegel ausgestellt.

60/100Automatik-Score

Gesamtergebnis

Ihre Website ist auf einem guten Weg. Es bleiben einzelne Barrieren, die gezielt behoben werden sollten – der Detailteil zeigt jede mit Ort und Lösung.

2hoch (Automatik)

1mittel

0niedrig

7Stellen (Automatik)

Die Punktzahl bewertet nur den automatischen Scan. Für die von Hand geprüften Kriterien gibt es kein Punktesystem – sie werden aufgeführt und müssen für das Siegel mangelfrei sein. Aktuell 5 von Hand gefundene(r) Mangel (siehe Liste unten).

Gesamtübersicht

Geprüfte Seiten	3
Automatischer Scan	3 Regel(n) mit Verstoss an 7 Stelle(n)
Automatik-Score	60 / 100 (nur automatischer Scan)
Handgeprüfte Kriterien (WCAG 2.2 AA)	37 — 28 erfüllt, 4 n. z., 5 mit Mangel
Defekte Links (Qualitätshinweis)	1

Zur Punktzahl: Der Score von 0–100 bewertet ausschliesslich den automatischen Scan (Schwere und Anzahl der betroffenen Stellen; eigenes Modell, keine amtliche Norm). Für die von Hand geprüften Kriterien gibt es kein Punktesystem – sie werden einzeln aufgeführt und müssen für das Siegel mangelfrei sein (0 Mängel).

Geprüft wurden 3 Inhaltsseiten – automatisch und von Hand. Nicht geprüft werden eingebettete Dateien (PDF/Office) und Inhalte anderer Anbieter.

Wichtiger Hinweis: Dieser Bericht ist eine technische Prüfung nach WCAG 2.2 (Level AA) / EN 301 549 und keine Rechtsberatung, keine amtliche Zertifizierung und kein vollständiger Konformitätsnachweis. Geprüft werden ausschliesslich die aufgeführten Kriterien und Seiten; ein bestandener Bericht garantiert keine gesetzliche Konformität. Für eine rechtsverbindliche Bewertung wenden Sie sich an eine anerkannte Fachstelle.

Ein automatisierter Scan deckt die maschinell testbaren Kriterien ab (u. a. Farbkontrast, Beschriftungen, Seitentitel); die Handkontrolle die Punkte, die eine Maschine nicht sehen kann (u. a. Tastaturbedienung, Fokus, Fehlermeldungen).

Zu den Nummern: „WCAG 2.2“ ist die Version des Standards. Zahlen wie 1.1.1, 2.4.7 oder 4.1.3 sind die einzelnen Erfolgskriterien darin – keine Versionsnummern. Die erste Ziffer steht für eines der vier Prinzipien: 1 Wahrnehmbar, 2 Bedienbar, 3 Verständlich, 4 Robust.

Gefundene Mängel (8)

Jeder Kasten ist eine Aufgabe: oben das Problem und warum es zählt, darunter die Fundstellen und der Lösungsweg. Zeigt ein Punkt nur Beispiel-Fundstellen, hat er überall dieselbe Ursache – einmal zentral behoben (Vorlage/Theme), sind alle erledigt. Die vollständige Stellenliste für Ihren Webmaster liegt als CSV bei.

Sichtbarer Fokus

hohe Priorität

Das Problem: Wer per Tastatur navigiert, muss sehen, wo er gerade ist. Ein wegdesignter Fokusrahmen macht die Seite unbedienbar.

Betroffene Stellen: 3 · WCAG: 2.4.7 · Prüfart: Handprüfung

Gefunden auf: 3 Seiten — / /produkte /kontakt

Konkret gefunden: Auf allen Seiten ist der Tastatur-Fokus unsichtbar (outline:none im Stylesheet).

So beheben Sie das: Deutlich sichtbaren Fokus-Indikator sicherstellen (Rahmen/Umrandung mit gutem Kontrast); den Standard-Fokus nicht per CSS entfernen.

Vorher*:focus { outline: none; }

Nachher

:focus-visible {
  outline: 2px solid #1a5276;
  outline-offset: 2px;
}

Bilder ohne Alternativtext

hohe Priorität

Das Problem: 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: 3 · WCAG: 1.1.1 · Prüfart: Automatischer Scan

Gefunden auf: 2 Seiten — /produkte /

Konkret gefunden:<img src="/p/sommerkleid.jpg" class="pimg"><img src="/p/tasche.jpg" class="pimg">

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="Trinkflasche, 750 ml">

Regel-Referenz: image-alt

Links ohne aussagekräftigen Text

hohe Priorität

Das Problem: Manche Links haben keinen aussagekräftigen Namen – entweder nur generische Texte wie 'Hier', 'Klick mich' oder 'Mehr', oder es ist ein Bild-Link, dessen Bild keinen Alternativtext (alt) hat. Screenreader- und Sprachsteuerungs-Nutzer erfahren dann nicht, wohin der Link führt.

Betroffene Stellen: 2 · WCAG: 2.4.4, 4.1.2 · Prüfart: Automatischer Scan

Gefunden auf: 1 Seite — /

Konkret gefunden:<a href="/agb">hier</a><a href="/produkte">mehr</a>

So beheben Sie das: Links mit sprechendem Text beschriften (z.B. statt 'Mehr' lieber 'Datenschutzerklärung lesen'). Bei Bild-Links dem Bild einen alt-Text geben oder dem Link ein aria-label. Der Name muss auch isoliert verständlich sein.

Vorher<a href="/x"><img src="icon.png"></a>

Nachher

<a href="/x" aria-label="Home">
  <img src="icon.png" alt="Home">
</a>

Regel-Referenz: link-name

Bedienung per Tastatur

hohe Priorität

Das Problem: Viele Menschen mit motorischen Einschränkungen oder Screenreader nutzen keine Maus. Was nur per Maus geht, ist für sie gesperrt.

Betroffene Stellen: 1 · WCAG: 2.1.1/2.1.4 · Prüfart: Handprüfung

Gefunden auf: 1 Seite — /produkte

Konkret gefunden: Filter „Grösse / Farbe“ öffnet sich nur per Mausklick; per Tab/Enter nicht erreichbar.

So beheben Sie das: Alle Funktionen (Menü, Filter, Warenkorb, Kasse) per Tab/Enter/Pfeiltasten erreichbar und bedienbar machen. Eigene Widgets mit Tastatur-Unterstützung versehen.

Vorher

<div class="filter"
  onclick="open()">Size</div>

Nachher

<button type="button" class="filter">
  Size
</button>

Klare Fehlermeldungen

hohe Priorität

Das Problem: Wird ein Formularfehler nur rot markiert, wissen blinde Nutzer nicht, was falsch ist – die Bestellung scheitert.

Betroffene Stellen: 1 · WCAG: 3.3.1/3.3.3 · Prüfart: Handprüfung

Gefunden auf: 1 Seite — /kontakt

Konkret gefunden: Pflichtfelder werden bei Fehleingabe nur rot umrandet, ohne Text.

So beheben Sie das: Fehler in Textform benennen, dem Feld zuordnen und einen konkreten Korrekturhinweis geben (nicht nur Farbe).

Vorher<input class="is-error">

Nachher

<input aria-invalid="true"
  aria-describedby="e-mail">
<span id="e-mail">Enter a valid
  e-mail address</span>

Statusmeldungen werden angesagt

hohe Priorität

Das Problem: Meldungen wie „In den Warenkorb gelegt“ erscheinen oft nur optisch. Screenreader-Nutzer bemerken sie nicht und sind verunsichert.

Betroffene Stellen: 1 · WCAG: 4.1.3 · Prüfart: Handprüfung

Gefunden auf: 1 Seite — /produkte

Konkret gefunden: Nach dem Klick erscheint kurz ein grüner Hinweis, der vom Screenreader nicht vorgelesen wird.

So beheben Sie das: Status-/Erfolg-/Fehlermeldungen als aria-live-Region ausgeben, damit der Screenreader sie automatisch ansagt.

Vorher<div class="toast">Added to cart</div>

Nachher

<div class="toast" role="status"
  aria-live="polite">Added to cart</div>

Inhalte bei Hover/Fokus

mittlere Priorität

Das Problem: Aufklapp-Menüs und Tooltips, die sofort verschwinden oder nicht schließbar sind, sperren Nutzer mit Vergrößerung oder Tastatur aus.

Betroffene Stellen: 2 · WCAG: 1.4.13 · Prüfart: Handprüfung

Gefunden auf: 2 Seiten — / /produkte

Konkret gefunden: Das Aufklapp-Menü schliesst, sobald die Maus den Rand berührt; mit Vergrösserung nicht bedienbar.

So beheben Sie das: Hover-/Fokus-Inhalte müssen bedienbar bleiben (Maus darf hinüberfahren), per Esc schließbar sein und dürfen den Inhalt nicht dauerhaft verdecken.

Vorher

.menu:hover .sub {
  display: block;
}

Nachher

.menu:hover .sub,
.menu:focus-within .sub {
  display: block;  /* + Esc closes */
}

Überschriften in falscher Reihenfolge

mittlere Priorität

Das Problem: Ü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: 2 · WCAG: Best Practice · Prüfart: Automatischer Scan

Gefunden auf: 2 Seiten — / /kontakt

Konkret gefunden:<h3>Neu eingetroffen</h3><h4>Öffnungszeiten</h4>

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>
<h4>…</h4>

Nachher

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

Regel-Referenz: heading-order

Geprüfte Punkte ohne Beanstandung (32)

Diese Kriterien wurden – automatisch und von Hand – geprüft und sind in Ordnung. „n. z.“ (nicht zutreffend) heisst: Dieses Merkmal gibt es auf Ihrer Website nicht, es ist darum nichts zu prüfen – der Grund steht jeweils dahinter.

Wahrnehmbar

✓ Alternativtexte für Bilder Kriterium 1.1.1 erfüllt

✓ Überschriften-Gliederung Kriterium 1.3.1 erfüllt

✓ Sinnvolle Lesereihenfolge Kriterium 1.3.2 erfüllt

✓ Nicht nur sensorische Hinweise Kriterium 1.3.3 erfüllt

✓ Information nicht nur über Farbe Kriterium 1.4.1 erfüllt

✓ Zoom & Umbruch bis 400 % Kriterium 1.4.10 erfüllt

– Untertitel & Audiodeskription Kriterium 1.2.1–1.2.5Keine Audio- oder Video-Inhalte auf der Website. n. z.

✓ Kontrast von Bedienelementen & Grafiken Kriterium 1.4.11 erfüllt

✓ Text auf 200 % vergrößerbar Kriterium 1.4.4 erfüllt

✓ Text-Abstände anpassbar Kriterium 1.4.12 erfüllt

✓ Kein Text in Bildern Kriterium 1.4.5 erfüllt

✓ Eingabezweck erkennbar (Autofill) Kriterium 1.3.5 erfüllt

✓ Hoch- und Querformat nutzbar Kriterium 1.3.4 erfüllt

Bedienbar

✓ Keine Tastaturfalle Kriterium 2.1.2 erfüllt

✓ Sprunglink zum Inhalt Kriterium 2.4.1 erfüllt

✓ Logische Fokus-Reihenfolge Kriterium 2.4.3 erfüllt

✓ Erkennbares Linkziel Kriterium 2.4.4 erfüllt

✓ Fokus nicht verdeckt Kriterium 2.4.11 erfüllt

– Alternative zu Ziehbewegungen Kriterium 2.5.7Keine Zieh-/Schiebe-Bedienung (z. B. Slider) vorhanden. n. z.

✓ Ausreichend große Klickziele Kriterium 2.5.8 erfüllt

✓ Mehrere Wege zum Ziel Kriterium 2.4.5 erfüllt

✓ Sichtbarer Name = Vorlese-Name Kriterium 2.5.3 erfüllt

✓ Zeitlimits & bewegte Inhalte Kriterium 2.2.1/2.2.2/2.3.1/1.4.2 erfüllt

✓ Aussagekräftige Überschriften & Labels Kriterium 2.4.6 erfüllt

✓ Zeiger-Bedienung: Gesten, Abbruch, Bewegung Kriterium 2.5.1/2.5.2/2.5.4 erfüllt

Verständlich

✓ Keine überraschenden Änderungen Kriterium 3.2.1/3.2.2 erfüllt

✓ Bestellung vorher prüfbar Kriterium 3.3.4 erfüllt

– Barrierefreie Anmeldung Kriterium 3.3.8Kein Kundenkonto / keine Anmeldung – nur Gast-Bestellung. n. z.

– Sprache einzelner Abschnitte Kriterium 3.1.2Keine fremdsprachigen Abschnitte im Inhalt. n. z.

✓ Konsistente Navigation & Kennzeichnung Kriterium 3.2.3/3.2.4 erfüllt

✓ Keine doppelte Eingabe Kriterium 3.3.7 erfüllt

✓ Hilfe konsistent platziert Kriterium 3.2.6 erfüllt

Technische Hinweise – defekte Links (1)

Diese Links führen ins Leere. Das ist kein Barrierefreiheits-Kriterium und blockiert das Siegel nicht – aber ein Qualitätsmangel, der sich lohnt zu beheben. (Externe Links werden nicht geprüft.)

https://muster-boutique.ch/lookbook-2024

Status 404

Verlinkt auf: /

So kommen Sie zum Siegel

1. Mängel abarbeiten – zuerst die mit hoher Priorität. Die beiliegende Fundstellen-CSV listet jede einzelne Stelle für Ihren Webmaster.

2. Kostenlosen Re-Test starten im Portal. Automatisch prüfbare Mängel kontrollieren wir monatlich, die von Hand zu beurteilenden Punkte einmal jährlich bei der Verlängerung.

3. Siegel erhalten: Sind alle Punkte erledigt, stellen wir das Siegel „Geprüft nach WCAG 2.2 AA“ aus (12 Monate gültig) und Sie binden es mit einem fertigen Schnipsel in Ihren Footer ein.

Ein Teil des Erlöses jedes Prüfberichts unterstützt Organisationen für Menschen mit Behinderung.

Grundlage: WCAG 2.2 (Level AA) / EN 301 549. „Hohe Priorität“ betrifft Funktionen, die für manche Nutzergruppen den Zugang ganz verhindern. Dieser Bericht dokumentiert das Ergebnis zum genannten Zeitpunkt und ist keine amtliche Zertifizierung und kein vollständiger Konformitätsnachweis.

Greenlight Check · greenlight-check.de · Prüfbericht nach WCAG 2.2 AA