year00 Barrierefreiheits-Fix

Beispiel-Shop: Dawn mit typischen Anpassungen (von uns nachgestellt)

Dawn, so wie Shopify es ausliefert, hat auf denselben fünf Seiten 0 automatisch gefundene Befunde. Alle Befunde in diesem Beispiel stammen aus den Anpassungen, die wir nachgestellt haben.

Änderungsprotokoll

Dawn 16.0.0 mit nachgestellten Anpassungen · theme-dawn-demo.myshopify.com · erstellt am 26.10.2026 · Auftrag BEISPIEL

Bitte zuerst lesen

Keine Rechtsberatung, keine Konformitätsaussage. Ob das BFSG auf Ihr Unternehmen anwendbar ist, ist eine Rechtsfrage, die dieser Service nicht beantwortet.
Wir ändern nur Code, der die Barrierefreiheit betrifft, nie Layout oder Shop-Logik. Jede Änderung steht im Änderungsprotokoll.
Automatisiert erstellt mit axe-core und festen Korrekturregeln. Kein KI-Modell, kein menschliches Gutachten.
Ihre hochgeladene Theme-Datei und alle Ergebnisse löschen wir 30 Tage nach der Lieferung.

Messung vorher und nachher

248Vorher

3Nachher

99 %entfernt

23Änderungen

Erstattungsregel: weniger als 50 % entfernt bedeutet volle Erstattung. Ergebnis hier: 99 % entfernt, also keine Erstattung fällig.

So messen wir: dieselbe Software in derselben Version (axe-core, WCAG 2.1 A und AA), dieselben fünf Seiten, vorher im Live-Shop, nachher in Ihrer Vorschau. Gezählt wird jede Stelle, an der eine Regel verletzt ist. Befunde in Apps von Drittanbietern zählen nicht mit, weil wir deren Code nicht ändern können. Wir führen sie getrennt auf.

Nachbau: Seiten des öffentlichen Dawn-Demo-Shops, einmal mit den von uns nachgestellten Anpassungen (vorher) und einmal mit den Einstellungen und dem Code der korrigierten Kopie (nachher). Keine Messung in einem echten Kunden-Shop.

Gezählte Befunde je Regel

Regel	Vorher	Nachher
Text mit zu wenig Kontrast	233	3
Links ohne erkennbaren Namen („Klick ins Leere“)	10	0
Zoomen ist gesperrt	5	0

Gemessene Seiten

Seite	Adresse	Vorher	Nachher
Startseite	https://theme-dawn-demo.myshopify.com/	51	0
Kategorie	https://theme-dawn-demo.myshopify.com/collections/bags	67	0
Produktseite	https://theme-dawn-demo.myshopify.com/products/small-convertible-flex-bag-cappuccino	56	3
Warenkorb	https://theme-dawn-demo.myshopify.com/cart	38	0
Kontakt	https://theme-dawn-demo.myshopify.com/pages/contact-us	36	0

Nach der Korrektur noch gemessen

Die restlichen Stellen sind Beschriftungen ausverkaufter Varianten. Dawn zeigt sie absichtlich blass und durchgestrichen (Textfarbe mit 60 % Deckkraft), damit „ausverkauft“ auf einen Blick erkennbar ist. Das steht fest im Theme-Code, nicht im Farbschema. Wir ändern sie nicht automatisch, weil sich damit die Bedeutung der Anzeige ändert. Wenn Sie das ändern möchten: Der Wert steht in assets/component-product-variant-picker.css.

Text mit zu wenig Kontrast: 3 Stellen · Produktseite: <label for="template--15968258293849__main-1-1"> Clay<span class="visually-hidden la

Änderungen (23)

Kontrast im Farbschema

WCAG 1.4.3 Kontrast (Minimum) · EN 301 549 9.1.4.3 · config/settings_data.json, Zeile 9

Farbschema scheme-1: Text (bis 70 % Deckkraft) auf Hintergrund #FFFFFF. Kontrast 2.21 : 1 → 4.65 : 1. Farbton bleibt, nur die Helligkeit ändert sich.

#8C8C8C → #393939

- "text": "#8C8C8C",
+ "text": "#393939",

Kontrast im Farbschema

WCAG 1.4.3 Kontrast (Minimum) · EN 301 549 9.1.4.3 · config/settings_data.json, Zeile 12

