European Accessibility Act und BFSG: Rechtliche Grundlagen für Shops

1. Was der European Accessibility Act und das BFSG regeln

Der European Accessibility Act (EAA, Richtlinie EU 2019/882) ist eine EU-Richtlinie, die Mitgliedstaaten verpflichtet, digitale Barrierefreiheit für bestimmte Produkte und Dienstleistungen gesetzlich vorzuschreiben. In Deutschland wurde die Richtlinie durch das Barrierefreiheitsstärkungsgesetz (BFSG) in nationales Recht überführt, ergänzt durch die Barrierefreiheitsstärkungsverordnung (BFSGV), die technische Detailanforderungen konkretisiert. Anders als die bereits bestehende BITV 2.0, die ausschließlich öffentliche Stellen betrifft, adressiert das BFSG erstmals auch private Unternehmen, darunter Online-Shops, Banken, E-Book-Anbieter und Telekommunikationsdienste.

Für Magento-Betreiber bedeutet das: Ein Online-Shop ist keine freiwillige Komfortfunktion mehr, sondern unterliegt seit dem Stichtag im Juni 2025 einer gesetzlichen Pflicht zur digitalen Barrierefreiheit. Wer die Anforderungen ignoriert, riskiert Bußgelder, Abmahnungen durch Verbraucherschutzverbände und Reputationsschäden. Gleichzeitig eröffnet Barrierefreiheit ein größeres Kundensegment: Laut EU-Kommission leben rund 87 Millionen Menschen mit Behinderungen in der EU, viele davon aktive Online-Käufer, die von klar strukturierten, tastaturbedienbaren und kontrastreichen Shops direkt profitieren.

2. Wer unter die Pflicht fällt: Unternehmen und Ausnahmen

Das BFSG gilt für Wirtschaftsakteure, die in seinen sachlichen Anwendungsbereich fallende Produkte oder Dienstleistungen gegenüber Verbrauchern in der EU anbieten. Für den E-Commerce bedeutet das konkret: Jeder Anbieter, der über eine Website oder App Verträge mit Verbrauchern abschließt, also klassische Online-Shops, fällt grundsätzlich unter das Gesetz. Das betrifft nicht nur den eigentlichen Shop-Betreiber, sondern potenziell auch Zahlungsdienstleister, deren Checkout-Komponenten eingebunden werden.

Eine wichtige Ausnahme betrifft Kleinstunternehmen: Unternehmen mit weniger als zehn Beschäftigten und einem Jahresumsatz oder einer Jahresbilanzsumme von höchstens zwei Millionen Euro sind von den Dienstleistungspflichten des BFSG befreit. Diese Ausnahme gilt jedoch nicht automatisch für alle Fälle und ist restriktiv auszulegen, insbesondere wenn ein Kleinstunternehmen als Hersteller physischer Produkte auftritt statt nur eine Dienstleistung anzubieten. Wer sich auf die Ausnahme beruft, sollte die Einordnung dokumentieren, da im Streitfall der Anbieter die Beweislast trägt.

3. Betroffene Produkte und Dienstleistungen im Online-Handel

Der elektronische Geschäftsverkehr, also E-Commerce, ist im BFSG explizit als betroffene Dienstleistung genannt. Das umfasst nicht nur die sichtbare Storefront, sondern den gesamten Vertragsabschlussprozess: Produktkatalog, Suche und Filter, Warenkorb, Checkout inklusive Zahlungsabwicklung, Kundenkonto-Verwaltung und die Kommunikation rund um die Bestellung wie Bestätigungs-E-Mails und Rechnungen. Auch mobile Apps, sofern sie denselben Bestellprozess abbilden, fallen unter dieselbe Pflicht wie die Desktop-Version des Shops.

