Theme Vivid: automatischer Barrierefreiheitstest

Am 29. September 2026 hat der AccessifyAI-Scanner den offiziellen Demo-Shop von Vivid 2.0.2 von Slash Themes auf 4 Seiten geprüft. Er hat 13 Arten von Befunden gefunden (insgesamt 311 Vorkommen). Für 8 der 12 WCAG-2.2-Kriterien, die dieser Index bewertet, hat er nichts gefunden.

Diese Ergebnisse stammen aus dem Theme-Demo. Inhalte, Apps und Anpassungen können Ihren Shop verändern. Prüfen Sie die URL Ihres eigenen Shops kostenlos.

Meinen Shop kostenlos prüfen

Ist Vivid barrierefrei?

Ein automatischer Test allein kann das nicht beantworten. Dieser zeigt 13 Arten von Befunden auf dem Demo-Shop von Vivid innerhalb der 12 Kriterien, die dieser Index bewertet, unten im Einzelnen. Inhalte, Apps und Einstellungen Ihres Shops bestimmen einen großen Teil des Ergebnisses. Von den 55 Kriterien der WCAG 2.2 auf den Stufen A und AA prüft der Scanner 15, dieser Index weist 12 aus, und die übrigen 40 muss ein Mensch prüfen.

Das ist keine Zertifizierung und keine rechtliche Bewertung.

Angaben zum Test

Entwickler: Slash Themes
Preis: 300 USD
Geprüfte Version: 2.0.2, veröffentlicht am 3. Oktober 2025
Stil: Vivid
Prüfdatum: 29. September 2026
Demo-Shop: the-vivid-theme.myshopify.com
Theme Store: Seite im Theme Store
Seiten: Startseite: geprüft, 155 Befunde
Kollektionsseite: geprüft, 64 Befunde
Produktseite: geprüft, 14 Befunde
Warenkorbseite: geprüft, 78 Befunde

Was der Test gefunden hat

Link ohne Namen

WCAG 2.2 2.4.4 Linkzweck (im Kontext), Stufe A

38 Vorkommen, gefunden auf: Startseite, Kollektionsseite, Warenkorbseite

Warum es für Kundinnen und Kunden zählt: Ein Screenreader sagt nur „Link“, man erfährt nicht, wohin er führt.
Wo es in einem Shopify-Theme meist steckt: Icon-Links im Header (Konto, Warenkorb), Social-Media-Icons im Footer, Links nur aus einem Bild auf Produktkarten und Kollektionskacheln.
Richtung für eine Korrektur: Geben Sie Icon-Links einen visuell verborgenen Text oder ein aria-label, zum Beispiel „Warenkorb“ oder „Instagram“. Bei einem Bildlink bekommt das Bild einen Alt-Text.
Beispiele aus dem Demo-Shop: a.color-swatch

Bild ohne alt-Attribut

WCAG 2.2 1.1.1 Nicht-Text-Inhalt, Stufe A

12 Vorkommen, gefunden auf: Startseite, Kollektionsseite, Produktseite, Warenkorbseite

Warum es für Kundinnen und Kunden zählt: Ein Screenreader überspringt das Bild oder liest den Dateinamen vor. Blinde Kundinnen und Kunden erfahren nicht, was das Produktfoto zeigt.
Wo es in einem Shopify-Theme meist steckt: Snippets für Produktkarten und Produktmedien, Bildbanner, Slideshow-Sektionen und Bild-mit-Text-Sektionen, manchmal auch das Logo im Header.
Richtung für eine Korrektur: Geben Sie den beim Bild gespeicherten Alt-Text aus, mit dem Produkt- oder Sektionstitel als Ersatz, und versehen Sie rein dekorative Bilder mit einem leeren alt="".
Beispiele aus dem Demo-Shop: img

Formularfeld ohne Beschriftung

WCAG 2.2 1.3.1 Info und Beziehungen, Stufe A

2 Vorkommen, gefunden auf: Kollektionsseite

Warum es für Kundinnen und Kunden zählt: Ohne Beschriftung sagt ein Screenreader nur „Eingabefeld“. Man erfährt nicht, ob E-Mail-Adresse, Menge oder Rabattcode gemeint ist.
Wo es in einem Shopify-Theme meist steckt: Newsletter-Anmeldung im Footer, Suchfeld im Header, Mengenfelder im Warenkorb, Preisfilter auf Kollektionsseiten.
Richtung für eine Korrektur: Verbinden Sie jedes Feld über for und id mit einem label-Element (es darf visuell verborgen sein) oder geben Sie ihm ein aria-label. Ein Platzhalter ersetzt keine Beschriftung.
Beispiele aus dem Demo-Shop: input#Filter-Price-GTE-3 (type="range")
input#Filter-Price-LTE-3 (type="range")