Farbschema scheme-1: Links (85 % Deckkraft) und zweite Buttons auf Hintergrund #FFFFFF. Kontrast 2.10 : 1 → 4.66 : 1. Farbton bleibt, nur die Helligkeit ändert sich.

#D19A7A → #874F2F

- "secondary_button_label": "#D19A7A",
+ "secondary_button_label": "#874F2F",

Kontrast im Farbschema

WCAG 1.4.3 Kontrast (Minimum) · EN 301 549 9.1.4.3 · config/settings_data.json, Zeile 11

Farbschema scheme-1: Button-Text auf Button-Farbe #E9A88F. Kontrast 2.01 : 1 → 4.63 : 1. Farbton bleibt, nur die Helligkeit ändert sich.

#FFFFFF → #474747

- "button_label": "#FFFFFF",
+ "button_label": "#474747",

Kontrast im Farbschema

WCAG 1.4.3 Kontrast (Minimum) · EN 301 549 9.1.4.3 · config/settings_data.json, Zeile 20

Farbschema scheme-2: Text (bis 70 % Deckkraft) auf Hintergrund #F6F1EC. Kontrast 1.95 : 1 → 4.64 : 1. Farbton bleibt, nur die Helligkeit ändert sich.

#9A9189 → #37332F

- "text": "#9A9189",
+ "text": "#37332F",

Kontrast im Farbschema

WCAG 1.4.3 Kontrast (Minimum) · EN 301 549 9.1.4.3 · config/settings_data.json, Zeile 23

Farbschema scheme-2: Links (85 % Deckkraft) und zweite Buttons auf Hintergrund #F6F1EC. Kontrast 1.85 : 1 → 4.62 : 1. Farbton bleibt, nur die Helligkeit ändert sich.

#C9A27E → #714F2F

- "secondary_button_label": "#C9A27E",
+ "secondary_button_label": "#714F2F",

Kontrast im Farbschema

WCAG 1.4.3 Kontrast (Minimum) · EN 301 549 9.1.4.3 · config/settings_data.json, Zeile 22

Farbschema scheme-2: Button-Text auf Button-Farbe #E9A88F. Kontrast 2.01 : 1 → 4.63 : 1. Farbton bleibt, nur die Helligkeit ändert sich.

#FFFFFF → #474747

- "button_label": "#FFFFFF",
+ "button_label": "#474747",

Name für Icon-Link oder Icon-Button

WCAG 2.4.4 Linkzweck (im Kontext) · EN 301 549 9.2.4.4 · layout/theme.liquid, Zeile 404

Icon-Link ohne Namen bekommt aria-label „WhatsApp“.

- <a href="https://wa.me/494012345678" class="whatsapp-float" target="_blank" rel="noopener"><svg width="28" height="28" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="10"/></svg></a>
+ <a aria-label="WhatsApp" href="https://wa.me/494012345678" class="whatsapp-float" target="_blank" rel="noopener"><svg width="28" height="28" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="10"/></svg></a>

Name für Icon-Link oder Icon-Button

WCAG 2.4.4 Linkzweck (im Kontext) · EN 301 549 9.2.4.4 · sections/header.liquid, Zeile 302

Icon-Link ohne Namen bekommt aria-label „Instagram“ (über die Übersetzungen des Themes).

- <a href="https://www.instagram.com/musterladen" class="header__icon link focus-inset" target="_blank" rel="noopener">{{ 'icon-instagram.svg' | inline_asset_content }}</a>
+ <a aria-label="{{ 'general.social.links.instagram' | t }}" href="https://www.instagram.com/musterladen" class="header__icon link focus-inset" target="_blank" rel="noopener">{{ 'icon-instagram.svg' | inline_asset_content }}</a>

Ersatztext für Bilder Vorschlag – bitte prüfen

WCAG 1.1.1 Nicht-Text-Inhalt · EN 301 549 9.1.1.1 · sections/cart-notification-product.liquid, Zeile 8

Fehlt der Alternativtext im Shopify-Admin, steht hier künftig der Titel (item.product.title). Vorschlag – bitte prüfen. Besser: eigene Alternativtexte pflegen.

- alt="{{ item.image.alt | escape }}"
+ alt="{{ item.image.alt | default: item.product.title | escape }}"

