Barrierefreiheit umsetzen

Vorab: Unser Legal-Team analysiert fortwährend neue rechtliche Anforderungen und wir setzen diese - soweit sie in unsere Zuständigkeit fallen - fristgemäß um. Aber wir sind keine Rechtsanwälte, dürfen keine rechtsverbindlichen Auskünfte erteilen und übernehmen auch keine Gewähr für die Richtigkeit und Vollständigkeit dieser Angaben.

Ausnahme für Kleinstunternehmen

Online-Händler, die unter die Kleinstunternehmer-Ausnahme fallen, müssen grundsätzlich keine Maßnahmen zur Barrierefreiheit für ihren Online-Shop umsetzen.
Dies ist gegeben wenn

  • du weniger als 10 Beschäftigte hast UND
  • dein Jahresumsatz oder deine Jahresbilanzsumme unter 2 Millionen Euro beträgt.

Falls du Kleinstunternehmer bist und die folgenden Produkte verkaufst, musst du allerdings doch die Vorgaben zur Barrierefreiheit erfüllen:

  • Hardwaresysteme für Verbraucher einschließlich Betriebssysteme
    (z. B. Computer, Notebooks, Tablets, Laptops, Betriebssysteme für diese Geräte)

  • Verbraucherendgeräte mit interaktivem Leistungsumfang, die verwendet werden für:

    • Telekommunikationsdienste (z. B. Smartphones, Mobiltelefone, Tablets)
    • Zugang zu audiovisuellen Mediendiensten (z. B. Smart-TVs, Fernsehgeräte mit Internetzugang)

  • Selbstbedienungsterminals, darunter insbesondere:

    • Zahlungsterminals
    • Geldautomaten
    • Fahrausweisautomaten
    • Check-in-Automaten
    • Interaktive Selbstbedienungsterminals zur Bereitstellung von Informationen (Ausgenommen sind Terminals, die integraler Bestandteil von Fahrzeugen sind)

  • E-Book-Lesegeräte

  • Router (wird in einigen offiziellen Quellen zusätzlich genannt)

Diese Anpassungen kommen von VersaCommerce

  • Barrierefreie Checkout-Seiten
  • Kostenfreies barrierefreies Shop-Design SwiftEcom (verfügbar ab April 2025)

Diese Anforderungen musst du selbst umsetzen

Hier sind die Mindestanforderungen, die Online-Händler in Deutschland umsetzen müssen, um den neuen Regelungen zur Barrierefreiheit gemäß dem Barrierefreiheitsstärkungsgesetz (BFSG) zu entsprechen:

Allgemeine Anforderungen

Diese vier zentralen Kriterien hat der Gesetzgeber definiert:

  • Wahrnehmbarkeit: Inhalte müssen für alle Nutzer zugänglich sein, z. B. durch Textalternativen für Bilder und Untertitel für Videos.
  • Bedienbarkeit: Navigation muss ohne Maus möglich sein, z. B. durch Tastatursteuerung und Fokus-Indikatoren.
  • Verständlichkeit: Inhalte sollten in einfacher Sprache bereitgestellt werden, mit klaren Links und semantischem HTML.
  • Robustheit: Kompatibilität mit Hilfstechnologien wie Screenreadern sicherstellen.

Schauen wir nun, wie dies konkret in deinem Online-Shop umzusetzen ist.

Bilder und Grafiken

  • Füge Alt-Texte für alle Bilder hinzu, die den Inhalt oder die Funktion des Bildes beschreiben.
  • Stelle sicher, dass dekorative Bilder als „leer“ (z. B. alt="") gekennzeichnet sind, damit sie von Screenreadern ignoriert werden.

Videos und Multimedia

  • Biete Untertitel für alle Videos an.
  • Erstelle eine Textbeschreibung für audiovisuelle Inhalte.
  • Für Animationen oder bewegte Inhalte: Ermögliche das Anhalten, Wiederholen oder Verlangsamen.

Schriftgröße und Kontrast

  • Verwende eine Schriftgröße von mindestens 16px.
  • Stelle sicher, dass der Farbkontrast zwischen Text und Hintergrund mindestens 4,5:1 beträgt (WCAG-Anforderung). Hier kannst du dies prüfen.

Navigation

  • Gestalte die Navigation so, dass sie auch ohne Maus bedienbar ist (z. B. mit der Tastatur).
  • Markiere den aktuellen Fokus deutlich (z. B. durch farbliche Hervorhebung oder Umrandung).
  • Vermeide komplexe Dropdown-Menüs – nutze einfache und übersichtliche Navigationsstrukturen.

Formulare

  • Beschrifte alle Eingabefelder eindeutig mit sichtbaren Labels (z. B. „Name“, „E-Mail-Adresse“).
  • Gib klare Fehlermeldungen aus, wenn Nutzer*innen falsche Eingaben machen (z. B. „Bitte geben Sie eine gültige E-Mail-Adresse ein“).
  • Nutze ARIA-Attribute (z. B. aria-required="true"), damit Screenreader korrekt interpretieren können.

Mobile Ansicht

  • Stelle sicher, dass dein Shop responsiv ist und auf allen Geräten funktioniert.
  • Interaktive Elemente wie Buttons müssen groß genug sein (mindestens 48px Höhe/Breite) und genügend Abstand zueinander haben.
  • Vermeide Funktionen, die auf „Hover“ basieren – diese sind auf Touchscreens nicht nutzbar.

Hilfstechnologien unterstützen

  • Teste deinen Shop mit einem Screenreader (z. B. NVDA oder VoiceOver).
  • Vermeide komplexe JavaScript-Funktionen ohne Barrierefreiheitsprüfung – nutze ARIA-Rollen und Attribute.

Erklärung zur Barrierefreiheit

Erstelle eine Seite oder einen Abschnitt mit einer „Erklärung zur Barrierefreiheit“. Dort erklärst du:

  • Welche Maßnahmen du umgesetzt hast.
  • Welche Bereiche noch nicht barrierefrei sind (falls zutreffend).
  • Wie Nutzer*innen dich kontaktieren können, um Barrieren zu melden.

Feedback-Möglichkeiten

  • Richte ein Formular oder eine Kontaktmöglichkeit ein, über die Nutzer*innen Barrieren melden können.
  • Stelle sicher, dass dieses Formular selbst barrierefrei ist.

Regelmäßige Tests

  • Führe regelmäßige Tests durch, z. B. mit Tools wie WAVE oder Lighthouse (Barrierefreiheitsprüfung).
  • Lass deinen Shop von Personen mit Behinderungen testen, um echte Nutzungsszenarien abzudecken.