Auswahlliste ohne Beschriftung

WCAG 2.2 1.3.1 Info und Beziehungen, Stufe A

1 Vorkommen, gefunden auf: Kollektionsseite

Warum es für Kundinnen und Kunden zählt: Wer die Seite nicht sieht, weiß nicht, ob die Liste Größe, Farbe, Sortierung oder Land auswählt.
Wo es in einem Shopify-Theme meist steckt: Variantenauswahl auf der Produktseite, Sortierung auf Kollektionsseiten, Länder- und Sprachauswahl.
Richtung für eine Korrektur: Benennen Sie jede Auswahlliste mit einem label-Element (for und id) oder einem aria-label wie „Größe“ oder „Sortieren nach“.
Beispiele aus dem Demo-Shop: select#SortByMobile

Schaltfläche ohne Namen

WCAG 2.2 4.1.2 Name, Rolle, Wert, Stufe A

1 Vorkommen, gefunden auf: Produktseite

Warum es für Kundinnen und Kunden zählt: Man hört „Schaltfläche“, ohne zu erfahren, ob sie ein Menü schließt, etwas in den Warenkorb legt oder die Suche öffnet.
Wo es in einem Shopify-Theme meist steckt: Schaltflächen nur mit Icon: Schließen von Drawern, Pfeile von Slidern, Plus und Minus bei der Menge, Menü- und Suchschalter.
Richtung für eine Korrektur: Geben Sie der Schaltfläche ein aria-label oder einen visuell verborgenen Text und blenden Sie das Icon darin mit aria-hidden="true" aus.
Beispiele aus dem Demo-Shop: button#Popup_productClose

Klickbares Element, das weder Schaltfläche noch Link ist

WCAG 2.2 4.1.2 Name, Rolle, Wert, Stufe A

1 Vorkommen, gefunden auf: Produktseite

Warum es für Kundinnen und Kunden zählt: Ein div oder span mit Klick-Handler ist mit der Tab-Taste nicht erreichbar und wird nicht als klickbar angesagt.
Wo es in einem Shopify-Theme meist steckt: Eigene Farbfelder, Akkordeons, Tabs und Schnellansicht-Auslöser aus div- oder span-Elementen.
Richtung für eine Korrektur: Verwenden Sie für Aktionen ein button-Element und für Navigation einen Link.
Beispiele aus dem Demo-Shop: div#Product_quick-add-modal

aria-labelledby oder aria-describedby verweist auf ein fehlendes Element

WCAG 2.2 4.1.2 Name, Rolle, Wert, Stufe A

189 Vorkommen, gefunden auf: Startseite, Kollektionsseite, Warenkorbseite

Warum es für Kundinnen und Kunden zählt: Das Element sollte Namen oder Beschreibung von einem anderen Element übernehmen, das nicht auf der Seite ist. Der Screenreader hat nichts vorzulesen.
Wo es in einem Shopify-Theme meist steckt: Produktkarten, die auf Sale- oder Ausverkauft-Badges verweisen, die nur manchmal erscheinen, Fehlermeldungen in Formularen, Dialoge.
Richtung für eine Korrektur: Geben Sie den Verweis nur aus, wenn das Zielelement vorhanden ist, oder geben Sie das Zielelement immer aus.
Beispiele aus dem Demo-Shop: aria-labelledby → "StandardCardNoMediaLink-template--19738399146041__featured_collection_PmPrAW-7039834193977"
aria-labelledby → "NoMediaStandardBadge-template--19738399146041__featured_collection_PmPrAW-7039834193977"
aria-labelledby → "CardLink-template--19738399146041__featured_collection_PmPrAW-7039834193977"

Dieselbe id kommt mehrfach vor

WCAG 2.2 4.1.2 Name, Rolle, Wert, Stufe A

39 Vorkommen, gefunden auf: Startseite, Kollektionsseite, Produktseite, Warenkorbseite