Ersatztext für Bilder Vorschlag – bitte prüfen

WCAG 1.1.1 Nicht-Text-Inhalt · EN 301 549 9.1.1.1 · sections/main-article.liquid, Zeile 38

Fehlt der Alternativtext im Shopify-Admin, steht hier künftig der Titel (article.title). Vorschlag – bitte prüfen. Besser: eigene Alternativtexte pflegen.

- alt="{{ article.image.alt | escape }}"
+ alt="{{ article.image.alt | default: article.title | escape }}"

Ersatztext für Bilder Vorschlag – bitte prüfen

WCAG 1.1.1 Nicht-Text-Inhalt · EN 301 549 9.1.1.1 · sections/main-cart-items.liquid, Zeile 100

Fehlt der Alternativtext im Shopify-Admin, steht hier künftig der Titel (item.product.title). Vorschlag – bitte prüfen. Besser: eigene Alternativtexte pflegen.

- alt="{{ item.image.alt | escape }}"
+ alt="{{ item.image.alt | default: item.product.title | escape }}"

Ersatztext für Bilder Vorschlag – bitte prüfen

WCAG 1.1.1 Nicht-Text-Inhalt · EN 301 549 9.1.1.1 · sections/main-collection-banner.liquid, Zeile 39

Fehlt der Alternativtext im Shopify-Admin, steht hier künftig der Titel (collection.title). Vorschlag – bitte prüfen. Besser: eigene Alternativtexte pflegen.

- alt="{{ collection.image.alt | escape }}"
+ alt="{{ collection.image.alt | default: collection.title | escape }}"

Ersatztext für Bilder Vorschlag – bitte prüfen

WCAG 1.1.1 Nicht-Text-Inhalt · EN 301 549 9.1.1.1 · sections/predictive-search.liquid, Zeile 149

Fehlt der Alternativtext im Shopify-Admin, steht hier künftig der Titel (product.title). Vorschlag – bitte prüfen. Besser: eigene Alternativtexte pflegen.

- alt="{{ product.featured_media.alt | escape }}"
+ alt="{{ product.featured_media.alt | default: product.title | escape }}"

Ersatztext für Bilder Vorschlag – bitte prüfen

WCAG 1.1.1 Nicht-Text-Inhalt · EN 301 549 9.1.1.1 · snippets/article-card.liquid, Zeile 64

Fehlt der Alternativtext im Shopify-Admin, steht hier künftig der Titel (article.title). Vorschlag – bitte prüfen. Besser: eigene Alternativtexte pflegen.

- alt="{{ article.image.src.alt | escape }}"
+ alt="{{ article.image.src.alt | default: article.title | escape }}"

Ersatztext für Bilder Vorschlag – bitte prüfen

WCAG 1.1.1 Nicht-Text-Inhalt · EN 301 549 9.1.1.1 · snippets/card-collection.liquid, Zeile 70

Fehlt der Alternativtext im Shopify-Admin, steht hier künftig der Titel (card_collection.title). Vorschlag – bitte prüfen. Besser: eigene Alternativtexte pflegen.

- alt="{{ card_collection.featured_image.alt | escape }}"
+ alt="{{ card_collection.featured_image.alt | default: card_collection.title | escape }}"

Ersatztext für Bilder Vorschlag – bitte prüfen

WCAG 1.1.1 Nicht-Text-Inhalt · EN 301 549 9.1.1.1 · snippets/card-product.liquid, Zeile 78

Fehlt der Alternativtext im Shopify-Admin, steht hier künftig der Titel (card_product.title). Vorschlag – bitte prüfen. Besser: eigene Alternativtexte pflegen.

- alt="{{ card_product.featured_media.alt | escape }}"
+ alt="{{ card_product.featured_media.alt | default: card_product.title | escape }}"

Ersatztext für Bilder Vorschlag – bitte prüfen

WCAG 1.1.1 Nicht-Text-Inhalt · EN 301 549 9.1.1.1 · snippets/card-product.liquid, Zeile 101

Fehlt der Alternativtext im Shopify-Admin, steht hier künftig der Titel (card_product.title). Vorschlag – bitte prüfen. Besser: eigene Alternativtexte pflegen.

- alt="{{ card_product.media[1].alt | escape }}"
+ alt="{{ card_product.media[1].alt | default: card_product.title | escape }}"

