Schwer
WCAG 1.4.3
Aufwand mittel
226 Fundstellen auf 20 Seiten
Zu geringer Farbkontrast bei Texten
Text hebt sich nicht genug vom Hintergrund ab. Nötig ist ein Kontrastverhältnis von mindestens 4,5:1, bei großer Schrift (ab 24 px bzw. 18,7 px fett) von 3:1.
Warum das wichtig ist
Menschen mit Sehschwäche, Farbsehschwäche sowie viele ältere Kundinnen und Kunden können Preise, Hinweise und Buttons schlecht lesen. Das betrifft auch alle, die das Smartphone im Sonnenlicht nutzen.
So beheben Sie es
- Ermitteln Sie die betroffenen Farbpaare aus dem Bericht (Vordergrund, Hintergrund, gemessener Wert).
- Dunkeln Sie hellgraue Texte ab oder passen Sie die Hintergrundfarbe an, bis 4,5:1 erreicht ist (prüfbar z. B. mit dem WebAIM Contrast Checker).
- Prüfen Sie besonders Rabatt-Badges, Streichpreise, Platzhaltertexte, Fußzeilen und weiße Schrift auf Markenfarben.
- Legen Sie bei Text auf Bildern eine abdunkelnde Fläche oder einen einfarbigen Hintergrund hinter den Text.
- Halten Sie die korrigierten Farben im Styleguide fest, damit neue Inhalte sie übernehmen.
/* Vorher: Kontrast 2,3:1 auf Weiß */
.price--compare { color: #aaaaaa; }
/* Nachher: Kontrast 4,5:1 auf Weiß */
.price--compare { color: #767676; }
ShopifyPassen Sie Farben im Theme-Editor unter Theme-Einstellungen > Farben an; in Dawn und Horizon gelten sie pro Farbschema. Prüfen Sie jedes verwendete Farbschema einzeln, auch für Ankündigungsleiste, Badges und Footer.
Fundstellen anzeigen (12 von 226)
.rich-text__heading auf /<h2 class="rich-text__heading rte inline-richtext h1 scroll-trigger animate--slide-in scroll-trigger--offscreen" data-cascade="" style="--animation-order: 1;">
Obsessive Attention. Intelligent Effort.
</h2>.collage-wrapper-title auf /<h2 class="collage-wrapper-title inline-richtext h2 scroll-trigger animate--slide-in scroll-trigger--offscreen">
Back in stock!
</h2>.card--extend-height.card.card--standard > .card__content > .card__information > h3 > .full-unstyled-link[href$="bags"] auf /<a href="/collections/bags" class="full-unstyled-link">#CardLink--6920733851737 auf /<a href="/products/mini-eddy-cappuccino" id="CardLink--6920733851737" class="full-unstyled-link" aria-labelledby="CardLink--6920733851737 Badge--6920733851737">
Mini Eddy
</a>.card--extend-height.card.card--standard > .card__content > .card__information > .card-information > .price > .price__container > .price__regular > .price-item--regular.price-item auf /<span class="price-item price-item--regular">
$375.00 CAD
</span>.card--extend-height.card.card--standard > .card__content > .card__information > h3 > .full-unstyled-link[href$="shoes"] auf /<a href="/collections/shoes" class="full-unstyled-link">.footer-block__newsletter > .footer-block__heading.inline-richtext auf /<h2 class="footer-block__heading inline-richtext">Subscribe to our emails</h2>.newsletter-form__field-wrapper > .field > label auf /<label class="field__label" for="NewsletterForm--sections--15968258162777__footer">
Email
</label>#FooterCountryLabel auf /<h2 class="caption-large text-body" id="FooterCountryLabel">Country/region</h2>button[aria-controls="FooterCountry-country-results"] > span auf /<span>Canada |
CAD
$</span>.copyright__content:nth-child(1) auf /<small class="copyright__content">© 2026, <a href="/" title="">theme-dawn-demo</a></small>a[title=""] auf /<a href="/" title="">theme-dawn-demo</a>
Schwer
BFSG
Aufwand gering
1 Fundstelle auf 1 Seite
Keine Informationen zur Barrierefreiheit verlinkt
Auf der Startseite haben wir keinen Link zu einer Erklärung oder zu Informationen zur Barrierefreiheit gefunden. Das BFSG verlangt, dass Sie diese Informationen leicht auffindbar bereitstellen.
Warum das wichtig ist
Nach § 14 BFSG in Verbindung mit Anlage 3 müssen Sie beschreiben, wie Ihr Shop die Anforderungen erfüllt. Fehlt diese Information, ist das ein leicht prüfbarer formaler Mangel, den Marktüberwachung und Abmahner zuerst sehen.
So beheben Sie es
- Legen Sie eine eigene Seite "Barrierefreiheit" oder "Erklärung zur Barrierefreiheit" an.
- Beschreiben Sie dort den Stand der Barrierefreiheit, bekannte Einschränkungen und eine Kontaktmöglichkeit für Rückmeldungen.
- Nennen Sie die zuständige Marktüberwachungsbehörde (MLBF in Magdeburg).
- Verlinken Sie die Seite im Footer neben Impressum und Datenschutz.
- Nutzen Sie den Entwurf am Ende dieses Berichts als Ausgangspunkt.
ShopifyOnlineshop > Seiten > Seite hinzufügen, danach unter Onlineshop > Navigation das Footer-Menü um die neue Seite ergänzen.
Fundstellen anzeigen (1)
footer auf /Auf der Startseite wurde kein Link zu Informationen zur Barrierefreiheit gefunden.
Mittel
Best Practice
Aufwand gering
2 Fundstellen auf 2 Seiten
Seite ohne Hauptüberschrift (h1)
Die Seite enthält keine Überschrift der ersten Ebene (h1), die den Inhalt der Seite benennt.
Warum das wichtig ist
Screenreader-Nutzende springen häufig zuerst zur h1, um schnell zu erfahren, worum es auf der Seite geht. Fehlt sie, kostet die Orientierung Zeit.
So beheben Sie es
- Geben Sie jeder Seite genau eine h1, die den Seiteninhalt beschreibt (Produktname, Kategoriename, Seitentitel).
- Verwenden Sie auf der Startseite die erste Banner-Überschrift als h1 oder ergänzen Sie eine visuell versteckte h1.
- Prüfen Sie auch Sonderseiten wie Suche, Warenkorb und Kundenkonto.
<!-- Startseite ohne sichtbaren Seitentitel -->
<h1 class="visually-hidden">Musterladen: Nachhaltige Mode für Damen und Herren</h1>
ShopifyDawn setzt auf Produkt- und Kollektionsseiten den Titel als h1, auf der Startseite das Logo bzw. den Shopnamen. Fehlt die h1, prüfen Sie die Header-Section oder ändern Sie das Überschriften-Tag der ersten Section im Liquid-Code auf h1.
Fundstellen anzeigen (1 von 2)
html auf /pages/lookbook-summer<html class="js" lang="en" style="--header-height: 85px;">
Mittel
Best Practice
Aufwand mittel
1 Fundstelle auf 1 Seite
Übersprungene Überschriftenebenen
Die Überschriften überspringen Ebenen, z. B. von h2 direkt auf h4. Die Gliederung der Seite ist dadurch nicht logisch.
Warum das wichtig ist
Screenreader-Nutzende orientieren sich über die Überschriftenstruktur. Fehlende Ebenen lassen vermuten, dass Inhalte fehlen, und erschweren die Navigation.
So beheben Sie es
- Legen Sie die Ebenen nach Inhalt fest: eine h1 pro Seite, darunter h2 für Hauptabschnitte und h3 für Unterabschnitte.
- Steuern Sie die Schriftgröße über CSS-Klassen, nicht über die Wahl der Überschriftenebene.
- Verwenden Sie Überschriften-Tags nicht für reine Gestaltung, z. B. bei Footer-Spalten oder Badges.
- Prüfen Sie die Struktur mit einer Browser-Erweiterung zur Überschriftenanzeige (z. B. HeadingsMap).
<!-- Vorher -->
<h2>Neuheiten</h2>
<h4 class="card-title">Leinenhemd</h4>
<!-- Nachher -->
<h2>Neuheiten</h2>
<h3 class="card-title">Leinenhemd</h3>
ShopifyIn vielen Themes steuert die Einstellung zur Überschriftengröße nur die Optik; das HTML-Tag ist im Liquid-Code der Section fest hinterlegt. Passen Sie das Tag unter Onlineshop > Themes > Code bearbeiten in der betreffenden Section bzw. im Snippet (z. B. card-product.liquid) an.
Fundstellen anzeigen (1)
.blog-articles__article.article.animate--slide-in:nth-child(1) > .article-card-wrapper.card-wrapper.underline-links-hover > .card.article-card.card--standard > .card__content > .card__information > h3 auf /blogs/news<h3 class="card__heading h2">
<a href="/blogs/news/the-mlouye-origin-story" class="full-unstyled-link">
The Mlouye origin story
</a>
</h3>
