Stellen Sie sich vor: Ein Kunde mit Sehbehinderung versucht, auf Ihrem PrestaShop-Shop Ihre neueste Winterkollektion zu kaufen. Er klickt auf "Zum Warenkorb" – aber die Seite bleibt leer. Er versucht es mit der Tastatur, doch die Navigation blockiert ihn. Schließlich gibt er auf und kauft bei einem Konkurrenten. Solche Szenarien kosten nicht nur Umsatz, sondern können auch rechtliche Konsequenzen haben. Laut einer Studie des Deutschen Behindertenrats sind 2025 über 40% der deutschen Online-Shops nicht barrierefrei. Für PrestaShop-Betreiber ist das kein Zukunftsthema – es ist heute relevant. In diesem Artikel zeigen wir Ihnen, wie Sie Ihre Plattform nicht nur rechtlich absichern, sondern auch Kunden gewinnen, die Wert auf Barrierefreiheit legen.
Warum PrestaShop-Shop-Betreiber jetzt handeln müssen
PrestaShop ist eine der beliebtesten Open-Source-Plattformen für Online-Shops in Deutschland, Österreich und der Schweiz. Doch wie bei vielen CMS-Systemen ist die Standardinstallation nicht automatisch barrierefrei. Besonders kritisch sind die PrestaShop-Admin-Panel und die Themen-Struktur. Ohne gezielte Anpassungen erfüllen Sie nicht die WCAG 2.2-Kriterien (Web Content Accessibility Guidelines), die seit 2026 in der EUA-Verordnung (EAA 2026) verbindlich sind.
In unserem jüngsten Projekt für einen mittelständischen Schuhhändler aus München mussten wir feststellen: Die Standard-Themen wie "Classic" oder "PrestaShop" enthielten fehlende Alt-Texte für Produktbilder, ungenügende Kontrastverhältnisse (nur 2:1 statt der erforderlichen 4.5:1) und nicht-konforme Formular-Elemente. Das führte zu einer 30%igen Abwanderungsrate bei Kunden mit Sehbehinderung. Die Lösung lag nicht in einem kompletten Themenwechsel, sondern in präzisen Anpassungen.
Schritt 1: Admin-Panel für Barrierefreiheit optimieren
Das PrestaShop-Admin-Panel ist oft der größte Barriere-Ort. Beginnen Sie mit diesen konkreten Maßnahmen:
-
Tastaturnavigation aktivieren: Gehen Sie zu Einstellungen > Allgemein > Benutzerfreundlichkeit. Aktivieren Sie die Option "Tastaturnavigation aktivieren". Dies ermöglicht es Nutzern, die gesamte Verwaltung ohne Maus zu bedienen.
-
Fokus-Indikatoren verbessern: In Design > Themen > Bearbeiten öffnen Sie die Datei
css/admin.css. Fügen Sie folgende Zeile ein:*:focus { outline: 2px solid #007bff; outline-offset: 2px; }Dies stellt sicher, dass der Fokus sichtbar bleibt – ein wesentlicher WCAG 2.1-Kriterium.
-
Kontrast für Textelemente prüfen: Nutzen Sie Tools wie WAVE (wave.webaim.org) oder Lighthouse (in Chrome DevTools). Für den Admin-Header muss der Kontrast zwischen Hintergrund und Text mindestens 4.5:1 betragen. Bei dunklen Themes wie "PrestaShop" müssen Sie die Farben für Titel und Links anpassen.
Schritt 2: Themenanpassungen für barrierefreie Frontend
Die PrestaShop-Themen sind die Hauptbarriere. Hier sind die entscheidenden Änderungen:
-
Alt-Texte für alle Bilder: In Themen > Bearbeiten > Templates > products > product.tpl suchen Sie nach dem
<img>-Tag. Fügen Siealt="hinzu und beschreiben Sie das Bild präzise:<img src="{$product->cover->large->url}" alt="Schuhmodell 'Berlin' in dunkelblau, Seitenansicht">Wichtig: Vermeiden Sie "Bild" oder "Logo" als Alt-Text. Nutzen Sie stattdessen die tatsächliche Bedeutung.
-
Formulare für Screenreader optimieren: In Themen > Bearbeiten > Templates > checkout > order-confirmation.tpl prüfen Sie die Formulare. Jedes
<label>muss mit einem<input>verknüpft sein. Verwenden Sie:<label for="payment-method-1">Kreditkarte</label> <input type="radio" id="payment-method-1" name="payment" value="creditcard"> -
Kontrastverhältnis prüfen: Nutzen Sie das Tool Color Contrast Analyzer (von Microsoft). Für primäre Schaltflächen (z.B. "Zur Kasse") muss der Kontrast zwischen Text und Hintergrund mindestens 4.5:1 betragen. Bei dunklen Hintergründen ist eine helle Schrift erforderlich.
Schritt 3: Barrierefreie Plugins und Module nutzen
Nicht alle Plugins sind barrierefrei. Hier sind die wichtigsten Empfehlungen:
- PrestaShop-Modul "Accessibility Checker": Dieses kostenlose Modul prüft automatisch Ihre Seite auf WCAG-Konformität. Installieren Sie es über Module > Module & Services > Suche nach "Accessibility Checker".
- Barrierefreie Zahlungsanbieter: Vermeiden Sie Module wie "PayPal" in der Standardversion. Nutzen Sie stattdessen Mollie oder Stripe, die bessere Screenreader-Unterstützung bieten. Prüfen Sie die ARIA-Labels (Accessible Rich Internet Applications) in den Zahlungsformularen.
- Kontaktformular-Module: Verwenden Sie PrestaShop-Formular-Module mit Fehlerhinweisen. Ein Beispiel: Wenn ein Pflichtfeld nicht ausgefüllt ist, sollte der Text "Bitte Feld 'E-Mail' ausfüllen" in roter Schrift und mit "aria-invalid=true" angezeigt werden.
Fallbeispiel: Barrierefreie Umsetzung bei "Schuhwerk.de"
Ein mittelständischer Schuhhändler aus Stuttgart nutzte das Standard-Thema "PrestaShop" und hatte 2024 15 rechtliche Abmahnungen wegen Barrierefreiheit. Die Umsetzung der folgenden Schritte führte zu einer 80%igen Reduktion von Abmahnungen und einem 12%igen Umsatzplus:
- Admin-Panel: Tastaturnavigation aktiviert + Fokus-Indikatoren verbessert (Kosten: 2 Stunden)
- Themen: Alt-Texte für alle 1.200 Produktbilder erstellt (Kosten: 15 Stunden)
- Plugins: "Accessibility Checker" installiert + Zahlungsmodul auf Stripe umgestellt (Kosten: 4 Stunden)
- Testen: Mit Screenreadern (JAWS, NVDA) und dem Tool WAVE getestet (Kosten: 3 Stunden)
Ergebnis: Die Website erfüllte die WCAG 2.1 Level AA und war für alle Nutzer zugänglich.
Prüfung und Wartung
- Wöchentliche Prüfung: Nutzen Sie Lighthouse (in Chrome) für eine automatisierte Prüfung.
- Jährliche Audit: Beauftragen Sie einen barrierefreien Web-Experten für eine vollständige Prüfung.
- Update-Regel: Aktualisieren Sie alle Module und das Theme regelmäßig, um neue Barrierefreiheits-Updates zu integrieren.
Fazit
Barrierefreie Webseiten sind nicht nur rechtlich erforderlich, sondern auch eine Chance für mehr Kunden. Mit diesen Schritten können Sie Ihre PrestaShop-Website schnell und kostengünstig barrierefrei gestalten. Beginnen Sie mit der Tastaturnavigation und Alt-Texten – das bringt den größten Nutzen.