Ersatztext für Bilder Vorschlag – bitte prüfen

WCAG 1.1.1 Nicht-Text-Inhalt · EN 301 549 9.1.1.1 · snippets/card-product.liquid, Zeile 489

Fehlt der Alternativtext im Shopify-Admin, steht hier künftig der Titel (card_product.title). Vorschlag – bitte prüfen. Besser: eigene Alternativtexte pflegen.

- alt="{{ card_product.featured_media.alt | escape }}"
+ alt="{{ card_product.featured_media.alt | default: card_product.title | escape }}"

Ersatztext für Bilder Vorschlag – bitte prüfen

WCAG 1.1.1 Nicht-Text-Inhalt · EN 301 549 9.1.1.1 · snippets/cart-drawer.liquid, Zeile 142

Fehlt der Alternativtext im Shopify-Admin, steht hier künftig der Titel (item.product.title). Vorschlag – bitte prüfen. Besser: eigene Alternativtexte pflegen.

- alt="{{ item.image.alt | escape }}"
+ alt="{{ item.image.alt | default: item.product.title | escape }}"

Ersatztext für Bilder Vorschlag – bitte prüfen

WCAG 1.1.1 Nicht-Text-Inhalt · EN 301 549 9.1.1.1 · snippets/product-media.liquid, Zeile 33

Fehlt der Alternativtext im Shopify-Admin, steht hier künftig der Titel (product.title). Vorschlag – bitte prüfen. Besser: eigene Alternativtexte pflegen.

- alt="{{ media.alt | escape }}"
+ alt="{{ media.alt | default: product.title | escape }}"

Ersatztext für Bilder Vorschlag – bitte prüfen

WCAG 1.1.1 Nicht-Text-Inhalt · EN 301 549 9.1.1.1 · snippets/product-media.liquid, Zeile 75

Fehlt der Alternativtext im Shopify-Admin, steht hier künftig der Titel (product.title). Vorschlag – bitte prüfen. Besser: eigene Alternativtexte pflegen.

- alt="{{ media.preview_image.alt | escape }}"
+ alt="{{ media.preview_image.alt | default: product.title | escape }}"

Zoom wieder erlaubt

WCAG 1.4.4 Textgröße ändern · EN 301 549 9.1.4.4 · layout/theme.liquid, Zeile 6

Zoom-Sperre entfernt (maximum-scale / user-scalable=no).

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

Sichtbarer Fokus-Rahmen

WCAG 2.4.7 Fokus sichtbar · EN 301 549 9.2.4.7 · assets/base.css, Zeile 3640

Fokus-Rahmen für Tastatur ergänzt (.header__icon:focus).

- .header__icon:focus { outline: none; }
+ .header__icon:focus { outline: none; } .header__icon:focus-visible { outline: 0.2rem solid rgba(var(--color-foreground), 0.5); outline-offset: 0.3rem; }

Nicht geändert

Diese Stellen haben wir bewusst nicht angefasst:

sections/main-cart-items.liquid Zeile 240: Button ohne Namen, Zweck nicht eindeutig. Bitte von Hand benennen.
sections/email-signup-banner.liquid Zeile 36: Bild aus den Abschnitts-Einstellungen (section.settings.image). Alternativtext bitte im Theme-Editor pflegen oder als Deko belassen.
sections/footer.liquid Zeile 143: Bild aus den Abschnitts-Einstellungen (block.settings.image). Alternativtext bitte im Theme-Editor pflegen oder als Deko belassen.

Bitte von Hand prüfen

Bedienung mit der Tastatur in Menü, Filtern und Pop-ups
Ob die Alternativtexte zum Bild passen (unsere Vorschläge sind markiert)
Text in Bannerbildern
Den Checkout, den Shopify selbst darstellt
Videos: Untertitel und Audiodeskription

Methode

axe-core 4.14.0, WCAG 2.1 A und AA, Chromium 156.0.8078.4, Bildschirmbreite 1280 Pixel, Animationen reduziert, Seite einmal ganz durchgescrollt. robots.txt beachtet, mindestens drei Sekunden Pause zwischen zwei Seitenaufrufen. Korrekturregeln: contrast-schemes, link-names, img-alt, viewport, lang, field-labels, focus-outline.