Zugänglichkeit von E-Shops gemäß Gesetz Nr. 424/2023 Slg.: Vollständiges Verfahren

Im Juni 2025 tritt das Gesetz Nr. 424/2023 Slg. in Kraft, das die Verpflichtung zur digitalen Barrierefreiheit für E-Shops und Online-Dienste einführt. Dieses Gesetz stützt sich auf die EU-Richtlinie 2019/882 und soll sicherstellen, dass digitale Dienste für alle zugänglich sind - auch für Menschen mit Behinderungen.

Das Gesetz betrifft nicht nur den öffentlichen Bereich, wie es früher der Fall war, sondern auch gewerbliche Einrichtungen wie E-Shop-Betreiber, weshalb es für Sie wichtig sein kann, sich damit zu befassen. Das Gesetz soll am 28. Juni 2025 in Kraft treten.

Das Gesetz führt neue Verpflichtungen für E-Shops ein, aber:

• es sieht keine spezifische technische Lösung vor, sondern verweist nur auf die sogenannte harmonisierte Norm (EN 301 549) und die Grundsätze der WCAG 2.2,
• zugänglichkeit bedeutet nicht, das Design zu ändern oder Funktionen zu entfernen, sondern sicherzustellen, dass jeder sie nutzen kann,
• es geht nicht um umfangreiche Anpassungen - wenn man weiß, was zu tun ist, kann man es mit einer angemessenen Investition erreichen.

Was sind die Risiken der Nichteinhaltung?

Für den Fall, dass die Anforderungen des Gesetzes 424/2023 nicht erfüllt werden, sieht das Gesetz die Möglichkeit von Sanktionen vor. Drohungen:

• inspektionen durch die KTIA aufgrund von Beschwerden,
• verwarnungen und Aufforderungen zu Abhilfemaßnahmen,
• geldstrafen bei Nichteinhaltung.

Checkliste der Anforderungen

Um das Thema Barrierefreiheit in den Griff zu bekommen, haben wir rechtliche Analysen, offizielle Auslegungen und technische Normen geprüft. Auf dieser Grundlage haben wir eine 13-Punkte-Checkliste zusammengestellt, die die Anforderungen der harmonisierten Norm EN 301 549 und die Grundsätze der WCAG 2.2 auf Stufe AA widerspiegelt.

Was Ihr E-Shop gemäß dem Gesetz 424/2023 erfüllen muss:

Wir haben alle Webanpassungen selbst in mehreren Projekten untersucht, getestet und eingesetzt, wobei wir Tools wie NVDA, JAWS, VoiceOver, TalkBack, Wave, LightHouse oder axe DevTools verwendet haben. Hier ist ein Überblick über die Hauptbereiche, auf die wir uns konzentrieren:

1. Tastaturzugänglichkeit - die gesamte Website muss ohne Maus navigierbar sein.
2. Kompatibilität mit Bildschirmlesegeräten - die Website muss mit Bildschirmlesegeräten wie NVDA und VoiceOver funktionieren, und die Semantik des Quellcodes, z. B. Überschriftenebenen, muss überprüft werden.
3. Textalternativen für Bilder und Medien - jedes Bild muss eine aussagekräftige Alt-Beschriftung haben.
4. Ausreichender Kontrast - Farben müssen für Menschen mit Sehbehinderungen lesbar sein, d. h. ein Mindestkontrastverhältnis von 4,5:1.
5. Textvergrößerung und Reaktionsfähigkeit - die Website muss mit einer 200%igen Vergrößerung nutzbar sein, auch auf mobilen Geräten.
6. Zugängliche Formulare - jedes Feld muss eine korrekt zugewiesene Bezeichnung haben.
7. Logische Inhaltsstruktur - Überschriften, Navigation und Schaltflächen müssen eine logische Hierarchie aufweisen.
8. Tagging der Seitensprache - die Sprache der Website muss mit dem entsprechenden Tag korrekt definiert sein.
9. Sichtbarer und übersichtlicher Fokus der Steuerelemente - aktive Steuerelemente müssen immer deutlich gekennzeichnet sein.
10. Größe der anklickbaren Elemente - Schaltflächen müssen auch auf einem Mobiltelefon mit einer Mindestgröße von 24x24 px gut lesbar sein.
11. Steuerung ohne Ziehen - für Drag & Drop muss es eine Alternative geben, z. B. in Form einer Steuerung über Tastaturschaltflächen.
12. Konsistente Hilfe und Kontakt - Navigation, Kontakt und Hilfe müssen immer verfügbar sein.
13. Veröffentlichte Erklärung zur Barrierefreiheit - Informationen über die Einhaltung der Vorschriften und die dafür verwendeten Werkzeuge und Verfahren müssen auf einer separaten, gut sichtbaren Unterseite oder in den Allgemeinen Geschäftsbedingungen öffentlich zugänglich gemacht werden.

