Stellen Sie sich vor, ein potenzieller Kunde möchte ein Produkt in Ihrem Wix-Shop kaufen, kann aber den „In den Warenkorb“-Button nicht finden, weil sein Screenreader den Button ignoriert. Oder ein Nutzer mit motorischen Einschränkungen kann den Checkout nicht abschließen, weil die Tastaturnavigation an einer unsichtbaren Barriere hängen bleibt.
Diese Szenarien sind keine theoretischen Probleme. Mit dem Inkrafttreten des European Accessibility Act (EAA) im Jahr 2026 werden diese Barrieren zu rechtlichen Risiken. Für Wix-Nutzer bedeutet das: Barrierefreiheit ist kein „Nice-to-have“ mehr, sondern eine Voraussetzung für den legalen Handel in der EU.
In diesem Artikel zeigen wir Ihnen, wie Sie Ihren Wix-Store technisch so optimieren, dass er den WCAG 2.2 Standards entspricht. Wir konzentrieren uns auf konkrete Workflows innerhalb des Wix-Dashboards und des Editors.
Warum August 2026 die Deadline für Wix-Händler ist
Der European Accessibility Act (EAA) verpflichtet Unternehmen dazu, digitale Produkte und Dienstleistungen barrierefrei zu gestalten. Da viele E-Commerce-Plattformen wie Wix flexibel sind, liegt die Verantwortung für die korrekte Umsetzung oft beim Shop-Betreiber.
Wenn Ihr Shop nicht konform ist, riskieren Sie nicht nur Bußgelder, sondern auch den Ausschluss von Kunden mit Behinderungen. Wir haben gesehen, dass viele Händler glauben, Wix erledige alles automatisch. Das stimmt nur teilweise; die Art, wie Sie Elemente anordnen und beschriften, entscheidet über die Konformität.
1. Korrekte Verwendung von Alt-Texten in der Wix-Mediathek
Der Alt-Text (Alternativtext) ist die erste Verteidigungslinie für die Barrierefreiheit. Er beschreibt Bildern, was sie zeigen, für Nutzer, die sie nicht sehen können.
In Wix ist es leicht, Bilder hochzuladen, aber oft wird das Feld für den Alternativtext leer gelassen. Ein Bild von einer „roten Lederhandtasche“ sollte nicht einfach „Bild123“ heißen.
So setzen Sie es in Wix um:
- Gehen Sie in Ihr Wix-Dashboard zur Mediathek.
- Wählen Sie das entsprechende Produktbild aus.
- Klicken Sie auf „Alternativtext bearbeiten“.
- Schreiben Sie eine präzise Beschreibung (z. B. „Nahaufnahme einer roten Lederhandtasche mit goldenem Verschluss“).
Vermeiden Sie es, Wörter wie „Bild von“ zu verwenden, da Screenreader dies bereits automatisch vorlesen.
2. Implementierung von ARIA-Labels für benutzerdefinierte Buttons
Wix erlaubt es Ihnen, fast jedes Element zu stylen. Dabei entstehen oft Probleme mit den ARIA-Labels (Accessible Rich Internet Applications). Diese Labels geben dem Screenreader zusätzliche Informationen über die Funktion eines Elements.
Wenn Sie einen Button erstellen, der nur ein Icon zeigt (z. B. ein Einkaufswagen-Symbol), weiß ein Screenreader ohne ARIA-Label nicht, was dieser Button tut.
Die Lösung in Wix:
Nutzen Sie die „Text-Eigenschaften“ oder, falls Sie das Velo by Wix (ehemals Corvid) nutzen, fügen Sie ARIA-Attribute hinzu. Wenn Sie keine Programmierkenntnisse haben, stellen Sie sicher, dass jeder Button einen sichtbaren oder zumindest im Code hinterlegten Text hat, der die Aktion beschreibt (z. B. „In den Warenkorb legen“).
3. Tastaturnavigation ohne „Fallen“
Ein entscheidender Test für Barrierefreiheit ist die Navigation allein mit der Tab-Taste. Viele Wix-Designs enthalten „Keyboard Traps“, bei denen der Fokus in einem Element (wie einem Slider oder einem Pop-up) gefangen bleibt.
Überprüfen Sie Ihren Shop regelmäßig: Können Sie durch alle Menüpunkte, Produktfilter und den Checkout navigieren, ohne die Maus zu benutzen?
Checkliste für die Tastaturnavigation:
- Der Fokus-Rahmen (Focus Indicator) muss deutlich sichtbar sein.
- Alle interaktiven Elemente müssen mit der Tab-Taste erreichbar sein.
- Pop-ups müssen mit der „Esc“-Taste geschlossen werden können.
4. Kontrastverhältnisse bei Produktbeschreibungen
Ein häufiger Fehler in Wix-Stores ist die Verwendung von hellgrauer Schrift auf weißem Hintergrund. Dies verletzt die WCAG-Richtlinien für Kontrastverhältnisse.
Für normalen Text ist ein Kontrastverhältnis von mindestens 4,5:1 erforderlich. In Wix können Sie dies im Design-Modus unter „Text-Design“ prüfen.
Praktischer Tipp:
Nutzen Sie kostenlose Tools wie den WebAIM Contrast Checker. Kopieren Sie die Hex-Codes Ihrer Schriftfarben und Hintergrundfarben aus dem Wix-Editor hinein, um sicherzustellen, dass sie den Standard erfüllen.
5. Strukturierte Überschriften (H1-H6)
Screenreader-Nutzer navigieren oft durch eine Seite, indem sie von Überschrift zu Überschrift springen. Wenn Sie in Wix Überschriften nur nach ihrer Größe wählen, anstatt nach ihrer logischen Hierarchie, wird die Seite unlesbar.
Eine Seite sollte nur eine H1 haben (meist der Produktname). Unterüberschriften sollten logisch folgen (H2 für Merkmale, H3 für Details).
So korrigieren Sie die Hierarchie in Wix:
- Markieren Sie die Überschrift im Editor.
- Klicken Sie auf das „T“-Symbol (Text-Design).
- Wählen Sie unter „Format“ die korrekte Überschriftsebene aus, anstatt nur die Schriftgröße manuell zu ändern.
6. Barrierefreie Formulare im Checkout
Der Checkout-Prozess ist die kritischste Stelle Ihres Shops. Wenn ein Formularfeld nicht korrekt beschriftet ist, brechen Nutzer den Kauf ab.
Jedes Eingabefeld in Wix muss ein assoziiertes <label> haben. Wenn Sie benutzerdefinierte Formulare über Apps oder Velo erstellen, stellen Sie sicher, dass die Fehlermeldungen auch für Screenreader zugänglich sind.
Wichtiger Hinweis: Wenn ein Nutzer ein Feld falsch ausfüllt, muss die Fehlermeldung nicht nur rot leuchten (Farbenblindheit!), sondern auch einen Text enthalten, der das Problem erklärt.
7. Optimierung von Videoinhalten
Videos sind großartig für das Marketing, aber ohne Untertitel sind sie für Gehörlose unzugänglich. Wix bietet integrierte Video-Player, aber die Barrierefreiheit hängt von Ihrem Content ab.
Anforderungen für Videos:
- Untertitel (Captions): Jedes Video muss Untertitel haben.
- Transkripte: Bieten Sie ein schriftliches Transkript unter dem Video an.
- Audio-Beschreibung: Für komplexe visuelle Informationen sollte eine Audio-Beschreibung vorhanden sein.
8. Vermeidung von automatischen Animationen
Animationen können für Menschen mit epileptischen Anfällen oder motorischen Störungen problematisch sein. In Wix können Sie oft wählen, ob Animationen beim Laden der Seite automatisch starten.
Stellen Sie sicher, dass keine blinkenden Elemente vorhanden sind, die schneller als drei Mal pro Sekunde wechseln. Deaktivieren Sie unnötige „Auto-Play“-Funktionen für Banner oder Slider.
9. Screenreader-optimierte Menüstrukturen
Das Hauptmenü Ihres Wix-Shops muss logisch aufgebaut sein. Wenn Sie zu viele Untermenüs verwenden, kann dies die Navigation für Screenreader-Nutzer extrem erschweren.
Best Practice:
- Halten Sie die Menüstruktur flach.
- Nutzen Sie klare, prägnante Begriffe (z. B. „Sale“ statt „Unsere exklusiven Angebote für diesen Monat“).
- Stellen Sie sicher, dass die „Dropdown“-Menüs korrekt als solche gekennzeichnet sind.
Die Rolle von KI bei der Barrierefreiheit
Manuelle Audits sind zeitaufwendig und fehleranfällig. Hier können moderne Technologien helfen. Während viele „Overlay-Widgets“ nur oberflächlich arbeiten, setzen Lösungen wie Accessio.ai an der Wurzel an.
Im Gegensatz zu einfachen Overlays, die oft Probleme mit der Funktionalität verursachen, hilft Accessio.ai, Barrierefreiheitslücken direkt im Code zu identifizieren und zu beheben. Dies ist besonders wichtig für komplexe Wix-Setups, bei denen Standard-Widgets nicht ausreichen.
Vergleich: Manuelle vs. KI-gestützte Optimierung
| Merkmal | Manuelle Prüfung | KI-gestützte Lösung (z.B. Accessio.ai) |
|---|---|---|
| Geschwindigkeit | Langsam (Tag/Wochen) | Schnell (Minuten/Stunden) |
| Genauigkeit | Abhängig vom Experten | Hoch (Scannt den gesamten Code) |
| Skalierbarkeit | Schwierig bei vielen Produkten | Einfach für den gesamten Shop |
| Tiefe | Fokus auf sichtbare Elemente | Behebt Probleme auf Code-Ebene |
Häufig gestellte Fragen (FAQ)
Macht Wix meinen Shop automatisch barrierefrei?
Nein. Wix bietet die Werkzeuge und eine grundlegende Struktur, aber die Platzierung von Elementen, die Wahl der Farben und das Hochladen von Bildern mit korrekten Alt-Texten liegen in Ihrer Verantwortung.
Was passiert, wenn ich die EAA-Vorgaben bis 2026 nicht einhalte?
Sie könnten rechtliche Schritte von Kunden oder Verbraucherschutzorganisationen riskieren. Zudem verlieren Sie einen signifikanten Teil der Bevölkerung, die auf Hilfsmittel angewiesen ist.
Wie oft sollte ich meinen Shop auf Barrierefreiheit prüfen?
Jedes Mal, wenn Sie eine neue Seite hinzufügen, ein neues Produkt hochladen oder das Design ändern, sollten Sie eine kurze Prüfung durchführen. Ein umfassendes Audit sollte mindestens einmal pro Quartal stattfinden.
Key Takeaways
- Rechtliche Pflicht: Der European Accessibility Act (EAA) macht Barrierefreiheit bis August 2026 zur Pflicht für E-Commerce.
- Alt-Texte sind Pflicht: Jedes Produktbild in Ihrer Wix-Mediathek benötigt eine präzise Beschreibung.
- Kontrast und Hierarchie: Achten Sie auf ein Kontrastverhältnis von 4,5:1 und eine logische H1-H6 Struktur.
- Tastaturnavigation: Ihr Shop muss ohne Maus vollständig bedienbar sein.
- Technologie nutzen: Tools wie Accessio.ai können helfen, komplexe Code-Probleme schneller zu lösen als manuelle Audits.
Next Steps
- Audit durchführen: Gehen Sie Ihren Shop heute mit der Tab-Taste durch. Wo bleiben Sie hängen?
- Mediathek bereinigen: Vergeben Sie in dieser Woche Alt-Texte für Ihre Top-20-Produkte.
- Kontrast prüfen: Nutzen Sie einen Checker für Ihre Hauptfarben im Header und bei den Buttons.
- Professionelle Hilfe: Wenn Sie unsicher sind, ob Ihr Wix-Store konform ist, ziehen Sie eine spezialisierte Prüfung durch oder nutzen Sie KI-gestützte Tools zur Fehlerbehebung.