Magento barrierefrei machen: BFSG-Checkliste für Adobe Commerce, Luma und Hyvä

Was Adobe zur Barrierefreiheit des eigenen Storefronts dokumentiert, warum Luma, Hyvä und Extensions den Ausschlag geben und welche Punkte Sie im Magento-Admin prüfen sollten.

Ein Magento-Shop ist nicht von Haus aus barrierefrei. Adobe dokumentiert für den eigenen Commerce-Storefront in seinem Konformitätsbericht vom November 2025 mehrere WCAG-Kriterien als nur teilweise oder nicht unterstützt, darunter Kontrast, sichtbarer Fokus und Statusmeldungen. Ob Ihr Shop die Anforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG) erfüllt, entscheidet sich deshalb vor allem am Theme, an den Extensions und an Ihren Inhalten.

Das BFSG gilt seit dem 28. Juni 2025 für Onlineshops, die an Verbraucher verkaufen. Maßstab ist die harmonisierte Norm EN 301 549, die für Webinhalte auf die WCAG 2.1 in den Stufen A und AA verweist. Welche Pflichten insgesamt gelten, lesen Sie in BFSG für Onlineshops: Diese Pflichten gelten seit Juni 2025. Der Artikel ist eine technische Anleitung und keine Rechtsberatung.

Was Adobe selbst dokumentiert

Adobe veröffentlicht für seine Produkte Konformitätsberichte nach dem VPAT-Format. Der Bericht für Adobe Commerce Storefront vom November 2025 prüft gegen WCAG 2.2 in den Stufen A und AA und deckt auch EN 301 549 ab. Das Ergebnis ist ehrlich und durchwachsen:

• Nicht unterstützt sind laut Bericht unter anderem 1.3.1 (Struktur und Beziehungen), 1.4.11 (Kontrast von Bedienelementen) und 4.1.3 (Statusmeldungen, die Screenreader automatisch ansagen).
• Teilweise unterstützt sind unter anderem Alternativtexte (1.1.1), Tastaturbedienung (2.1.1), Fokusreihenfolge (2.4.3), Textkontrast (1.4.3), Reflow bei Vergrößerung (1.4.10), sichtbarer Fokus (2.4.7), Fehlermeldungen in Formularen (3.3.1) sowie Name, Rolle und Wert von Bedienelementen (4.1.2).

Ein älterer Bericht aus dem Jahr 2021 behandelt das klassische Luma-Theme und den PWA-Storefront Venia. Für die Praxis heißt das: Wer einen Magento-Shop auf Basis von Luma betreibt, startet nicht bei null, aber auch nicht auf einer geprüften, vollständig barrierefreien Grundlage.

Luma oder Hyvä: Das Theme entscheidet

In der Magento-Welt gibt es zwei große Frontend-Lager:

• Luma ist das mitgelieferte Standard-Theme. Viele ältere Shops basieren auf Luma oder einem davon abgeleiteten Theme eines Drittanbieters. Die Barrierefreiheit hängt hier stark davon ab, wie viel Ihre Agentur angepasst hat.
• Hyvä ist ein verbreitetes alternatives Frontend auf Basis von Alpine.js und Tailwind CSS. Laut Hyvä-Dokumentation setzt das Theme ab Version 1.3.0 Barrierefreiheitsfunktionen nach WCAG 2.1 Stufe AA um, etwa Tastaturbedienung, Unterstützung für Hilfstechnologien und Fokusverwaltung in Dialogen. Hyvä weist selbst darauf hin, dass Anpassungen und Extensions die Barrierefreiheit wieder verschlechtern können.

Unabhängig vom Theme gilt: Jede Anpassung in Ihrem Theme überschreibt Templates des Eltern-Themes. Was dort überschrieben ist, bekommt spätere Verbesserungen nicht.

Wer ist wofür verantwortlich?

Schritt 1: Version und Theme prüfen

• Magento 2 aktuell halten: Spielen Sie Patch-Releases regelmäßig ein. Sie enthalten neben Sicherheitskorrekturen auch Korrekturen im Frontend.
• Hyvä-Shops: Prüfen Sie, ob Sie mindestens Version 1.3.0 nutzen, und gleichen Sie überschriebene Templates mit der aktuellen Version ab.
• Luma-Shops: Rechnen Sie mit Nacharbeit an Fokus, Kontrast und Formularen. Wenn ohnehin ein Relaunch ansteht, ist die Barrierefreiheit ein guter Grund, das Frontend neu zu bewerten.
• Magento 1: Die Version wird seit Juni 2020 nicht mehr unterstützt. Barrierefreiheit lässt sich dort kaum wirtschaftlich nachrüsten.

Schritt 2: Tastatur und sichtbarer Fokus

Gehen Sie den Kaufweg einmal nur mit der Tastatur durch: Mega-Menü, Suche mit Vorschlägen, Kategoriefilter (Layered Navigation), Variantenauswahl bei konfigurierbaren Produkten, Mini-Warenkorb und Checkout. Typische Probleme in Magento-Shops sind Menüs, die nur bei Mausberührung aufklappen, Filter aus anklickbaren div-Elementen und Farbfelder für Varianten, die per Tastatur nicht erreichbar sind.

Ein deutlicher Fokusrahmen lässt sich im eigenen Theme ergänzen, bei Luma in der LESS-Datei Ihres Themes, bei Hyvä im Tailwind-CSS:

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

Prüfen Sie zusätzlich, ob ein Sticky-Header den fokussierten Bereich verdeckt. Das verlangt WCAG 2.2 im Kriterium 2.4.11.

Schritt 3: Alt-Texte für Produktbilder

Im Magento-Admin öffnen Sie unter Katalog > Produkte das jeweilige Produkt, gehen in den Bereich „Bilder und Videos“ und klicken auf ein Bild. Im Detailfenster tragen Sie den Alt-Text ein.