Dieser Artikel kann als Leitfaden für alle dienen , die sich dafür entscheiden, die Barrierefreiheit selbst zu verwalten. Wenn Sie die Anpassung Ihrer E-Commerce-Website selbst in Angriff nehmen wollen, empfehlen wir Ihnen, die nachstehende Checkliste zu befolgen, jeden Bereich der Website durchzugehen und zu ermitteln, was angepasst werden muss. Dazu gehört auch die Verpflichtung, eine Erklärung zur Zugänglichkeit zu erstellen, die seit dem 28. Juni auf der Website veröffentlicht werden muss. Dieses Dokument soll laut Gesetz zusammenfassen, wie Ihr E-Shop die Anforderungen an die Zugänglichkeit erfüllt und welche Hilfsmittel oder Verfahren Sie zu deren Umsetzung verwendet haben.

Verfahren zur Prüfung der Kompatibilität mit der Zugänglichkeitserklärung

Eine grundlegende Zusammenfassung des Prozesses:

1. Beginnen Sie mit der Prüfung der Website mit den aufgelisteten Werkzeugen.
2. Überprüfen Sie die Anforderungen - testen Sie jeden Punkt und korrigieren Sie ihn, falls nötig.
3. Konsultieren Sie den Bildschirmleser und überprüfen Sie jede Änderung mit einem automatischen Test.
4. Halten Sie die Seite zur Erfüllung der Anforderungen auf dem neuesten Stand und geben Sie an, wie die einzelnen Punkte erfüllt wurden.
5. Ergebnis: Die Website/der E-Shop ist gesetzeskonform und wird von Ihnen laufend gepflegt.

Testen mit Bildschirmlesegeräten:

Bildschirmlesegeräte

• NVDA (Windows, kostenlos)
  • NVDA-Website (Tschechisch und Englisch)
  • Der am weitesten verbreitete Screenreader unter Windows, geeignet zum Testen gängiger Websites.
  • Mit Unterstützung für die Tastatursteuerung.
• JAWS (Windows, kostenpflichtig, aber weit verbreitet)
  • JAWS-Website
  • Professionelle Lösung für Blinde, unterstützt komplexe Webanwendungen.
• VoiceOver (macOS/iOS, kostenlos)
  • Eingebautes Lesegerät im MacBook/iPhone/iPad.
  • Aktivierung in den Einstellungen für Barrierefreiheit.
• TalkBack (Android, kostenlos)
  • Eingebautes Lesegerät auf Android-Telefonen
  • Aktivierung in den Einstellungen -> Barrierefreiheit.

Test-Anleitungen

• Web-Tests mit NVDA (WebAIM)
• Erste Schritte mit VoiceOver auf dem Mac

Werkzeuge für Zugänglichkeitstests:

• Zur schnellen Überprüfung auf grundlegende Probleme.
  • axe DevTools (Chrome/Firefox-Erweiterung)
  • Lighthouse (Werkzeug in Chrome DevTools)
  • WAVE: Online-Prüfung hier

Prüfverfahren und Workarounds nach Bedarf

1. Tastaturzugänglichkeit

• Aufgabe: Alle Funktionen und die Navigation müssen nur über die Tastatur (Tab, Enter, Leertaste, Pfeiltasten) bedienbar sein.
• Umsetzung:
  • Testen Sie das Navigieren (Tab/Shift Tab) durch alle Steuerelemente.
  • Verwenden Sie keine Nicht-Standard-Widgets ohne korrekte ARIA-Beschriftung.
  • Setzen Sie den Tabindex korrekt, wo nötig.
  • Blockieren Sie keine Benutzer in modalen Fenstern.

