So klappt es mit dem barrierefreien Online-Shop

Der barrierefreie Online-Shop wird im Juni 2025 nicht nur zur Pflicht, sondern vielleicht auch Dein nächster Umsatz-Boost. In diesem Leitfaden für barrierefreie Online-Shops erfährst Du, wie Du Deinen Online-Shop so gestaltest, dass er allen Nutzenden – unabhängig von individuellen Fähigkeiten – einen reibungslosen Zugang bietet. Es gibt viel zu tun, los geht’s!

Rechtliche Grundlagen und wirtschaftliche Vorteile

Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt in Deutschland ab dem 28. Juni 2025 und verpflichtet praktisch alle Onlineshops zu barrierefreien Lösungen. Es gibt nur wenige Ausnahmen (weniger als 2 Mio. Jahresumsatz, weniger als 10 Angestellte). Grundlage wird die WCAG 2.2 beziehungsweise die EN 301 549. Bei Bedarf empfehlen wir Dir unseren Überblick über Barrierefreiheits-Gesetze, den Beitrag zum Barrierefreie-Website-Pflicht sowie unsere Erklärungen zu den WCAG-Konformitätsstufen.

Weil ein barrierefreier Online-Shop immer auch mit teilweise viel Arbeit verbunden ist, hier ein paar Fakten, die Deine Motivation hoch halten werden:

• SEO-Boost: Suchmaschinen wie Google bevorzugen nutzerfreundliche und barrierefreie Webseiten.
• Marktpotenzial:
  • Rund 15 % der Weltbevölkerung leben laut WHO mit einer Behinderung – ein signifikanter, oft unerschlossener Markt.
  • Vergesse auch nicht, dass die Bevölkerung altert und auch diese Zielgruppe barrierefreie Online-Shops bevorzugt. Gleiches gilt für technisch wenig versierte Personen.
  • Viel zu oft vergessen: Nicht jede Behinderung ist angeboren oder dauerhaft. Denke an Menschen, die zeitweise auf barrierefreie Lösungen (z. B. wegen einer Sportverletzung) angewiesen sind.
• Markenimage: Ein barrierefreier Onlineshop stärkt das Unternehmensimage und unterstreicht gesellschaftliches Engagement.

Barrierefreiheit Shop-Struktur

• Semantisches HTML nutzen: Verwende native HTML-Elemente wie <header>, <nav>, <main>, <aside>, <footer>, um Screenreadern eine klare Orientierung zu bieten. Das ist bei vielen Online-Shop-Lösungen bereits richtig definiert, wird häufig durch manuelle „Optimierungen“ allerdings falsch gemacht.
• Headings richtig setzen: Nutze eine einzige <h1> pro Webseite. Achte auf eine logische Überschriftenhierarchie ohne Sprünge. Auf eine <h1> folgt immer mindestens eine <h2>.
• Skip Links einfügen: Implementiere „Direkt zum Inhalt springen“-Links, damit Nutzende sofort zum Hauptbereich gelangen. Auch hier gilt wieder, dass das häufig bereits in einer brauchbaren Basisfunktion vorhanden ist. Achte darauf, durch manuelle Anpassungen keine zusätzlichen Barrieren einzubauen.
• ARIA-Landmarks verwenden: Ergänze Deine Seite mit ARIA-Rollen (z. B. role=“navigation“ für Menüs, role=“search“ für Suchfelder oder aria-live=“polite“ für dynamische Inhalte).

Barrierefreie Benutzerführung im Online-Shop

• Tastaturbedienbarkeit: Alle interaktiven Elemente müssen per Tastatur erreichbar sein. Achte auf eine logische Fokus-Reihenfolge und eine sichtbare Fokusmarkierung (z. B. mittels :focus-visible). Das ist der absolute Standard in der digitalen Barrierefreiheit und sollte höchste Priorität besitzen.
• Focus Management bei dynamischen Inhalten: Bei modalen Dialogen sollte der Fokus innerhalb des Elements „gefangen“ werden (Focus Trapping).
• Buttons versus Links: Button (<button>) sind dafür vorgesehen, Aktionen oder Interaktionen innerhalb der aktuellen Seite auszulösen (z. B. Formulare absenden, Modale öffnen, Inhalte dynamisch laden). Links (<a href=“…“> ) dienen primär der Navigation.