• Beschreiben Sie, was für den Kauf zählt: „Bürostuhl mit schwarzem Netzrücken und verstellbaren Armlehnen, Seitenansicht“ statt der Artikelnummer.
• Galeriebilder brauchen ebenfalls Alt-Texte.
• Für große Kataloge ist der Produktimport der schnellere Weg. Die Importdatei enthält Spalten für die Bildbeschriftungen, etwa base_image_label und additional_image_labels.
• Bilder in CMS-Seiten und Page-Builder-Elementen bekommen ihren Alt-Text direkt im jeweiligen Bild-Element.

Schritt 4: Farben und Kontraste

Prüfen Sie jede Farbkombination Ihres Themes mit einem Kontrastrechner:

• Normaler Text: mindestens 4,5:1 zum Hintergrund.
• Große Schrift (ab 24 Pixel oder ab etwa 19 Pixel fett): mindestens 3:1.
• Rahmen von Eingabefeldern, Icons und Fokusmarkierungen: mindestens 3:1.

Gerade der Kontrast von Bedienelementen ist im Adobe-Bericht als nicht unterstützt geführt. Achten Sie besonders auf hellgraue Rahmen von Eingabefeldern, Sale-Badges, Streichpreise, Platzhaltertext in Formularen und Buttons in der Markenfarbe.

Schritt 5: Statusmeldungen und Formulare

Magento zeigt viele Rückmeldungen dynamisch an: „Sie haben das Produkt in den Warenkorb gelegt“, Fehlermeldungen im Checkout, Lieferzeiten nach der Variantenauswahl. Werden diese Meldungen nicht über einen Live-Bereich angesagt, bekommen Screenreader-Nutzende davon nichts mit. Adobe führt genau dieses Kriterium (4.1.3) als nicht unterstützt.

• Prüfen Sie mit einem Screenreader wie NVDA oder VoiceOver, ob „In den Warenkorb“ eine hörbare Rückmeldung erzeugt.
• Fehlermeldungen im Checkout müssen als Text beim Feld stehen und angesagt werden.
• Jedes Formularfeld braucht eine sichtbare Beschriftung. Platzhaltertext allein reicht nicht.

Schritt 6: Extensions, Captcha und Cookie-Hinweis

Magento-Shops bestehen oft aus Dutzenden Extensions: One-Step-Checkout, Filter, Produktkonfiguratoren, Bewertungen, Popups, Chat. Jede bringt eigenes Markup mit.

• Testen Sie jede sichtbare Extension mit der Tastatur: erreichbar, Fokus sichtbar, mit Escape schließbar?
• Fragen Sie Extension-Hersteller nach Aussagen zur Barrierefreiheit, besonders beim Checkout.
• Das mitgelieferte Magento-Captcha zeigt verzerrte Zeichen als Bild. Für blinde Menschen ist es nicht lösbar. Prüfen Sie unter Shops > Konfiguration, wo Captchas aktiv sind, und setzen Sie auf barriereärmere Verfahren.
• Der Cookie-Hinweis muss per Tastatur erreichbar sein, beide Schaltflächen brauchen ausreichenden Kontrast, und er muss bei 400 % Zoom bedienbar bleiben.

Schritt 7: Erklärung zur Barrierefreiheit veröffentlichen

Das BFSG verlangt die Informationen nach Anlage 3 in Ihren AGB oder auf andere deutlich wahrnehmbare Weise. Legen Sie dafür unter Inhalte > Seiten eine CMS-Seite an und verlinken Sie sie im Footer. Einen fertigen Entwurf erstellen Sie mit unserem kostenlosen Generator für die Erklärung zur Barrierefreiheit, die Hintergründe stehen im Muster für die Erklärung zur Barrierefreiheit.

Die Checkliste im Überblick

Häufige Fragen

Ist Magento barrierefrei?

Nicht von Haus aus. Adobe führt in seinem Konformitätsbericht für den Commerce-Storefront vom November 2025 mehrere WCAG-Kriterien als nur teilweise oder nicht unterstützt. Wie barrierefrei Ihr Shop ist, hängt vor allem von Theme, Extensions und Inhalten ab.

Ist Hyvä barrierefreier als Luma?

Hyvä setzt laut eigener Dokumentation ab Version 1.3.0 Barrierefreiheitsfunktionen nach WCAG 2.1 AA um und ist damit eine bessere Grundlage. Barrierefrei wird ein Hyvä-Shop trotzdem erst, wenn auch Anpassungen, Extensions und Inhalte stimmen.

Wo pflege ich Alt-Texte in Magento?

Im Produkt unter „Bilder und Videos“ per Klick auf das Bild, für große Kataloge über den Produktimport. Bilder in CMS-Seiten bekommen ihren Alt-Text im jeweiligen Bild-Element.

Hilft eine Accessibility-Extension?

Extensions, die ein Barrierefreiheits-Menü einblenden, ändern das Markup Ihres Themes nicht und beheben die Ursachen nicht. Warum, erklären wir in Accessibility-Overlays und das BFSG.

Nächster Schritt

Prüfen Sie in 30 Sekunden kostenlos, welche Barrieren Ihr Magento-Shop hat: Jetzt kostenlosen BFSG-Check starten. Der Check lädt Startseite, eine Kategorie- und eine Produktseite in einem echten Browser und zeigt Kontrastfehler, fehlende Alt-Texte, fehlende Beschriftungen und einen unsichtbaren Tastaturfokus mit der jeweiligen Fundstelle. Er ersetzt keine manuelle Prüfung und keine Rechtsberatung.

Dieser Artikel ist eine technische Einordnung und keine Rechtsberatung.