EAA Anforderungen für Websites & Online-Shops — Vollständiger Leitfaden 2026

Wenn Sie einen Online-Shop oder eine Website betreiben, die Kunden in der EU bedient, sind Sie jetzt von der European Accessibility Act (EAA) betroffen. Seit dem 28. Juni 2025 müssen alle E-Commerce-Websites und -Apps barrierefrei sein – sonst drohen Bußgelder und Abmahnungen.

Dieser vollständige Leitfaden erklärt alle EAA Anforderungen für Websites und Online-Shops — von technischen Standards über häufige Verstöße bis hin zu konkreten Lösungen.

Welche Websites und Online-Shops sind von der EAA betroffen?

Die EAA gilt für alle E-Commerce-Websites und -Apps, über die Produkte oder Dienstleistungen an Verbraucher in der EU verkauft werden. Das bedeutet:

• Online-Shops — Alle E-Commerce-Websites, die Waren oder Dienstleistungen in der EU verkaufen
• Mobile Apps — Apps, über die Produkte oder Dienstleistungen angeboten werden
• Marktplätze — Plattformen wie Amazon, eBay, Etsy (wenn sie in der EU anbieten)
• Buchungssysteme — Hotels, Restaurants, Friseure, Ärzte mit Online-Buchung
• Ticket-Shops — Veranstaltungen, Konzerte, Sportevents
• Abonnement-Dienste — Streaming, Software-as-a-Service, Mitgliedschaften

Nicht betroffen sind:

• Reine Informationsseiten ohne E-Commerce-Funktionalität
• Mikrounternehmen mit weniger als 10 Mitarbeitern und Jahresumsatz unter €2 Millionen (Ausnahmen möglich)

EAA-Anforderungen — Die wichtigsten WCAG 2.1 Kriterien

Die technischen Anforderungen der EAA basieren auf EN 301 549 und damit auf WCAG 2.1 Level AA. Hier sind die wichtigsten Kriterien für Online-Shops:

1. Alternativer Text für Bilder (1.1.1)

Alle Produktbilder, Grafiken und Icons müssen alternativen Text (Alt-Text) haben. Screenreader können so beschreiben, was auf dem Bild zu sehen ist.

Beispiel:
<img src="produkt.jpg" alt="Rote Lederhandtasche mit goldenem Verschluss">

Häufiger Fehler: Fehlender Alt-Text bei Produktbildern. Screenreader sagen dann nur "Bild".

2. Farbkontraste (1.4.3)

Der Kontrast zwischen Text und Hintergrund muss mindestens 4.5:1 betragen (für normalen Text) oder 3:1 (für großen Text).

Beispiel:
❌ Grauer Text (#888888) auf weißem Hintergrund — Kontrast 2.8:1 → Fällt durch
✅ Dunkelgrauer Text (#333333) auf weißem Hintergrund — Kontrast 12.6:1 → Besteht

Häufiger Fehler: Graue "Aktion"-Buttons (wie "In den Warenkorb") auf hellen Hintergründen.

3. Tastaturzugänglichkeit (2.1.1)

Die gesamte Website muss nur mit der Tastatur bedienbar sein. Kunden müssen mit Tab, Enter und Pfeiltasten durch den gesamten Shop navigieren können.

Häufiger Fehler: Dropdown-Menüs, die nur mit der Maus geöffnet werden können.

4. Beschriftete Formularfelder (3.3.2)

Alle Formularfelder (Name, E-Mail, Adresse, Zahlungsinformationen) müssen sichtbare Beschriftungen haben.

Beispiel:
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email">

Häufiger Fehler: Formularfelder ohne Labels oder mit Platzhaltern als einziger Beschriftung.

5. Logische Überschriftenstruktur (1.3.1)

Die Überschriften müssen eine logische Hierarchie bilden: H1 → H2 → H3 → H4. Screenreader-Nutzer navigieren über Überschriften.

Häufiger Fehler: Übersprungenen Überschriftenebenen (z.B. H1 → H3).

6. Fokusindikatoren (2.4.7)

Jedes Element, das per Tastatur erreichbar ist, muss einen sichtbaren Fokusindikator haben. Nutzer müssen sehen können, wo sie sich auf der Seite befinden.

Beispiel:
button:focus { outline: 2px solid #3b82f6; }

Häufiger Fehler: outline: none; ohne sichtbaren Ersatz.

7. Springen zum Hauptinhalt (2.4.1)

Jede Seite muss einen "Zum Hauptinhalt springen" Link haben. Dieser ist der erste fokussierbare Link auf der Seite.

Beispiel:
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>

8. Beschreibende Linktexte (2.4.4)

Linktexte müssen den Zweck des Links beschreiben. "Hier klicken" oder "Mehr erfahren" sind nicht aussagekräftig.

Beispiel:
✅ <a href="/produkt">Mehr über unser Produkt erfahren</a>
❌ <a href="/produkt">Hier klicken</a>

EAA-Checkliste für Online-Shops

Häufige EAA-Verstöße im E-Commerce

1. Fehlender Alt-Text bei Produktbildern

Problem: Produktbilder ohne Alt-Text — Screenreader sagen nur "Bild".

Lösung: Fügen Sie beschreibenden Alt-Text zu allen Produktbildern hinzu.

2. Zu geringer Farbkontrast bei Buttons

Problem: "In den Warenkorb" Buttons mit geringem Kontrast.

Lösung: Verwenden Sie dunklere Farben für Buttons und erhöhen Sie den Kontrast auf 4.5:1.

3. Nicht bedienbare Dropdown-Menüs

Problem: Dropdown-Menüs können nur mit der Maus geöffnet werden.

Lösung: Implementieren Sie Tastaturunterstützung für alle Menüs (Enter zum Öffnen, Pfeiltasten zur Navigation).

4. Unbeschriftete Formularfelder

Problem: Formularfelder ohne Labels oder nur mit Platzhaltern.

Lösung: Verwenden Sie sichtbare <label>-Elemente für jedes Formularfeld.

5. Fehlender Fokusindikator

Problem: Nutzer können nicht erkennen, welches Element fokussiert ist.

Lösung: Fügen Sie sichtbare Fokusindikatoren hinzu: a:focus, button:focus { outline: 2px solid #3b82f6; }

So erreichen Sie EAA-Konformität — Schritt für Schritt

Schritt 1: EAA-Check durchführen

Nutzen Sie unseren kostenlosen EAA-Checker, um Ihre Website auf EN 301 549 zu testen.

Schritt 2: Kritische Verstöße beheben

Konzentrieren Sie sich zuerst auf die Verstöße, die am häufigsten zu Abmahnungen führen: fehlender Alt-Text, fehlende Formularbeschriftungen und fehlende Tastaturzugänglichkeit.

Schritt 3: Barrierefreiheitserklärung erstellen

Erstellen Sie eine Barrierefreiheitserklärung für Ihre Website. Dies ist rechtlich erforderlich und zeigt Ihre Compliance-Bemühungen.

Schritt 4: Regelmäßige Prüfungen

Führen Sie monatliche EAA-Prüfungen durch, um neue Verstöße zu erkennen.

Häufig gestellte Fragen — EAA für Websites

Interne Links — EAA-Ressourcen