Nicht jede Unterseite trägt dasselbe Risiko. Der Checkout-Flow, in dem Nutzer tatsächlich einen Vertrag abschließen, steht im Zentrum der Prüfungen, weil hier Formulare, Fehlermeldungen und Zeitlimits die größten Barrieren erzeugen. Reine Marketing-Inhalte wie ein Blog-Artikel fallen zwar grundsätzlich ebenfalls unter die allgemeine Sorgfaltspflicht einer barrierefreien Website, werden in der Praxis aber nachrangig priorisiert gegenüber den Kernprozessen, die einen unmittelbaren Vertragsabschluss ermöglichen.

4. Der 28. Juni 2025: Fristen und Übergangsregelungen

Der zentrale Stichtag ist der 28. Juni 2025. Ab diesem Datum müssen alle neu auf den Markt gebrachten Produkte und alle neu angebotenen Dienstleistungen, die unter das BFSG fallen, den Anforderungen entsprechen. Für Online-Shops bedeutet das konkret: Ein Shop, der zu diesem Zeitpunkt bereits online war, musste seine Konformität ab diesem Datum sicherstellen, nicht erst danach schrittweise nachbessern.

Für bestehende Dienstleistungsverträge, die vor dem Stichtag geschlossen wurden, gilt eine Übergangsfrist bis zum 28. Juni 2030, sofern sich die Dienstleistung nicht wesentlich ändert. Für Selbstbedienungsterminals, die bereits vor dem Stichtag rechtmäßig im Einsatz waren, gilt ebenfalls eine verlängerte Nutzungsfrist bis Mitte 2030. Wichtig für Shop-Betreiber: Jedes größere Relaunch-Projekt, jede grundlegende Theme-Migration oder jeder Wechsel der Checkout-Lösung gilt als wesentliche Änderung und beendet damit den Bestandsschutz sofort, nicht erst am Ende der Übergangsfrist.

5. WCAG 2.1 AA als technischer Maßstab

Das BFSG selbst formuliert Anforderungen weitgehend technologieneutral. Der praktische Nachweis der Konformität erfolgt über die harmonisierte Norm EN 301 549, die für Web-Inhalte inhaltlich auf die Web Content Accessibility Guidelines (WCAG) 2.1, Konformitätsstufe AA, verweist. Wer WCAG 2.1 AA nachweislich erfüllt, gilt vor Marktüberwachungsbehörden als konform. Die vier Prinzipien der WCAG, bekannt unter dem Akronym POUR, wahrnehmbar, bedienbar, verständlich und robust, bilden das Grundgerüst für alle Einzelkriterien.

In der Praxis heißt das für Entwickler: Semantisches HTML statt reiner div-Suppe, korrekte Landmark-Rollen, eine logische Fokusreihenfolge und Alternativtexte für Bilder sind keine Kür, sondern Pflichtkriterien mit direktem Bezug zu konkreten WCAG-Erfolgskriterien. Ein Skip-Link an den Seitenanfang etwa erfüllt Kriterium 2.4.1 (Blöcke umgehen) und ist für Tastaturnutzer und Screenreader-Nutzer gleichermaßen relevant.

<!-- Hyvä phtml: semantic landmarks and skip link for keyboard and screen reader users -->
<a href="#maincontent" class="skip-link sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:bg-white focus:text-black focus:px-4 focus:py-2 focus:rounded">
    <?= $escaper->escapeHtml(__('Skip to main content')) ?>
</a>

<header role="banner">
    <nav aria-label="<?= $escaper->escapeHtmlAttr(__('Main navigation')) ?>">
        <!-- primary navigation -->
    </nav>
</header>

<main id="maincontent" role="main" tabindex="-1">
    <h1><?= $escaper->escapeHtml($block->getPageTitle()) ?></h1>
    <!-- page content -->
</main>

<footer role="contentinfo">
    <!-- footer content -->
</footer>

6. Barrierefreier Checkout: Konkrete Anforderungen an den Shop