Ein Online-Shop braucht barrierefreie Formulare

• Klare Labels: Verwende anstelle von allein auf Platzhaltertext zu setzen. Kennzeichne Pflichtfelder mit aria-required=“true“.
• Sorge für verständliche Fehlermeldungen, die z. B. über aria-describedby referenziert werden. Nutze autocomplete-Attribute (z. B. autocomplete=“street-address“).
• Aussagekräftige Button- und Link-Texte: Vermeide unspezifische Beschriftungen wie „Hier klicken“ und wähle stattdessen konkrete Formulierungen (z. B. „Zum Warenkorb hinzufügen“). Bei Icons ohne Text ergänze ein aria-label.

Strukturierte Daten im E-Commerce

Integration strukturierter Daten: Verwende strukturierte Daten, um Barrierefreiheitsmerkmale explizit zu kennzeichnen. Dadurch können Suchmaschinen Deine Inhalte besser interpretieren und in Rich Snippets darstellen.

Beispiel:

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Ergonomische Tastatur",
  "accessibilityFeature": ["alternativeText", "highContrast"],
  "accessibilityHazard": "none",
  "offers": {
    "@type": "Offer",
    "price": "49.99",
    "priceCurrency": "EUR",
    "availability": "InStock"
  }
}

Alternative Inhalte für Medien

• Bilder
  • Verwende aussagekräftige Alt-Texte.
    • Schlecht: alt=“Bild123.jpg“
    • Besser: alt=“Blauer Turnschuh mit weißen Streifen auf Holzboden“
• Videos
  • Biete Untertitel (Captions) und Audiodeskriptionen an.
  • Stelle Transkriptionen für Podcasts und Produktvideos bereit.
  • Denke daran, das Untertitel auch barrierefrei sein müssen (Schriftgröße, barrierefreie Farben)

Barrierefreie Prozesse

Barrierefreier Checkout

• Vermeide unbedingt Zeitlimits ohne Vorwarnung (z. B. Timer mit aria-live=“assertive“).
• Setze auf schrittweise, übersichtliche Prozesse anstelle langer, komplexer Formulare.
• Halte den Checkout-Prozess so kurz wie möglich, verzichte auf die Abfrage irrelevanter Informationen

Captcha-Alternativen

• Ersetze klassische Bild-Captchas durch barrierefreie Lösungen wie Logikfragen oder reCAPTCHA v3.
• Prüfe die Zugänglichkeit auch von reCAPTCHA-Lösungen und evaluiere gegebenenfalls alternative Verifikationsmethoden.

Zahlungsmodalitäten

Achte darauf, dass eingebettete Zahlungsabwicklungen (z. B. in iFrames) ebenfalls barrierefrei gestaltet sind.

Vertragsschluss

Dein Online-Shop hat vermutlich eine abschließende Checkout-Zusammenfassung. Diese muss zwingend barrierefrei sein. Das betrifft auch möglicherweise eingebundene PDF-Dateien, z. B. Deiner AGB.

Denke außerdem daran, dass auch die aschnließende Dankeseite sowie die darauffolgende E-Mail-Kommunikation barrierefrei sein muss.

Tipps für Branchen und Plattformen

Mode

• Nutze hochauflösende Bilder mit aussagekräftigen Alt-Texten, um Details wie Stoffstrukturen und Designs zu vermitteln.
• Implementiere Filteroptionen, die auch mit Screenreadern kompatibel sind.
• Beispiel: Shopify-Themes wie „Prestige“ bieten oft gute Kontraste und klare Layouts.

Elektronik

• Stelle detaillierte technische Spezifikationen in strukturierten Tabellen bereit, die mit korrektem HTML umgesetzt sind.
• Sorge dafür, dass technische Daten von Screenreadern präzise interpretiert werden können.
• Beispiel: Magento-Themes wie „Ultimo“ lassen sich mit gezielten Anpassungen barrierefrei optimieren.

