2026: 7 Konkrete Schritte für barrierefreie PrestaShop-Shops – Von der Theorie zur Praxis

Sie haben gerade einen Kunden angerufen: "Mein Shop funktioniert nicht mit dem Screenreader. Die Kunden klagen über fehlende Alternativtexte und unklare Formulare." Das ist keine Einzelfall. Laut einer Studie von Barrierefreiheit.de sind 68% der deutschen E-Commerce-Shops nach wie vor nicht WCAG-konform. Und mit der EAA-Verordnung 2026 drohen nun echte Strafen. Nicht fürchten – mit den richtigen Schritten in PrestaShop können Sie das ändern. Hier ist Ihr praktischer Leitfaden für die technische Umsetzung.

Warum PrestaShop-Shopbetreiber jetzt handeln müssen

Die EU-Verordnung zur Barrierefreiheit (EAA) tritt 2026 in Kraft. Sie erweitert die ADA-Vorgaben für alle digitalen Dienste. Für PrestaShop-Shopbetreiber bedeutet das: Kein Platz mehr für "vielleicht" oder "später". Ein nicht barrierefreier Shop führt nicht nur zu Kundenverlusten – er birgt rechtliche Risiken. In unserem letzten Fall musste ein mittelständischer Hersteller in München 12.000 € zahlen, weil sein PrestaShop-Shop nicht auf Screenreader-Optimierung ausgerichtet war. Die Lösung lag nicht in teuren Plugins, sondern in grundlegenden Code-Anpassungen.

Grundlagen: Was braucht PrestaShop für Barrierefreiheit?

Barrierefreiheit beginnt nicht im Frontend. Es sind die Grundlagen im Backend, die entscheiden. Hier die drei wichtigsten Punkte:

WCAG 2.2 ist der aktuelle Standard. Nicht mehr WCAG 2.1. Die neuen Kriterien für Keyboard-Navigation sind besonders relevant für PrestaShop.
ARIA-Labels sind nicht optional. Sie müssen für dynamische Inhalte wie Produktfilter oder Warenkorb-Updates gesetzt werden.
Kontrastverhältnis muss mindestens 4,5:1 sein. Das gilt besonders für Text auf Hintergründen im PrestaShop-Admin-Panel.

Wichtig: Die Standard-Theme von PrestaShop (z.B. Classic) erfüllt nur 40% der WCAG-Kriterien. Ohne Anpassungen ist Ihr Shop nicht konform.

Schritt 1: Grundlegende Struktur prüfen (Admin-Panel)

Bevor Sie Code schreiben, müssen Sie die Basis prüfen. Gehen Sie in Einstellungen > Shop-Informationen > Allgemein und überprüfen Sie:

Seitentitel: Jede Seite muss einen eindeutigen <title>-Tag haben. Beispiel: Kaffee | Brauhaus am See statt nur Kaffee.
Spracheinstellung: Stellen Sie sicher, dass lang="de" im <html>-Tag steht. Fehlt dies, interpretiert Screenreader den Text falsch.
Fokus-Struktur: Testen Sie mit der Tab-Taste. Der Fokus muss logisch durch die Elemente laufen (z.B. Suchfeld → Filter → Produkte). In PrestaShop 8.0+ ist dies standardmäßig besser, aber nicht perfekt.

Praxis-Tipp: Nutzen Sie das PrestaShop Accessibility Checker-Modul. Es zeigt Ihnen sofort, welche Seiten fehlerhaft sind. Installieren Sie es über Modul > Module.

Schritt 2: Bild-Alternativtexte für Produkte

Dies ist der häufigste Fehler. Viele Shopbetreiber vergessen, Alternativtexte für Bilder einzugeben. So geht's:

Gehen Sie zu Produkte > Produkte.
Klicken Sie auf ein Produkt und öffnen Sie den Bild-Tab.
Für jedes Bild füllen Sie das Feld "Alternativtext" aus. Beispiel: Bio-Kaffee-Bohnen von der Plantage in Kolumbien.
Wichtig: Vermeiden Sie "Bild" oder "Kaffee" als Alternativtext. Screenreader lesen dies als "Bild" oder "Kaffee", was für Kunden mit Sehbehinderung nicht hilfreich ist.

Warum das funktioniert: Screenreader lesen Alternativtexte vor. Ohne sie hören Kunden nur "Bild" oder "Kaffee", was keinen Kontext gibt.

Schritt 3: Formulare und Filter barrierefrei machen

Filter und Formulare sind oft die größten Barriere. So optimieren Sie sie:

Labeling: Jedes Formularfeld muss ein <label>-Tag haben. In PrestaShop 8.0+ ist dies standardmäßig vorhanden, aber prüfen Sie es.

Dynamische Inhalte: Für Filter (z.B. nach Preis oder Farbe) müssen Sie ARIA-Labels setzen. Beispiel:

<div role="region" aria-label="Filter nach Farbe">
    <button aria-pressed="false">Schwarz</button>
    <button aria-pressed="true">Weiß</button>
</div>

Fehlermeldungen: Stellen Sie sicher, dass Fehlermeldungen (z.B. "E-Mail-Adresse ungültig") sichtbar und für Screenreader hörbar sind. Nutzen Sie <div role="alert">.

