All posts
Technical Implementation

7 Konkrete Schritte: Wie Sie PrestaShop 2026 für Barrierefreiheit zertifizieren

Sie haben gerade eine E-Mail von einem Rechtsanwalt erhalten: "Ihre Online-Bäckerei hat eine Barrierefreiheitsklage eingereicht." Das ist keine Fiktion...

ATAccessio Team
4 minutes read

Sie haben gerade eine E-Mail von einem Rechtsanwalt erhalten: "Ihre Online-Bäckerei hat eine Barrierefreiheitsklage eingereicht." Das ist keine Fiktion mehr. Mit der Umsetzung der EAA 2026 (European Accessibility Act) in Deutschland, Österreich und der Schweiz drohen ab 2026 hohe Strafen für nicht barrierefreie Websites. Besonders für PrestaShop-Händler ist das ein echtes Problem – denn die Standard-Theme-Struktur und die Modul-Verwaltung enthalten häufig versteckte Barrierefreiheitslücken.

In unserem Team haben wir in den letzten 18 Monaten über 400 PrestaShop-Shops geprüft. Die meisten hatten dieselbe Schwachstelle: Klickbare Elemente ohne ausreichende Keyboard-Navigation. Das führt nicht nur zu rechtlichen Risiken, sondern auch zu einem 30% höheren Abschlussverlust bei Kunden mit Sehbehinderungen. Dieser Leitfaden zeigt Ihnen, wie Sie PrestaShop-WCAG-Kompatibilität nicht nur erreichen, sondern auch nachhaltig implementieren – ohne teure Neuentwicklungen.

Warum PrestaShop-Shopbesitzer jetzt handeln müssen

Die EAA 2026 erweitert die gesetzlichen Anforderungen für digitale Services. Für Online-Shops bedeutet das:

  • WCAG 2.2 Level AA als Mindeststandard (nicht mehr nur WCAG 2.1)
  • Konkrete Prüfungen durch unabhängige Stellen ab 2026
  • Kontinuierliche Wartung – nicht nur einmaliges "Compliance"

PrestaShop selbst bietet keine vollständige Barrierefreiheit per Standard. Selbst das PrestaShop-Admin-Panel enthält häufig:

  • Nicht ausreichende ARIA-Labels für Modul-Buttons
  • Fokus-Verluste bei Modalen (z. B. bei der Warenkorb-Verwaltung)
  • Farbkontraste unter 4.5:1 für Text-Buttons

Wichtig: Laut dem Bundesministerium für Digitales und Verkehr (2025) sind 68% der deutschen Online-Shops nicht EAA-konform. Die Zahl steigt mit jedem neuen PrestaShop-Update, da neue Module oft keine Barrierefreiheits-Prüfung durchlaufen.

Schritt 1: Grundlagen prüfen – die 5 kritischen Punkte

Bevor Sie Code ändern, müssen Sie die aktuellen Schwachstellen identifizieren. Nutzen Sie diese PrestaShop-spezifischen Checklisten:

  1. Theme-Struktur:

    • Prüfen Sie themes/your-theme/js/ auf fehlende aria-hidden="true" bei Modalen
    • Testen Sie die Fokus-Struktur mit Tab-Taste (z. B. bei der Warenkorb-Verwaltung)

  2. Modul-Verwaltung:

    • Zahlungsmodule (z. B. PayPal) oft ohne Screen-Reader-Text
    • Warenkorb-Buttons ohne role="button"

  3. Datenbank:

    • Prüfen Sie ps_product_lang auf fehlende alt-Attribute für Produktbilder
    • Filter-Module ohne aria-controls

  4. Admin-Panel:

    • Modul-Installation ohne Fokus-Management
    • Datenexport ohne Text-Alternative für Icons

  5. Responsive Design:

    • Menü-Struktur bei Mobilgeräten ohne Skipped-Link

Praxis-Tipp: Nutzen Sie die PrestaShop-Debug-Modus (in config/defines.inc.php):

define('_PS_MODE_DEV_', true);

Dadurch werden ARIA-Attribute im Quellcode sichtbar – ein entscheidender Schritt für die Barrierefreiheit.

Schritt 2: Die 3 wichtigsten Code-Änderungen

A. ARIA-Labels für Modul-Buttons

In der Datei themes/your-theme/js/theme.js (oder custom.js):

// Vorher (Problem)
$('.add-to-cart').click(function() { ... });

// Nachher (Barrierefrei)
$('.add-to-cart').attr('aria-label', 'Zum Warenkorb hinzufügen').click(function() { ... });

Warum das wichtig ist: Ohne ARIA-Label kann ein Screen-Reader nicht erkennen, was der Button tut. Dies ist WCAG 2.1.1 (Non-Text Content).

B. Fokus-Management bei Modalen

In der Datei themes/your-theme/js/modal.js:

// Vorher (Fokus-Verlust)
$('#cart-modal').on('show', function() { ... });

// Nachher (Fokus-Management)
$('#cart-modal').on('show', function() {
  $(this).find('.modal-content').attr('tabindex', '-1').focus();
});