Der Checkout ist der geschäftskritischste Bereich, weil hier der eigentliche Vertragsabschluss stattfindet und Barrieren direkt zu Kaufabbrüchen führen. Formularfelder brauchen ein sichtbares, programmatisch verknüpftes label-Element, nicht nur einen Platzhaltertext, der beim Fokussieren verschwindet. Pflichtfelder müssen sowohl visuell als auch für Screenreader als solche erkennbar sein, etwa über aria-required="true". Fehlermeldungen dürfen nicht ausschließlich über Farbe kommuniziert werden und müssen für assistive Technologien direkt beim Auftreten angekündigt werden, typischerweise über eine role="alert"-Region.

Zeitlimits, etwa während der Zahlungsabwicklung, müssen verlängerbar sein oder eine Warnung vor Ablauf anzeigen. Fokus-Management ist ein weiterer kritischer Punkt: Öffnet sich ein modales Dialogfenster für die Adresskorrektur, muss der Tastaturfokus programmatisch in den Dialog wechseln und beim Schließen zum auslösenden Element zurückkehren, sonst verliert ein Tastaturnutzer die Orientierung vollständig im Formular.

<!-- Accessible checkout form field with error handling -->
<div class="mb-4">
    <label for="email" class="block font-semibold mb-1">
        <?= $escaper->escapeHtml(__('Email address')) ?>
        <span aria-hidden="true">*</span>
    </label>
    <input
        type="email"
        id="email"
        name="email"
        required
        aria-required="true"
        aria-invalid="false"
        aria-describedby="email-error"
        x-on:blur="validateEmail"
        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
    >
    <p id="email-error" class="text-red-600 text-sm mt-1" role="alert" x-show="emailError" x-text="emailError"></p>
</div>

/* Visible focus indicator for keyboard users, matches WCAG 2.1 SC 2.4.7 */
:focus-visible {
  outline: 2px solid #18181b;
  outline-offset: 2px;
}