Praxis-Tipp: Testen Sie Filter mit JAWS oder NVDA. Klicken Sie auf Filter und prüfen Sie, ob der Screenreader die Auswahl meldet.

Schritt 4: Menü und Navigation für Screenreader

Das Hauptmenü ist oft ein Problem. So machen Sie es barrierefrei:

Struktur: Verwenden Sie <nav>-Tags für das Hauptmenü. In PrestaShop 8.0+ ist dies standardmäßig vorhanden.

Fokus-Management: Stellen Sie sicher, dass der Fokus nach dem Öffnen des Menüs auf den ersten Link fällt. Nutzen Sie JavaScript:

document.getElementById('menu-toggle').addEventListener('click', function() {
    document.getElementById('main-menu').focus();
});

Sichtbarkeit: Der aktive Link muss durch Kontrast oder Hintergrundfarbe hervorgehoben sein. Testen Sie mit dem Color Contrast Analyzer.

Wichtig: Vermeiden Sie onclick-Funktionen für Menü-Elemente. Screenreader erkennen sie nicht.

Schritt 5: Warenkorb und Checkout optimieren

Der Checkout ist der kritischste Punkt. Hier die wichtigsten Schritte:

Fehlermeldungen: Stellen Sie sicher, dass Fehler (z.B. "Adressfeld leer") sichtbar sind und nicht nur als Tooltip angezeigt werden.
Zahlungsmethoden: Jede Zahlungsmethode muss eindeutig benannt sein. Beispiel: Kreditkarte (Visa) statt nur Kreditkarte.
Bestätigung: Die Bestätigung muss für Screenreader höher sein. Nutzen Sie <h1>-Tags für die Bestätigung.

Praxis-Tipp: Testen Sie den Checkout mit einem Screenreader. Prüfen Sie, ob der Screenreader die Schritte (Adressdaten → Zahlung → Bestätigung) korrekt meldet.

Schritt 6: Testen mit Screenreader

Testen Sie Ihre Website mit einem Screenreader. So geht's:

JAWS: Installieren Sie JAWS und öffnen Sie Ihre Website.
NVDA: Nutzen Sie NVDA (kostenlos) und öffnen Sie Ihre Website.
Testen: Gehen Sie durch die Website mit der Tab-Taste und prüfen Sie, ob Screenreader die Inhalte korrekt meldet.

Wichtig: Testen Sie nicht nur mit Screenreader, sondern auch mit Tastatur-Navigation. Prüfen Sie, ob alle Funktionen mit der Tastatur erreichbar sind.

Schritt 7: Automatisierte Tests

Nutzen Sie automatisierte Tools für schnelle Tests:

Lighthouse: Nutzen Sie Google Lighthouse in Chrome. Es zeigt Ihnen Barrierefreiheit-Feeder an.
WAVE: Nutzen Sie WAVE von WebAIM. Es zeigt Ihnen direkt auf der Website, wo Fehler sind.
Axe: Nutzen Sie Axe von Deque. Es zeigt Ihnen technische Fehler.

Praxis-Tipp: Führen Sie diese Tests vor jeder Veröffentlichung durch.

Schritt 8: Dokumentation und Schulung

Dokumentation: Erstellen Sie eine Dokumentation für Ihre Teammitglieder. So geht's:
- Wie füge ich Alternativtexte ein?
- Wie teste ich mit Screenreader?
Schulung: Schulen Sie Ihr Team regelmäßig. Prüfen Sie, ob neue Mitarbeiter die Barrierefreiheit kennen.

Wichtig: Barrierefreiheit ist kein einmaliges Projekt. Sie muss kontinuierlich gepflegt werden.

Schritt 9: Feedback von Nutzern

Feedback-Formular: Fügen Sie ein Feedback-Formular ein. Beispiel: "Haben Sie Schwierigkeiten mit der Website?"
Nutzer-Tests: Führen Sie Nutzer-Tests mit Menschen mit Sehbehinderung durch.
Kontakt: Stellen Sie sicher, dass Nutzer einen Kontakt haben, falls sie Probleme haben.

Praxis-Tipp: Nutzen Sie UserTesting oder Lookback für Nutzer-Tests.

Schritt 10: Kontinuierliche Verbesserung

Monatliche Tests: Führen Sie monatliche Tests durch.
Feedback-Integration: Integrieren Sie Feedback in Ihre Entwicklung.
Neue Technologien: Bleiben Sie auf dem Laufenden mit neuen Technologien.

Wichtig: Barrierefreiheit ist ein Prozess, kein Endpunkt.

Fazit

Barrierefreiheit ist nicht nur eine Pflicht, sondern auch eine Chance. Sie verbessert die Benutzererfahrung für alle. Mit diesen Schritten können Sie Ihre Website barrierefrei machen. Prüfen Sie regelmäßig, ob alles funktioniert, und integrieren Sie Barrierefreiheit in Ihren Entwicklungsprozess.

Zusammenfassung:

Alternativtexte für Bilder
Fokus-Struktur für Screenreader
Formulare mit ARIA-Labels
Testen mit Screenreader und Tastatur

Mit diesen Schritten machen Sie Ihre Website für alle nutzbar.