Warum es für Kundinnen und Kunden zählt: Beschriftungen, Fehlermeldungen und ARIA-Verweise können auf das falsche Element zeigen, sodass ein Feld oder Bedienelement seinen Namen verliert.
Wo es in einem Shopify-Theme meist steckt: Sektionen, die doppelt auf einer Seite stehen, etwa Desktop- und Mobil-Header, Warenkorb-Drawer und Warenkorbseite, oder Länder- und Sprachauswahl in Header und Footer.
Richtung für eine Korrektur: Machen Sie erzeugte ids eindeutig, zum Beispiel indem Sie die Sektions-id anhängen.
Beispiele aus dem Demo-Shop: "title-7039834292281-template--19738399146041__featured_collection_PmPrAW", 2×
"quick-add-7039834292281-submit", 2×
"QuickAdd-7039834292281", 2×

Leere Überschrift

WCAG 2.2 1.3.1 Info und Beziehungen, Stufe A

9 Vorkommen, gefunden auf: Startseite, Produktseite

Warum es für Kundinnen und Kunden zählt: Ein Screenreader kündigt eine Überschrift an, in der nichts steht.
Wo es in einem Shopify-Theme meist steckt: Im Theme-Editor leer gelassene Überschriften-Blöcke oder Überschriften, die nur ein Icon enthalten.
Richtung für eine Korrektur: Geben Sie das Überschriften-Tag nicht aus, wenn die Einstellung leer ist.
Beispiele aus dem Demo-Shop: h2

Alt-Text ist ein Dateiname oder ein Platzhalterwort

WCAG 2.2 1.1.1 Nicht-Text-Inhalt, Stufe A

8 Vorkommen, gefunden auf: Startseite, Kollektionsseite, Produktseite, Warenkorbseite

Warum es für Kundinnen und Kunden zählt: Wer „IMG_2841.jpg“ oder „Bild“ vorgelesen bekommt, erfährt nichts über das Produkt.
Wo es in einem Shopify-Theme meist steckt: Meist Inhalt: Alt-Texte, die im Shopify-Admin für Produktmedien und Sektionsbilder eingetragen sind. Manche Themes greifen bei leerem Alt-Text auf den Dateinamen zurück.
Richtung für eine Korrektur: Beschreiben Sie das Bild im Admin, und lassen Sie das Theme bei leerem Alt-Text auf den Produkt- oder Sektionstitel zurückgreifen statt auf den Dateinamen.
Beispiele aus dem Demo-Shop: img

Überschriftenebenen überspringen eine Stufe

WCAG 2.2 1.3.1 Info und Beziehungen, Stufe A

2 Vorkommen, gefunden auf: Startseite, Produktseite

Warum es für Kundinnen und Kunden zählt: Wer sich über Überschriften durch eine Seite bewegt, erwartet eine saubere Verschachtelung. Ein Sprung von h2 auf h4 wirkt, als fehle etwas.
Wo es in einem Shopify-Theme meist steckt: Sektionsüberschriften, Titel in Produktkarten und Spaltenüberschriften im Footer, deren Ebene nach Schriftgröße gewählt wurde.
Richtung für eine Korrektur: Wählen Sie die Ebene nach dem Aufbau der Seite und steuern Sie die Größe über eine CSS-Klasse.
Beispiele aus dem Demo-Shop: h1 → h4
h2 → h4

Icon ohne Textalternative und ohne Kennzeichnung als Dekoration

WCAG 2.2 1.1.1 Nicht-Text-Inhalt, Stufe A

8 Vorkommen, gefunden auf: Startseite, Kollektionsseite, Produktseite, Warenkorbseite

Warum es für Kundinnen und Kunden zählt: Trägt das Icon eine Bedeutung, etwa eine Zahlungsart oder „kostenloser Versand“, fehlt sie im Screenreader. Ist es Dekoration, sollte es für Screenreader verborgen sein.
Wo es in einem Shopify-Theme meist steckt: Icon-Snippets, Zahlungs-Icons im Footer, Vertrauens- und Feature-Icons.
Richtung für eine Korrektur: Verbergen Sie dekorative Icons mit aria-hidden="true". Bedeutungstragende Icons bekommen role="img" und ein aria-label oder ein title-Element.
Was der Test sehen kann: Der Test kann dekorative und bedeutungstragende Icons nicht unterscheiden. Jeder dieser Befunde braucht einen kurzen Blick.
Beispiele aus dem Demo-Shop: svg.icon-hamburger
svg.close-icon

Mehr als eine h1-Überschrift auf der Seite