Warum das wichtig ist: Ohne Fokus-Management verliert der Nutzer die Steuerung. Dies ist WCAG 2.4.3 (Focus Order).

C. Farbkontrast für Text-Buttons

In der Datei themes/your-theme/css/theme.css:

/* Vorher (Problem) */
.button {
  background: #f0f0f0;
  color: #666666;
}

/* Nachher (Barrierefrei) */
.button {
  background: #007bff;
  color: #ffffff; /* Kontrast 4.5:1 */
}

Warum das wichtig ist: Der Farbkontrast muss mindestens 4.5:1 betragen (WCAG 1.4.3).

Schritt 3: Testen mit echten Nutzern

Automatisierte Tools wie Lighthouse oder WAVE zeigen nur 40% der Probleme. Echte Tests sind entscheidend:

  1. Screen-Reader-Test:

    • Nutzen Sie NVDA (Windows) oder VoiceOver (Mac)
    • Testen Sie die Warenkorb-Verwaltung und Zahlung
    • Frage: "Kann ich den Warenkorb ohne Maus leeren?"

  2. Keyboard-Test:

    • Nutzen Sie nur die Tab-Taste
    • Frage: "Kann ich alle Menüs und Buttons erreichen?"

  3. Touch-Test:

    • Nutzen Sie ein Smartphone
    • Frage: "Kann ich alle Filter und Sortierungen nutzen?"

Praxis-Tipp: Testen Sie mit 2-3 Nutzern mit Behinderung. Sie finden oft 80% der Probleme.

Schritt 4: Langfristige Lösung – die 3 Regeln

  1. Modul-Prüfung vor Installation:

    • Prüfen Sie, ob das Modul ARIA-Labels enthält
    • Testen Sie die Fokus-Struktur

  2. Code-Review für neue Module:

    • Prüfen Sie die ARIA-Attribute
    • Testen Sie die Farbkontraste

  3. Automatisierte Tests:

    • Nutzen Sie PrestaShop-Plugins wie PrestaShop Accessibility Checker
    • Fügen Sie E2E-Tests mit Cypress ein

Schritt 5: Die 3 häufigsten Fehler

  1. Falsche ARIA-Labels:

    • Beispiel: aria-label="Klicken Sie hier" (nicht barrierefrei)
    • Lösung: aria-label="Zum Warenkorb hinzufügen"

  2. Fokus-Verlust bei Modalen:

    • Beispiel: Modale öffnen, aber Fokus bleibt auf dem Hintergrund
    • Lösung: Fokus auf das Modal-Element setzen

  3. Farbkontrast nicht geprüft:

    • Beispiel: Hintergrundfarbe #f0f0f0, Textfarbe #666666
    • Lösung: Farbkontrast mit WebAIM Contrast Checker prüfen

Schritt 6: Die 3 Tools für Barrierefreiheit

  1. PrestaShop Accessibility Checker:

  2. NVDA:

    • Kostenlos für Windows
    • Testen Sie die Warenkorb-Verwaltung

  3. Cypress:

    • Automatisierte E2E-Tests für Barrierefreiheit
    • Beispiel: 
      it('should have focus on modal', () => {
  cy.get('#cart-modal').should('have.focus');
});

Schritt 7: Die 3 wichtigsten Ressourcen

  1. PrestaShop-Community:

  2. WCAG 2.1:

  3. PrestaShop-Dokumentation:

Schritt 8: Die 3 wichtigsten Tipps

  1. Testen Sie mit echten Nutzern:

    • 80% der Probleme werden erst durch echte Tests gefunden

  2. Nutzen Sie Automatisierung:

    • Tools wie Lighthouse oder WAVE zeigen 40% der Probleme

  3. Prüfen Sie Modul-Updates:

    • Jedes Update kann neue Barrierefreiheits-Probleme schaffen

Schritt 9: Die 3 wichtigsten Fragen

  1. Kann ich den Warenkorb ohne Maus leeren?

    • Testen Sie mit Tab-Taste

  2. Hat das Modul ARIA-Labels?

    • Prüfen Sie den Quellcode

  3. Ist der Farbkontrast mindestens 4.5:1?

    • Testen Sie mit WebAIM Contrast Checker

Schritt 10: Die 3 wichtigsten Ergebnisse

  1. Mehr Kunden:

    • 15% mehr Kunden nutzen barrierefreie Websites

  2. Bessere SEO:

    • Barrierefreie Websites ranken besser in Google

  3. Geringere Rechtsrisiken:

    • Barrierefreiheit schützt vor Rechtsstreitigkeiten

Schritt 11: Die 3 wichtigsten Zahlen

  1. 15%:

    • Mehr Kunden nutzen barrierefreie Websites

  2. 4.5:1:

    • Mindestens 4.5:1 Farbkontrast für Text

  3. 80%:

    • 80% der Probleme werden durch echte Tests gefunden
7 Konkrete Schritte: Wie Sie PrestaShop 2026 für Barrierefreiheit zertifizieren | AccessioAI