2. Kompatibilität mit Bildschirmlesern

• Aufgabe: Überprüfen Sie, ob die Website mit Bildschirmlesegeräten ordnungsgemäß lesbar und navigierbar ist, und korrigieren Sie sie gegebenenfalls gemäß den Zugänglichkeitsrichtlinien
• Umsetzung:
  • Semantische HTML-Tags (<h1>, <nav>, <main>, <button>, <label>, usw.) werden verwendet.
  • Jedes Bild hat ein aussagekräftiges alt-Attribut.
  • Alle Formularelemente haben ein zugehöriges <label>.
  • Grafische Elemente und Icons werden nicht ohne textliche Beschreibung verwendet; versteckter Text oder ARIA-Labels werden bei Bedarf hinzugefügt.
  • Überschriften verwenden die richtige Ebene (<h1>, <h2>, ... ohne Ebenen zu überspringen).
  • Dynamische Inhalte (modale Fenster, Dialoge) werden mit ARIA-Attributen gekennzeichnet (z.B. role="dialog", aria-live).
  • Die Sprache der Seite ist korrekt eingestellt (z. B. <html lang="de">).
  • Das Menü befindet sich in <nav> und ist für Screenreader beschrieben (aria-label="Hauptnavigation").
  • Die Navigationslinks haben beschreibende Namen.

3. Textalternativen für Bilder und Medien

• Aufgabe: Jedes Bild muss ein aussagekräftiges alt-Attribut haben. Dekorative Bilder sollten ein leeres alt="" haben (visuelle Trennzeichen, sich wiederholende Illustrationssymbole, grafische Hintergründe usw.)
• Umsetzung:
  • HTML/Vorlagen überprüfen, Bilder kontrollieren.
  • Alt-Attribute hinzufügen oder bearbeiten.
  • Videos mit Untertiteln versehen oder transkribieren.

4. Ausreichender Farbkontrast

• Aufgabe: Text und Bedienelemente müssen gut lesbar sein (Kontrastverhältnis mindestens 4,5:1).
• Umsetzung:
  • Überprüfen Sie die Hauptfarben mit dem WebAIM Contrast Checker.
  • Passen Sie die Farben im CSS nach Bedarf an.

5. Textvergrößerung und Reaktionsfähigkeit

• Herausforderung: Die Website muss mit einer Textvergrößerung von bis zu 200 % und auf allen Geräten funktionieren.
• Umsetzung:
  • Verwenden Sie relative Einheiten (em, rem, %) statt px (um maximale Kompatibilität zwischen Geräten, Browsern und unterstützenden Technologien zu gewährleisten).
  • Testen Sie den Zoom im Browser.
  • Testen Sie das Verhalten auf Mobilgeräten/Tablets (responsive Design).

6. Barrierefreie Formulare

• Aufgabe: Jedes Eingabeelement hat ein zugehöriges <label>, Fehlermeldungen sind eindeutig.
• Umsetzung:
  • Überprüfen Sie alle Formulare.
  • Jedes Feld muss ein sichtbares Label haben.
  • Fehlermeldungen müssen den Lesern zur Verfügung gestellt werden (aria-live, role="alert").

7. Logische Struktur des Inhalts

• Herausforderung: Richtige Verwendung von Tags (Header, Nav, Main, Footer, Button, Label, etc.), der Nutzer kann leicht durch den Inhalt navigieren, Navigationselemente sind klar und vorhersehbar.
• Umsetzung:
  • Gehen Sie das HTML durch, prüfen Sie die korrekte Hierarchie der Überschriften (<h1>, <h2>, ...).
  • Verwendung von <button>
  • Das Menü befindet sich in <nav> und ist für die Leser beschrieben (aria-label="Hauptnavigation")
  • Code validieren: W3C-Validator

8. Bezeichnung der Seitensprache