WCAG 2.2 1.3.1 Info und Beziehungen, Stufe A

1 Vorkommen, gefunden auf: Warenkorbseite

Warum es für Kundinnen und Kunden zählt: Bei zwei oder mehr Überschriften erster Ebene ist schwerer zu erkennen, welche die Seite benennt.
Wo es in einem Shopify-Theme meist steckt: Ein Logo, das auf jeder Seite in einem h1 steht, oder Sektionsüberschriften, die im Theme-Editor auf h1 gestellt werden können.
Richtung für eine Korrektur: Reservieren Sie h1 für den Haupttitel der Seite. Das Logo steht nur auf der Startseite in einem h1, Sektionen beginnen bei h2.

Bewertete Kriterien ohne Befund: 8 von 12

Ohne Befund heißt: Der automatische Test hat für das Kriterium auf diesen Seiten nichts gefunden. Mehrere dieser Kriterien lassen sich maschinell nur teilweise prüfen.

1.4.2 Audio-Steuerelement (Stufe A)
1.4.4 Textgröße ändern (Stufe AA)
2.4.1 Blöcke umgehen (Stufe A)
2.4.2 Seite mit Titel (Stufe A)
2.4.3 Fokus-Reihenfolge (Stufe A)
3.1.1 Sprache der Seite (Stufe A)
3.2.1 Bei Fokus (Stufe A)
3.3.8 Barrierefreie Authentifizierung (Minimum) (Stufe AA)

In diesem Index nicht bewertet

1.4.3 Kontrast (Minimum) (Stufe AA): braucht die gerenderte Seite mit ihren Stylesheets
2.4.11 Fokus nicht verdeckt (Minimum) (Stufe AA): braucht die gerenderte Seite mit ihren Stylesheets
2.5.8 Zielgröße (Minimum) (Stufe AA): braucht die gerenderte Seite mit ihren Stylesheets

Außerdem notiert, Stufe AAA

Die Stufe AAA geht über das hinaus, was die EN 301 549 verlangt, auf die sich EAA und BFSG stützen. Diese Punkte stehen hier der Vollständigkeit halber und werden oben nicht mitgezählt.

Link öffnet ohne Hinweis einen neuen Tab (3.2.5 Änderung auf Anfrage): 38

Was dieses Ergebnis nicht aussagt

Der Scanner prüft 15 der 55 Erfolgskriterien der WCAG 2.2 auf den Stufen A und AA, einige davon nur teilweise, und dieser Index weist 12 davon aus. Bedienung per Tastatur, sichtbarer Fokus, Untertitel, Fehlermeldungen und das meiste, was einen Checkout nutzbar macht, muss ein Mensch prüfen.
Kontrast (Minimum), Fokus nicht verdeckt und Zielgröße werden hier nicht bewertet: Sie brauchen die gerenderte Seite mit ihren Stylesheets, und dieser Test lädt keine Stylesheets. Ihre Befunde fließen in keine Zahl auf dieser Seite ein.
Er prüft den Demo-Shop im Zustand am Prüfdatum, mit Demo-Inhalten, Einstellungen und Apps. Ein Shop auf Basis desselben Themes kann mehr oder weniger Befunde haben.
Der Scanner liest das HTML, das der Server ausliefert, ohne Skripte auszuführen oder externe Stylesheets zu laden. Inhalte, die Skripte nach dem Laden einfügen, sind nicht Teil dieses Tests.
Es ist keine Zertifizierung und keine rechtliche Bewertung des Themes oder eines Shops, der es nutzt.

So testen wir

Lizenz der Daten: CC BY 4.0. Quellenangabe: AccessifyAI Shopify theme accessibility index, accessifyai.de

Prüfen Sie Ihren eigenen Shop

Ihr Shop hat eigene Inhalte, Apps und Einstellungen über dem Theme. Der kostenlose Scanner wendet dieselben Regeln auf Ihren Shop an und nennt zu jedem Befund das WCAG-Kriterium.

Shop kostenlos prüfen AccessifyAI im Shopify App Store

Für den Entwickler von Vivid

Wenn Sie eine Korrektur für einen dieser Befunde veröffentlicht haben oder ein Ergebnis für falsch halten, schreiben Sie an support@accessifyai.de mit „Vivid“ und der Versionsnummer. Wir prüfen den Demo-Shop erneut und aktualisieren diese Seite mit dem neuen Datum.

Weitere Themes von Slash Themes im Index

Alle Themes im Index