Die digitale Landschaft verändert sich rapide, und die Anforderungen an Online-Shops werden strenger. Im Jahr 2026 stehen Händler vor einer neuen Realität: Die Europäische Zugänglichkeitsverordnung (EAA) wird verschärft, und der Druck durch Klagen im Rahmen des ADA-Gesetzes in den USA wächst. Viele PrestaShop-Betreiber unterschätzen die technischen Schulden, die sich über Jahre angesammelt haben. Besonders bei komplexen Modulen oder benutzerdefinierten Themes fehlt oft eine systematische Prüfung auf Barrierefreiheit.
Ein reines Testen mit dem Auge reicht nicht mehr aus. Screen Reader und Tastaturnavigation müssen in jedem Schritt des Kaufprozesses funktionieren. Wenn ein Nutzer mit einer motorischen Beeinträchtigung die Warenkorbbestätigung nicht per Tastatur erreichen kann, ist der Shop rechtlich angreifbar. Die folgenden Maßnahmen zeigen, wie Sie PrestaShop technisch so anpassen können, dass sie den neuen Standards entspricht.
1. Grundlagen verstehen: WCAG 2.2 und ihre Relevanz für PrestaShop
Die Web Content Accessibility Guidelines (WCAG) Version 2.2 sind der aktuelle Standard. Viele Module in der PrestaShop-Community basieren noch auf veralteten Konzepten aus den Jahren 2015 oder früher. Diese müssen dringend aktualisiert werden, um die neuen Kriterien zu erfüllen.
Ein zentraler Punkt ist die korrekte Verwendung von semantischen HTML-Elementen. Ein einfaches <div>-Element kann für einen Screen Reader wertlos sein. Es muss durch <button>, <nav> oder <article> ersetzt werden, je nach Kontext. PrestaShop nutzt Smarty-Templates, in denen oft unspezifische Container verwendet werden.
Hier ist ein praktisches Beispiel aus einem Checkout-Prozess:
{if $cart->id}
<div class="checkout-step">
<span>Warenkorb</span>
</div>
{/if}
Dieser Code ist für Screen Reader unklar. Er muss so angepasst werden, dass der Kontext klar ist:
{if $cart->id}
<section aria-labelledby="checkout-step-title">
<h2 id="checkout-step-title">Warenkorb</h2>
<p class="summary">Ihre ausgewählten Produkte.</p>
</section>
{/if}
Die Hinzufügung von aria-labelledby verknüpft den Text mit einer eindeutigen ID. Dies ist eine der wichtigsten technischen Maßnahmen für PrestaShop Barrierefreiheit. Ohne diese Anpassungen bleibt die Seite für Nutzer, die nicht sehen können, unverständlich.
2. Thematisierung und Template-Anpassung in Smarty
Die meisten PrestaShop-Themes nutzen proprietäre CSS-Klassen, die oft über komplexe JavaScript-Logik gesteuert werden. Diese Logik muss so geschrieben sein, dass sie Tastaturbefehle unterstützt. Ein häufiges Problem ist das Fehlen von Fokus-Indikatoren. Wenn ein Nutzer mit der Tab-Taste durch den Shop navigiert, weiß er nicht, wo er sich befindet.
Sie müssen CSS-Klassen hinzufügen, die einen sichtbaren Rahmen um fokussierte Elemente legen. Dies gilt für Filter-Menüs, Suchfelder und Dropdowns. In PrestaShop 8.x ist dies oft in den theme-Ordner integriert.
/* Beispiel für Fokus-Indikatoren */
input:focus, button:focus {
outline: 3px solid #0056b3;
outline-offset: 2px;
}
Dieser Code ist simpel, aber er erfüllt eine kritische Anforderung. Viele Themes entfernen diesen Rahmen standardmäßig, um das Design zu "schönern". Das ist ein Fehler. Der Fokus muss immer sichtbar sein.
Bei der Anpassung von Modulen müssen Sie auch auf die config.xml-Dateien achten. Dort können Sie Hooks definieren, die Barrierefreiheits-Checks auslösen. Wenn Sie ein Plugin installieren, prüfen Sie, ob es diese Einstellungen unterstützt.
3. Module-Entwicklung und korrekte ARIA-Rollen
Module sind oft der Schwachpunkt in PrestaShop-Shops. Ein Checkout-Modul von einem Drittanbieter kann komplexe Formulare enthalten, die nicht barrierefrei sind. Die Entwickler dieser Module müssen verstehen, wie sie aria-label und role korrekt verwenden.
Ein häufiger Fehler ist das Fehlen von aria-describedby. Wenn ein Passwortfeld eine Hilfe-Texte hat, muss diese Verbindung bestehen.
<input type="password"
id="password"
aria-labelledby="password-label"
aria-describedby="password-help">
<label for="password" id="password-label">Passwort</label>
<span id="password-help">Mindestens 8 Zeichen, Großbuchstaben erforderlich.</span>
Dieses Muster ist in jedem Formular zu finden. Wenn Sie ein eigenes Modul entwickeln oder anpassen, müssen Sie sicherstellen, dass diese Attribute vorhanden sind. Viele Module bieten keine Dokumentation dazu. In diesem Fall müssen Sie den Code manuell prüfen und ggf. mit einem Entwickler zusammenarbeiten.
4. JavaScript-Logik und dynamische Inhalte
PrestaShop nutzt viel JavaScript für Filter, Suchvorschläge und Warenkorb-Updates. Diese Logik muss so geschrieben sein, dass sie Screen Reader unterstützt. Wenn ein Produkt hinzugefügt wird, muss der Screen Reader informiert werden: "Warenkorb aktualisiert, 3 Artikel".
Dies geschieht oft über aria-live Regionen. Ein Checkout-Modul kann eine Region haben, die sich dynamisch ändert.
<div aria-live="polite" aria-atomic="true">
<span id="cart-update-message"></span>
</div>
Die JavaScript-Funktion muss diese Elemente aktualisieren. Wenn Sie ein Plugin nutzen, das solche Funktionen bietet, prüfen Sie die Dokumentation. Viele Plugins bieten keine Unterstützung für aria-live. In diesem Fall müssen Sie den Code anpassen oder ein barrierefreies Plugin wählen.
5. Kontrast und Farbwahrnehmung in Themes
Die visuelle Darstellung ist entscheidend. Viele PrestaShop-Themes verwenden zu helle Farben auf dunklem Hintergrund oder umgekehrt. Dies macht Texte schwer lesbar, besonders für Nutzer mit Sehbehinderungen.
Der Kontrastverhältnis muss mindestens 4.5:1 für normalen Text und 3:1 für große Texte betragen. Sie können Tools wie den WebAIM Contrast Checker nutzen, um Farben zu prüfen.
/* Beispiel für ausreichenden Kontrast */
.text-muted {
color: #333; /* Nicht hellgrau auf weißem Hintergrund */
}
Dies ist eine einfache technische Maßnahme, die oft übersehen wird. Wenn Sie ein Theme kaufen, prüfen Sie den Kontrast vor dem Kauf. Viele Themes bieten keine Garantie für Barrierefreiheit. In diesem Fall müssen Sie das Theme anpassen oder ein barrierefreies Theme wählen.
6. Tastaturnavigation und Fokus-Management
Die Tab-Reihenfolge ist entscheidend. Wenn ein Nutzer mit der Tab-Taste durch den Shop navigiert, muss die Reihenfolge logisch sein. Beginnen Sie beim Header, gehen Sie zum Suchfeld, dann zur Navigation und schließlich zum Footer.
Ein häufiges Problem ist das Fehlen von Fokus-Indikatoren in Modulen. Wenn ein Dropdown-Menü geöffnet wird, muss der Fokus auf dem ersten Element liegen. Dies erfordert JavaScript-Logik.
// Beispiel für Fokus-Management
document.addEventListener('click', function(e) {
const dropdown = e.target.closest('.dropdown');
if (dropdown) {
dropdown.querySelector('.dropdown-menu').focus();
}
});
Dieser Code ist komplex, aber er ist notwendig. Wenn Sie ein Plugin nutzen, das solche Funktionen bietet, prüfen Sie die Dokumentation. Viele Plugins bieten keine Unterstützung für Fokus-Management. In diesem Fall müssen Sie den Code anpassen oder ein barrierefreies Plugin wählen.
7. Automatisierte Tests und manuelle Prüfung kombinieren
Automatisierte Tools wie Lighthouse oder axe-core sind nützlich, aber sie finden nicht alle Probleme. Ein Tool kann einen fehlenden Kontrast melden, aber es erkennt nicht, ob ein Button logisch funktioniert.
Sie müssen automatisierte Tests mit manuellen Prüfungen kombinieren. Testen Sie den Shop mit einem Screen Reader wie NVDA oder JAWS. Navigieren Sie nur mit der Tastatur. Wenn Sie auf eine Seite stoßen, die nicht funktioniert, ist dies ein technisches Problem.
Ein Checkout-Prozess muss vollständig über die Tastatur durchführbar sein. Wenn ein Nutzer das Formular ausfüllen kann, aber den Warenkorb nicht bestätigen kann, ist der Shop nicht barrierefrei. Dies ist eine kritische technische Maßnahme für PrestaShop Barrierefreiheit.
8. Dokumentation und Schulung des Teams
Technische Maßnahmen allein reichen nicht aus. Das Team muss verstehen, warum diese Änderungen notwendig sind. Viele Entwickler kennen die WCAG-Kriterien nicht. Sie müssen geschult werden.
Erstellen Sie eine interne Checkliste