Lebensmittel

• Kennzeichne Inhaltsstoffe, Allergene und Nährwertinformationen übersichtlich.
• Setze auf klare Schriftarten und ausreichend kontrastreiche Farbgestaltung.
• Beispiel: WooCommerce in Kombination mit Plug-ins wie dem „Accessibility Toolkit“ unterstützt die Erstellung barrierefreier Produktseiten.

Shopify

• Wähle barrierefreie Themes, die WCAG-Standards entsprechen (z. B. das kostenlose Theme „Debut“ oder Premium-Themes wie „Prestige“).
• Achte darauf, dass Theme-Entwickler regelmäßige Updates anbieten.
• Prüfe ggf. verfügbare Apps zur automatisierten Accessibility-Prüfung.

WooCommerce

• Nutze WordPress-Plug-ins wie „WP Accessibility“ oder „Accessibility Widget“, um Barrierefreiheit zu unterstützen. Sei Dir aber bewusst, dass die Online-Shop-Barrierefreiheit dadurch nicht zum Selbstläufer wird.
• Stelle sicher, dass auch Drittanbieter-Erweiterungen regelmäßig auf barrierefreie Standards geprüft werden.

Magento

• Setze auf Themes, die speziell für Barrierefreiheit entwickelt wurden, oder optimiere bestehende Themes gemäß den WCAG-Richtlinien.
• Erweiterungen wie „Magento 2 Accessibility“ können dabei helfen, Navigation und Formulare barrierefrei zu gestalten.

Implementierung, Roadmap und Monitoring

Ein schrittweiser Ansatz erleichtert die Umstellung auf einen barrierefreien Onlineshop. Gerade jetzt, Anfang Februar 2025, da das BFSG schon bald in Kraft tritt.

Kurzfristige Maßnahmen (0–3 Monate):

• Durchführung eines initialen Accessibility-Audits mittels Tools wie Google Lighthouse, axe DevTools oder WAVE. Es gibt auch zahlreiche frei zugängliche Barrierefreiheit-Checklisten, die dabei als Schritt-für-Schritt-Anleitung dienen können.
• Identifikation, Priorisierung und Behebung erster kritischer Fehler (z. B. fehlende Alt-Texte, unzureichende Überschriftenstruktur, nicht erreichbare interaktive Elemente, Stichwort Tastaturbedienbarkeit).
• Erstellung einer Erklärung zur Barrierefreiheit mit allem, was dazu gehört.

Mittelfristige Maßnahmen (3–12 Monate):

• Integration von strukturierten Daten und Implementierung von Best Practices bei der Benutzerführung (z. B. Focus Management, korrekte ARIA-Attribute).
• Schulung von Mitarbeitenden und Entwickelnden im Bereich barrierefreies Design.
• Überprüfung und Anpassung von Drittanbieter-Plug-ins und Themes hinsichtlich Barrierefreiheit.

Langfristige Maßnahmen (ab 12 Monaten):

• Etablierung regelmäßiger interner Audits und externer Reviews, um die nachhaltige Einhaltung der Barrierefreiheitsstandards sicherzustellen.
• Kontinuierliche Integration von Nutzerfeedback – insbesondere von Menschen mit Behinderungen – zur weiteren Optimierung.
• Implementierung automatisierter Tests in Continuous-Integration-Pipelines.
• Regelmäßige Schulung aller relevanten Stakeholder.
• Dokumentation der Bemühungen, Fortschritte und offenen Aufgaben in der für die Außenkommunikation so wichtigen Erklärung zur Barrierefreiheit.

Noch Fragen?

Nun bist Du dran: Investiere in Barrierefreiheit – für mehr Reichweite, Umsatz und eine bessere Nutzererfahrung! Teste dafür Deinen Shop einfach mal selbst auf Barrierefreiheit. Starte mit leicht verständlichen Tools wie Google Lighthouse, dem WAVE-Plug-in und Deiner eigenen Tab-Taste und durch den Verzicht auf Deine Computer-Maus.

Solltest Du aber noch Fragen haben oder Hilfe beim Testen benötigen, lass es uns gerne wissen.