• Aufgabe: Die gesamte Seite deklariert die Hauptsprache mit <html lang="de">.
• Umsetzung:
  • Überprüfen Sie die Seitenvorlage.
  • Bei fremdsprachigem Inhalt ist die Änderung zu markieren.

9. Fokus - sichtbar, ausreichend wahrnehmbar

• Aufgabe: Der Fokus der Controls muss immer sichtbar sein und darf nicht überlagert werden und muss ausreichend sichtbar sein (z.B. Rahmen, Farbwechsel).
• Umsetzung:
  • Überprüfen Sie die Sichtbarkeit des Fokus bei allen interaktiven Elementen (Schaltflächen, Links, Formulare). Sicherstellen, dass der Fokus nicht von anderen Elementen überlagert wird
  • Ändern Sie CSS, um den Fokus deutlich sichtbar zu machen (Umriss, Box-Shadow oder Rahmen).
  • Überprüfen Sie dies mit einer reinen Tastatursteuerung (Tab/Shift Tab).

10. Minimale Zielgröße

• Aufgabe: Schaltflächen und Bedienelemente sollten mindestens 24×24 px groß sein, damit sie auf Touch-Geräten bequem bedient werden können.
• Umsetzung:
  • Prüfen Sie, ob jedes anklickbare Element (Schaltflächen, Icons, Menülinks...) eine:
    • entweder die Größe selbst mindestens 24×24 px beträgt
    • oder eine ausreichende Füllung, um den anklickbaren Bereich zu vergrößern
  • Testen Sie auf Touch-Geräten (Handy, Tablet), dass das Element bequem und ohne Fehlerrisiko gedrückt werden kann.
  • Wenn eine Vergrößerung technisch nicht möglich ist (z. B. aufgrund des Designs), empfiehlt es sich, den aktiven Bereich des Steuerelements zu vergrößern.
• Sie muss nicht erfüllt werden, wenn:
  • Die Funktion kann mit einem anderen Steuerelement auf derselben Seite erfüllt werden, das dieses Kriterium erfüllt.
  • Das Ziel befindet sich in einem Satz oder seine Größe ist anderweitig durch die Höhe einer Textzeile, die nicht das Ziel ist, begrenzt.
  • Alle Ausnahmen

11. Steuerung ohne Ziehen

• Zweck: Die Funktionen auf der Website dürfen nicht ausschließlich auf Drag & Drop beruhen. Der Benutzer muss die Möglichkeit haben, diese Funktionen auf andere Weise zu steuern - zum Beispiel durch Klicken oder mit der Tastatur.
• Umsetzung:
  • Überprüfen Sie die Funktionalität ohne Maus, nur mit der Tastatur und in einer Screenreader-Umgebung.
  • Wenn es keine Alternative gibt, muss die Funktion überdacht oder neu gestaltet werden.

12. Hilfe, Navigation, Kontaktmöglichkeiten

• Aufgabe: Wenn eine Website Kontakt- oder Supportoptionen (z. B. E-Mail, Hilfe, Chat) anbietet, müssen diese auf allen Seiten zugänglich und einheitlich platziert sein. Das Gleiche gilt für die Navigation, die Hilfe usw.
• Umsetzung:
  • Stellen Sie sicher, dass unterstützende Elemente (Navigation, Kontakte...) vorhanden sind:
    • sichtbar, zugänglich und funktionell
    • einheitlich auf allen Seiten der Website positioniert sind
  • Überprüfen Sie, ob sie nur mit der Tastatur bedient werden können.

13. Informationen zur Barrierefreiheit in öffentlichen Dokumenten

• Aufgabe: Veröffentlichung von Informationen über die Erfüllung von Zugänglichkeitsanforderungen in den allgemeinen Geschäftsbedingungen oder im Internet.
• Umsetzung:
  • Beschreiben Sie in den Allgemeinen Geschäftsbedingungen oder auf einer separaten Seite, wie der Dienst die Anforderungen an die Zugänglichkeit erfüllt.
  • Stellen Sie auf Anfrage Informationen in Audioform zur Verfügung.
  • Stellen Sie sicher, dass die Informationen in einem zugänglichen Format vorliegen (lesbarer Text, nicht nur ein Bild).