Befunde im Detail
Sortiert nach Schweregrad und Anzahl betroffener Elemente.
1. Bilder ohne Alternativtext
Kritisch
image-alt · 6 betroffene Elemente
WCAG-Kriterien: 1.1.1 Nicht-Text-Inhalte
Betroffene Seiten
- Startseite https://demo.nordlicht-taschen.example/index.html – 6 Elemente
Was bedeutet das für Nutzer?
Screenreader können den Inhalt dieser Bilder nicht wiedergeben und lesen stattdessen nichts oder den Dateinamen vor. Blinde Nutzerinnen und Nutzer erfahren so nicht, was ein Produktbild, Logo oder Banner zeigt.
Empfehlung
Jedem inhaltlich relevanten Bild einen kurzen, beschreibenden alt-Text geben; rein dekorative Bilder erhalten ein leeres alt="". Wichtig ist, dass das Theme den gepflegten Text auch tatsächlich ausgibt.
- Shopware: Alt-Texte in der Medienverwaltung pflegen; das Theme gibt sie über das Media-Objekt aus.
- Shopify: Alt-Text am Produktbild im Admin setzen; im Liquid-Template image.alt ausgeben.
- WooCommerce: Alternativtext in der Mediathek pflegen; Theme sollte wp_get_attachment_image() nutzen.
Beispiele aus dem Shop
Selektor: #rucksaecke > img
HTML: <img src="data:image/svg+xml;u..." width="400" height="400">
Selektor: #umhaengetaschen > img
2. Schaltflächen ohne zugänglichen Namen
Kritisch
button-name · 3 betroffene Elemente
WCAG-Kriterien: 4.1.2 Name, Rolle, Wert
Betroffene Seiten
- Startseite https://demo.nordlicht-taschen.example/index.html – 1 Element
- Produktseite https://demo.nordlicht-taschen.example/produkt/2041-rucksack-fjell-24 – 1 Element
- Warenkorb https://demo.nordlicht-taschen.example/warenkorb – 1 Element
Was bedeutet das für Nutzer?
Schaltflächen wie Menü, Suche, Schließen oder Slider-Pfeile haben keinen Namen. Screenreader-Nutzer hören nur „Schalter“ und können die Funktion nicht erkennen.
Empfehlung
Jeder Schaltfläche einen aussagekräftigen Text oder ein aria-label geben (z. B. aria-label="Menü öffnen"). Bei Slidern und Popups von Drittanbietern ggf. Plugin-Einstellungen oder ein kleines Template-Override nutzen.
Beispiele aus dem Shop
Selektor: .search > button[type="submit"]
HTML: <button type="submit"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2b2b" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-4-4"></path>
3. ARIA-Rolle ohne erforderliche Kindelemente
Kritisch
aria-required-children · 1 betroffenes Element
WCAG-Kriterien: 1.3.1 Info und Beziehungen
Betroffene Seiten
- Startseite https://demo.nordlicht-taschen.example/index.html – 1 Element
Was bedeutet das für Nutzer?
Ein Container behauptet per ARIA, z. B. eine Liste, ein Menü oder eine Tab-Leiste zu sein, enthält aber nicht die vorgeschriebenen Einträge. Screenreader-Nutzer erhalten eine fehlerhafte Struktur.
Empfehlung
Entweder die erforderlichen Kind-Rollen ergänzen (z. B. role="tab" in role="tablist") oder die ARIA-Rolle des Containers entfernen. Häufig betroffen: Slider, Mega-Menüs und Filter-Widgets.
Beispiele aus dem Shop
Selektor: .usp
HTML: <div class="usp" role="list">
<div>Kostenloser Versand ab 49 €</div>
<div>Klimaneutraler Versand mit DHL GoGreen</div>
<div>30 Tage Rückgabere
4. Formularfelder ohne Beschriftung
Kritisch
label · 1 betroffenes Element
WCAG-Kriterien: 4.1.2 Name, Rolle, Wert
Betroffene Seiten
- Startseite https://demo.nordlicht-taschen.example/index.html – 1 Element
Was bedeutet das für Nutzer?
Eingabefelder (z. B. Suche, Newsletter, Menge) haben keine programmatisch verknüpfte Beschriftung. Screenreader sagen nur „Eingabefeld“ an, und ein Platzhaltertext verschwindet beim Tippen.
Empfehlung
Jedes Feld mit einem <label for="…"> verknüpfen oder – wenn kein sichtbarer Text gewünscht ist – mit aria-label versehen. Platzhalter allein reichen nicht.
- Shopware: Betroffene Twig-Blöcke im eigenen Theme überschreiben.
- Shopify: Die betreffenden Liquid-Snippets (z. B. Newsletter-, Suchformular) anpassen.
- WooCommerce: Template-Overrides im Child-Theme oder Einstellungen des Formular-Plugins nutzen.
Beispiele aus dem Shop
Selektor: input[type="email"]
HTML: <input type="email" name="email" autocomplete="email" required="">
5. Zu geringer Farbkontrast bei Texten
Ernst
color-contrast · 12 betroffene Elemente
WCAG-Kriterien: 1.4.3 Kontrast (Minimum)
Betroffene Seiten
- Startseite https://demo.nordlicht-taschen.example/index.html – 8 Elemente
- Produktseite https://demo.nordlicht-taschen.example/produkt/2041-rucksack-fjell-24 – 2 Elemente
- Warenkorb https://demo.nordlicht-taschen.example/warenkorb – 2 Elemente
Was bedeutet das für Nutzer?
Texte heben sich nicht ausreichend vom Hintergrund ab. Menschen mit Sehschwäche, ältere Kundinnen und Kunden oder alle, die bei Sonnenlicht am Smartphone einkaufen, können Preise, Hinweise oder Buttons schlecht lesen.
Empfehlung
Textfarben so anpassen, dass ein Kontrastverhältnis von mindestens 4,5:1 (große Schrift 3:1) erreicht wird. Meist genügt es, wenige zentrale Farbvariablen zu ändern – häufig betroffen sind graue Hilfstexte, Footer, Platzhalter und Sale-Badges.
- Shopware: In den Theme-Einstellungen bzw. den SCSS-Variablen des eigenen Themes anpassen.
- Shopify: Im Theme-Editor unter „Farben“ bzw. in den Farbschemata anpassen.
- WooCommerce: Im Customizer oder per CSS im Child-Theme anpassen.
Beispiele aus dem Shop
Selektor: #rucksaecke > .body > .btn-cart[type="button"]
HTML: <button class="btn-cart" type="button">In den Warenkorb</button>
Selektor: #umhaengetaschen > .body > .btn-cart[type="button"]
6. Links ohne erkennbaren Namen
Ernst
link-name · 6 betroffene Elemente
WCAG-Kriterien: 2.4.4 Linkzweck (im Kontext) · 4.1.2 Name, Rolle, Wert
Betroffene Seiten
- Startseite https://demo.nordlicht-taschen.example/index.html – 2 Elemente
- Produktseite https://demo.nordlicht-taschen.example/produkt/2041-rucksack-fjell-24 – 2 Elemente
- Warenkorb https://demo.nordlicht-taschen.example/warenkorb – 2 Elemente
Was bedeutet das für Nutzer?
Links, die nur aus einem Icon oder Bild bestehen (Social Media, Logo, Warenkorb), werden vom Screenreader nur als „Link“ ohne Ziel angesagt. Nutzer wissen nicht, wohin der Link führt.
Empfehlung
Icon-Links mit einem aria-label (z. B. „Zum Warenkorb“) oder visuell verstecktem Text versehen und das Icon selbst mit aria-hidden="true" ausblenden.
Beispiele aus dem Shop
Selektor: a[href$="instagram"]
HTML: <a href="/social/instagram"><svg viewBox="0 0 24 24"><path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm5 5a5 5 0 1 0 0 10 5 5 0 0
Selektor: a[href$="pinterest"]
7. Klickflächen zu klein
Ernst
target-size · 4 betroffene Elemente
WCAG-Kriterien: 2.5.8 Zielgröße (Minimum)
Betroffene Seiten
- Warenkorb https://demo.nordlicht-taschen.example/warenkorb – 4 Elemente
Was bedeutet das für Nutzer?
Klickbare Elemente sind kleiner als 24 × 24 Pixel oder liegen zu dicht beieinander. Menschen mit motorischen Einschränkungen und viele Touch-Nutzer treffen sie schwer oder tippen versehentlich daneben.
Empfehlung
Mindestgröße bzw. Abstand von 24 × 24 CSS-Pixeln sicherstellen, z. B. über Padding oder min-width/min-height. Häufig betroffen: Slider-Punkte, Social-Icons, Mengen-Plus/Minus und Footer-Links.
Beispiele aus dem Shop
Selektor: tr:nth-child(1) > td:nth-child(3) > .qtycell > .stepper > .step[type="button"]:nth-child(1)
HTML: <button type="button" class="step" aria-label="Menge Rucksack Fjell 24 verringern">−</button>
Selektor: tr:nth-child(1) > td:nth-child(3) > .qtycell > .stepper > .step[type="button"]:nth-child(4)
8. Links im Fließtext nur durch Farbe erkennbar
Ernst
link-in-text-block · 1 betroffenes Element
WCAG-Kriterien: 1.4.1 Benutzung von Farbe
Betroffene Seiten
- Produktseite https://demo.nordlicht-taschen.example/produkt/2041-rucksack-fjell-24 – 1 Element
Was bedeutet das für Nutzer?
Links im Text unterscheiden sich nur durch die Farbe vom umgebenden Text. Menschen mit Farbsehschwäche erkennen sie nicht als Link.
Empfehlung
Links im Fließtext zusätzlich unterstreichen (text-decoration: underline) oder anderweitig nicht-farblich hervorheben. Das ist meist eine einzige CSS-Regel im Theme.
Beispiele aus dem Shop
Selektor: .inline
HTML: <a class="inline" href="/pflege">hier klicken</a>