/* Do not remove focus outlines without a visible replacement */
button:focus:not(:focus-visible) {
  outline: none;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Sufficient color contrast for error states, WCAG 2.1 SC 1.4.3 */
.form-error {
  color: #b91c1c;
  font-weight: 600;
}

7. Die Barrierefreiheitserklärung: Pflichtdokumentation erstellen

Wirtschaftsakteure müssen die Konformität ihrer Produkte und Dienstleistungen mit den Anforderungen der EN 301 549 nachweisen und diese technische Dokumentation für die zuständige Marktüberwachungsbehörde fünf Jahre lang bereithalten. In der Praxis hat sich, angelehnt an die BITV-Erklärungen des öffentlichen Sektors, die freiwillige Veröffentlichung einer Barrierefreiheitserklärung als Best Practice etabliert: eine leicht auffindbare Seite, die den angewendeten Standard, den aktuellen Konformitätsstatus, bekannte Einschränkungen und einen Kontakt für Feedback nennt.

Eine gut gepflegte Erklärung dokumentiert nicht nur nach außen, sondern zwingt intern zu einer ehrlichen Bestandsaufnahme: Welche Komponenten wurden geprüft, welche Einschränkungen sind bekannt, bis wann sollen sie behoben werden. Diese Selbstverpflichtung reduziert das Risiko einer Abmahnung erheblich, weil sie zeigt, dass der Betreiber aktiv an der Konformität arbeitet statt Barrierefreiheit vollständig zu ignorieren.

{
  "accessibilityStatement": {
    "standard": "EN 301 549 (WCAG 2.1 Level AA)",
    "conformityStatus": "partially conformant",
    "lastAssessment": "2026-05-15",
    "knownLimitations": [
      "PDF invoices before 2026-01-01 are not tagged",
      "Product filter uses a custom widget without full keyboard support"
    ],
    "feedbackContact": {
      "email": "barrierefreiheit@mironsoft.de",
      "responseTime": "5 business days"
    },
    "enforcementBody": "Marktüberwachungsbehörde des jeweiligen Bundeslandes",
    "documentationRetentionYears": 5
  }
}

8. Erste Schritte für Magento-Shop-Betreiber

Der erste sinnvolle Schritt ist ein Ist-Stand-Audit: automatisierte Tools wie axe-core oder Lighthouse decken einen relevanten, aber begrenzten Teil der WCAG-Kriterien ab, typischerweise rund ein Drittel. Der Rest, etwa die Logik von Fokusreihenfolgen oder die Verständlichkeit von Fehlermeldungen, erfordert manuelle Prüfung mit Tastatur und Screenreader. Priorität hat der Checkout-Flow, gefolgt von Produktseiten und der Suche, weil diese Bereiche das größte rechtliche und geschäftliche Risiko tragen.

Automatisierte Tests gehören in die CI-Pipeline, damit Regressionen bei jedem Deployment auffallen, statt erst bei einer externen Prüfung. In Hyvä-Shops lässt sich das gut mit Playwright und axe-core kombinieren, direkt gegen die im Build erzeugten Seiten. Parallel dazu lohnt sich Schulung für das Entwicklungsteam: Wer die WCAG-Grundprinzipien einmal verinnerlicht hat, vermeidet die häufigsten Fehler bereits beim Schreiben neuer Templates, statt sie nachträglich zu reparieren.

// Automated accessibility testing in CI using axe-core and Playwright
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('checkout page has no critical accessibility violations', async ({ page }) => {
  await page.goto('/checkout');

  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag21aa'])
    .analyze();

  const critical = results.violations.filter(v => v.impact === 'critical' || v.impact === 'serious');

  expect(critical, JSON.stringify(critical, null, 2)).toEqual([]);
});

// Run locally: npx playwright test accessibility.spec.js

9. Durchsetzung, Marktüberwachung und Bußgelder im Vergleich

Die Marktüberwachungsbehörden der Bundesländer prüfen die Einhaltung des BFSG, reagieren auf Beschwerden von Verbrauchern und können bei festgestellten Verstößen Nachbesserungen anordnen. Bleibt ein Anbieter untätig, sieht das BFSG Bußgelder von bis zu 100.000 Euro vor, gestaffelt nach Schwere und Dauer des Verstoßes. Zusätzlich können Verbraucherschutzverbände auf Basis des Unterlassungsklagengesetzes zivilrechtlich gegen nicht konforme Anbieter vorgehen, unabhängig vom behördlichen Verfahren.

Die folgende Übersicht zeigt typische Problemstellen in Magento-Shops und die jeweils konforme Umsetzung im Vergleich.

Wer die Tabelle als Checkliste für den nächsten Sprint nutzt, deckt bereits die häufigsten Beanstandungen aus der Praxis ab. Entscheidend ist, dass diese Punkte nicht als einmaliges Projekt behandelt werden, sondern dauerhaft in Definition-of-Done und Code-Review verankert sind, weil jede neue Komponente wieder dieselben Fehler einführen kann.

10. Zusammenfassung

Der European Accessibility Act und das BFSG machen digitale Barrierefreiheit für einen großen Teil der Online-Shops in Deutschland verbindlich. Seit dem 28. Juni 2025 müssen Unternehmen, die keine Kleinstunternehmen sind, ihren E-Commerce-Auftritt inklusive Checkout, Formularen und Kundenkommunikation an WCAG 2.1 AA ausrichten, nachgewiesen über die harmonisierte Norm EN 301 549. Für Bestandsverträge gilt eine Übergangsfrist bis 2030, die jedoch bei jeder wesentlichen Änderung sofort endet.

Wer jetzt handelt, verschafft sich einen doppelten Vorteil: rechtliche Sicherheit gegenüber Marktüberwachung und Abmahnungen sowie Zugang zu einem Kundensegment von rund 87 Millionen Menschen mit Behinderungen in der EU. Ein strukturiertes Audit, priorisierte Umsetzung im Checkout und automatisierte Tests in der CI-Pipeline sind der pragmatischste Weg, aus einer gesetzlichen Pflicht einen belastbaren, dauerhaften Prozess zu machen.

11. FAQ: European Accessibility Act und BFSG