NEUE Online-Seminare – Termin sichern und mit Jimdo-Handbuch.de bis zu 15 % sparen

Fruits & Harvest, Digitalagentur, Alexander Kerscher
Fruits & Harvest, Digitalagentur, Alexander Kerscher

Barrierefreiheit? Der Stand der Dinge.

Dieser Beitrag dient der allgemeinen Information und stellt keine Rechtsberatung dar.

Das kam ja wieder mal so überraschend.

Erinnert sich noch jemand an den 25. Mai 2018?

Es war der Tag der Einführung der Datenschutz-Grundverordnung in Deutschland und das Chaos in den Agenturen war perfekt. Panik überall, topbezahlte Anwälte sendeten sicherheitshalber nochmal 13 Seiten wirre Datenschutz-Erklärungen für Ihre Mandanten und  manch einer der all dem nervlich nicht gewachsen war, schaltete kurzerhand den gutlaufenden Online-Shop aus Angst vor drakonischen Geldbußen ab.  Und das alles an einem sonnigen Freitag. 

Ein großer Tag für den Datenschutz und eine Sternstunde des Halbwissens. Irgendwie erinnert das Thema Barrierefreiheit doch sehr an diesen Tag. Zeit für einen entspannten Blick auf das Geschehen.

Kostenloses PopUp erstellen

Einmal quer durch’s Dorf getrieben: Barrierefreiheit

Hey, ist unsere Seite schon barrierefrei?

Huch nein, wann soll ich das denn schaffen? Wer ehrlich ist schiebt das das Thema gefühlt seit Oktober des letzten Jahres vor sich her auf der Suche nach verbindlichen Informationen und verlässlichen technischen Vorgaben. Und auf einmal ist der Termin schon wieder so nah. Ach, Déjà vu !

Nein, man ist nicht alleine mit dieser Empfindung. Das zeigen auch mir die Gespräche mit meinem Netzwerk, den Entwicklern und den Kolleginnen und Kollegen aus den großen und den kleine Gewerken. Wir sind halt mittlerweile alle doch etwas abgehärtet wenn es darum geht, die nächste Sau die durch’s digitale Dorf getrieben wird galant wieder einzufangen.  Oder?

Wichtig? Ja! – Panik? Nein.

Barrierefrei – das ist wie ein Echo, das aus den frühen 00er Jahren wieder an mein Ohr gelangt. Gerade öffentliche Seiten waren schon mal mehr oder weniger erfolgreich dazu verdammt, mangels browserfähiger Technologie (herzlichen Gruß an den Internet Explorer 6 und danke für nichts!) und reduzierten Darstellungsmöglichkeiten für Mechanismen zu sorgen, die es Menschen mit Einschränkungen ermöglichten Webseiten – teilweise unter Zuhilfenahme unfassbar teurer Zusatzsoftware und Eingabegeräte – zu nutzen oder am aufkeimenden E-Commerce teilzunehmen. 

Nun also zweiter Anlauf zu dem Thema und wir sind uns einig: Genau wie Datenschutz ist es wichtig und richtig. Aber eben auch sehr wirr gespielt.

Angstkeule: „Was passiert wenn Sie jetzt nicht handeln“

In den letzten Wochen werden mir viele E-Mails gezeigt, in denen Kunden von umtriebigen und sofort zur Rettung bereiten Dienstleistern über „neue gesetzliche Regelungen“ informiert werden. Gerade wurde die Seite mal „zufällig auf Barrierefreiheit geprüft“ (natürlich nicht bestanden) und jetzt geht es um Gesetze, die Barrierefreiheit für Webseiten „verpflichtend“ machen. Dann noch ein paar „informative Links“ zum Thema in denen die Überschrift „Was passiert wenn Sie jetzt nicht handeln“ den verschreckten Webbetreibern entgegendonnert. Dazu eine Salve saftige Texte zu den drohenden Konsequenzen, dem ruinierten Ruf als Unternehmen, Bußgeldern im 6-stelligen Bereich, verlorenen Marktanteilen, SEO-Schäden, Haarausfall und … na, soll ich weitermachen?

Die Championsleague des Lösungsverkaufs.
Schämt euch.

Fakten, Zuständigkeiten und eine erste Einschätzung

Was bedeutet barrierefreie Webseite?

Mal ganz ohne Gesetztestext:

Eine Website ist barrierefrei, wenn sie so gestaltet ist, dass wirklich alle Menschen sie problemlos nutzen können – ganz gleich, ob sie körperliche, geistige oder sensorische Einschränkungen haben.

Dazu gehören auch Personen, die auf unterstützende Technologien wie Screenreader oder besondere Eingabegeräte angewiesen sind.

Um welche Gesetze geht es da und um welche konkreten Fristen?

Gesetzestext (PDF, Quelle bmas.de)

Ein bisschen Bettlektüre. Sind nur 23 Seiten.

Es geht um das
„Gesetz zur Umsetzung der Richtlinie (EU) 2019/882 des Europäischen Parlaments und des Rates über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen und zur Änderung anderer Gesetze“

Fristen

Im Zusammenhang mit Webseiten, die vor Juni 2025 erstellt wurden, gelten die Fristen aus dem Barrierefreiheitsstärkungsgesetz (BFSG) – das ist das deutsche Umsetzungsgesetz zur EU-Richtlinie European Accessibility Act (EAA).

Frist: 28. Juni 2025

Ab diesem Datum müssen private Unternehmen in der EU (also auch in Deutschland) barrierefreie digitale Produkte und Dienstleistungen anbieten – inkl. Webseiten und Onlineshops.

Gilt das denn für jede Webseite?

Und es gibt eben doch mehr Ausnahmen als gedacht. Hier geht’s zum emfohlen JIMDO-Selbsttest den man auch ganz ohne JIMDO-Webseite nutzen kann.

Nein. Es gilt für:

  • Webshops & E-Commerce-Dienstleistungen
    (z. B. Online-Kaufprozesse, Bestell- und Zahlungsfunktionen)

  • Digitale Dienstleistungen, die kommerziell angeboten werden (z. B. Banking-Apps, E-Reader, Ticketbuchungen)

Normale Unternehmenswebseiten (rein informativ) sind nicht automatisch betroffen – es sei denn, sie bieten interaktive Dienstleistungen (z. B. Bestellungen, Buchungen, Anmeldungen) an.

Was gilt für Webseiten, die vor dem 28. Juni 2025 erstellt wurden?

Bestandschutz gibt es nicht.

Alle aktiven digitalen Angebote, die unter das Gesetz fallen (siehe oben), müssen bis 28. Juni 2025 barrierefrei gemäß WCAG 2.1, Level AA (über EN 301 549) sein – egal wann sie erstellt wurden.

 

Gibt es eine Betriebsgröße bei der man die Seite nicht barrierefrei gestalten muss oder Ausnahmen von der Umstellung?

Art der Organisation Barrierefreiheit Pflicht? Ausnahme möglich?
Öffentliche Stellen Ja, nach BITV 2.0 Nur bei unverhältnismäßiger Belastung
Privates Unternehmen Ab 2025 teilweise nach BFSG Ja – Kleinstunternehmen meist ausgenommen
Kleinstunternehmen < 10 MA & < 2 Mio € Umsatz ✅ Meist ausgenommen

Auch hier noch einmal der Hinweis: dies ist keine Rechtsberatung – eine rechtsverbindliche Bewertung sollte in jedem Fall durch eine Anwältin oder Anwalt vorgenommen werden.

Ja, es gibt bestimmte Ausnahmen und Schwellenwerte, bei denen eine Verpflichtung zur barrierefreien Gestaltung einer Website nicht oder nur eingeschränkt gilt – allerdings hängt das stark davon ab, in welchem rechtlichen Rahmen man sich bewegt, z. B. ob man ein „Unternehmen“ ist oder eine öffentliche Stelle.

Hier ein Überblick für Deutschland, Stand 2025:
Quelle: eigene Recherchen, ChatGPT

1. Private Unternehmen:

Das Gesetz verpflichtet bestimmte Unternehmen zur Barrierefreiheit.

Ja, wenn du Produkte oder Dienstleistungen anbietest, die in der Richtlinie aufgezählt sind, z. B.:

  • Webseiten & Apps für E-Commerce (Online-Shops)
  • Bankdienstleistungen
  • Ticketautomaten
  • E-Books
  • …

Es betrifft also  nicht alle, sondern hauptsächlich größere Anbieter von digitalen Dienstleistungen.

Ausnahme für Kleinstunternehmen:

Kleinstunternehmen (weniger als 10 Mitarbeitende und weniger als 2 Mio. € Jahresumsatz) sind vom BFSG ausgenommen, wenn sie nur Dienstleistungen anbieten.

Das heißt: Wenn man z. B. eine kleine Agentur oder ein lokales Dienstleistungsunternehmen mit weniger als 10 Beschäftigten ist, muss man die eigene Website nach jetzigem Stand nicht zwingend barrierefrei umgestalten.

Wenn man z.B. einen Shop als Einzelunternehmer ohne Mitarbeitende betreibt und unter 2 Mio. € Umsatz bleibt, ist man weiterhin ein Kleinstunternehmen und nicht verpflichtet, den Shop barrierefrei umzubauen.

2. Öffentliche Stellen (z. B. Behörden, Kommunen, Universitäten):

Diese sind schon seit Jahren zur Barrierefreiheit verpflichtet – nach der BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung).

Ausnahmen gibt es hier nur in Fällen unverhältnismäßiger Belastung (z. B. fehlende Ressourcen), die nachgewiesen werden müssen.

Wer ist dafür verantwortlich Barrierefreiheit zu prüfen und einzufordern?

Empfehlung
Auch wenn man nicht gesetzlich verpflichtet bist, kann eine teilweise barrierefreie Gestaltung der Seiten und des Shops ein echter Vorteil sein:

  • Bessere Usability für alle

  • SEO-Vorteile (Google liebt gut strukturierte, zugängliche Seiten)

  • Mehr Reichweite (z. B. für ältere oder sehbehinderte Nutzer:innen)

  • Man ist vorbildlich vorbereitet, falls sich Gesetze oder die Unternehmensgröße ändern

Auch ist zu erwarten, dass wieder Lichtgestalten der Desinformation die Sachlage ausnutzen, um unlautere Abmahnungen zu versenden, Streit anzuzetteln und sich zu bereichern.

Hier kennen wir ja vor allem diese mysteriösen Verbraucherschutz-Organisatoren, die ein ominöses Gesamtinteresse vertreten und direkt mit der Abmahnung durch die Tür wackeln. Bester persönlicher Rat: niemals zahlen – direkt eine Fachanwältin oder Fachanwalt einschalten.

Die spannendste Frage überhaupt.

Die Verantwortung und Durchsetzung der Barrierefreiheit hängt davon ab, ob es sich um öffentliche oder private Anbieter handelt.

  • Private Unternehmen (wie Agenturen, Shops etc.) – BFSG
  • Termin: Ab Juni 2025
  • Für bestimmte private Unternehmen gilt das Barrierefreiheitsstärkungsgesetz (BFSG).

Zuständig für Überwachung und Durchsetzung ist:

  • Marktüberwachungsbehörde der Bundesländer
    (meist sind das die Landesbehörden für Verbraucherschutz oder technische Überwachung)

Was machen diese Behörden konkret?

  • Sie prüfen stichprobenartig oder bei Beschwerden, ob Webseiten, E-Books, Automaten, Online-Shops usw. barrierefrei gestaltet sind.
  • Sie können Beschwerden von Verbraucher:innen entgegennehmen.

Bei Verstößen können sie:

  • Nachbesserungen anordnen,
  • Bußgelder verhängen (je nach Schwere des Verstoßes).

Öffentliche Stellen – BITV 2.0
Für Behörden, Kommunen, Unis usw. gilt die Barrierefreiheit ja bereits seit Jahren.
Verantwortlich für Kontrolle & Beschwerden ist:

  • Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik (BFIT-Bund)
    plus: Beschwerdestellen auf Landesebene
  • Verbraucher können:
    Meldung abgeben, wenn eine öffentliche Website nicht barrierefrei ist.
  • Schlichtungsverfahren einleiten (z. B. über die Schlichtungsstelle BGG).

Und bei Einzelunternehmern?

Diese sind selbst verantwortlich dafür, die Website barrierefrei zu gestalten (sofern man überhaupt unter das BFSG fällt). Niemand wird die Seite routinemäßig kontrollieren außer irgendwelchen Abmahnern oder schräge Agenturen im Akquise-Delirium.

Erst wenn z. B. ein Nutzer eine formale Beschwerde einreicht, könnte das Thema aufpoppen.

Und was genau muss nun angepasst werden?

Sofern es denn möglich ist….

Level AA – das ist eine konkrete Anforderungsebene der „Web Content Accessibility Guidelines“ (WCAG) – dem internationalen Standard für Barrierefreiheit im Web.

Level AA = Barrierefreiheitsstufe

Die WCAG gliedern ihre Erfolgskriterien für Barrierefreiheit in 3 Stufen:

  • Level A Mindestanforderungen (absolute Basics)
  • Level AA Internationaler Standard, gesetzlich meist gefordert
    (z. B. im BFSG)
  • Level AAA Höchstmögliche Barrierefreiheit – schwer flächendeckend umzusetzen

Hier eine sehr schön dargestellte Liste aller Erfolgskriterien der WCAG 2.2.

1. Bedienbarkeit

  • Alle Funktionen mit Tastatur bedienbar (Tab, Enter, Esc etc.)

  • Fokus sichtbar (z. B. Umrandung beim Tabben durch die Seite)

  • Keine „Maus-only“-Funktionen (Hover-Effekte auch per Tastatur nutzbar)

2. Wahrnehmbarkeit

  • Gute Kontraste (Text vs. Hintergrund, Buttons, Links)
    Empfohlen: Mind. 4.5:1 für normalen Text

  • Alternativtexte (alt-Tags) für Bilder, Icons, Logos

  • Keine rein visuellen Inhalte ohne Beschreibung (z. B. Infografiken → kurze Erklärung)

3. Struktur & Orientierung

  • Korrekte HTML-Überschriftenstruktur (H1, H2, H3 … logisch aufgebaut)

  • Navigation ist einheitlich & logisch (Header, Menü, Footer)

  • Sprache der Seite definiert (<html lang="de">)

4. Mobil & Zoom-fähig

  • Seite funktioniert responsiv auf mobilen Geräten

  • Inhalte bleiben lesbar bis 200 % Zoom

  • Keine Inhalte überlappen oder verschwinden beim Vergrößern

5. Screenreader & Assistenzsysteme

  • Formulare haben beschriftete Felder (<label>)

  • Links und Buttons haben klare Bezeichnungen (nicht nur „Hier klicken“)

  • Keine „leeren“ Buttons oder Links (z. B. nur mit einem Icon)

6. Multimedia & Bewegung

  • Videos haben Untertitel oder Transkripte

  • Animationen können pausiert oder deaktiviert werden

  • Kein automatisches Abspielen von Ton/Videos beim Laden

7. Technisches (Bonus)

  • Sauberes HTML / ARIA-Rollen (für komplexere Komponenten)

  • Verwendung semantischer Tags (<main>, <nav>, <footer>)

  • Kein übermäßiger Einsatz von JavaScript für essentielle Inhalte

vollständige Kriterienliste

Zwischenergebnis + Empfehlung

  • Man sollte seine Webseite so oder so barrierefrei gestalten. Das bringt viele Vorteile für alle. Dies aber nicht in Panik und schon gar nicht nicht mit irgendwelchen (neuen) Dienstleistern die Panik erzeugen und dabei gezielt falsch informieren oder den sofortigen Untergang prophezeien und dies als Argument heranziehen.
  • Es ist im Grunde alles andere als wirklich sonnenklar, wer nun eigentlich pünktlich zum 28. Juni 2025 die Webseite barrierefrei bereithalten sollte. Große Unternehmen und Shops sollten aber zügig aktiv werden. Keiner Hinweis: der Aufwand hält sich bei vielen Webseiten im Grenzen oder ist schon teilweise erbracht (z.B. gute Alt-Tags auf Bildern)
  • Es ist zwar weitestgehend einheitlich festgehalten aber von der Machbarkeit und der individuellen Webkonstruktion oft unklar wie Barrierefreiheit im eigenen Web oder Shop aussehen kann (oder in bestimmten CMS oder Systemen überhaupt umgesetzt werden kann). Mut zur Lücke, aber unterwegs sein!
  • Wenn man aktiv wird:
    • erst einmal einen gründlichen Check machen
    • Maßnahmen identifizieren und besprechen
    • auch festhalten was aktuell ggf. nicht möglich ist
    • wichtige Eigenschaften des Webs oder Shops unbedingt aufrechterhalten (SEO, Funktionen)
    • priorisieren und umsetzen
    • nachträglich prüfen und schriftlich festhalten
    • Web / Shop nach Umstellung weiter beobachten in Performance und Suchergebnissen

Wie sind ausgewählte Webbaukästen, CMS und Shopsysteme auf das Thema eingestellt?

Jimdo Handbücher

Codes & Know How

Werden Sie zum JIMDO-Profi ohne Code-Kenntnisse mit den Bestsellern von Alexander Kerscher
JIMDO Expert, Jimdo Agentur

 

JIMDO

Zum jetzigen Zeitpunkt können nicht alle Jimdo Websites barrierefrei gestaltet werden, aber wir arbeiten aktiv daran, die Barrierefreiheit auf allen Jimdo Websites zu verbessern. Wir wissen, wie wichtig Barrierefreiheit ist und arbeiten kontinuierlich an Aktualisierungen und Verbesserungen auf der Grundlage von Zugänglichkeitsrichtlinien und Best Practices. Unser Ziel ist es, unsere Produkte für alle Nutzer:innen zugänglich zu machen, unabhängig von ihren Fähigkeiten.


JIMDO Creator

Unser Hauptaugenmerk bei Jimdo Creator liegt auf Flexibilität und Kreativität.  Creator bietet seinen Nutzer:innen eine breite Palette an Funktionen, mit denen sie ihre Websites nach ihren eigenen Vorstellungen gestalten können. Dies bedeutet daher auch, dass die von dir gestaltete Website mitunter nicht für jeden vollständig zugänglich ist.

Quelle: jimdo.com

Klar. Ein Webbaukasten (insbesondere mit zwei unterschiedlichen Haupt-Technologien) hat es strukturell betrachtet nicht ganz so leicht, neue Code-Strukturen und Features in ein System mit komplexesten Deployment-Strukturen zu integrieren und das mal eben auf bestehende und neue Seiten auszurollen. 

JIMDO hat im Zusammenhang mit dem Creator aber einige vorbildliche und hilfreiche Informations-Seiten und auch den erwähnten Barrierefreiheits-Check (Selbsttest: Ist meine Website vom Barrierefreiheitsgesetz betroffen? – Jimdo Creator Hilfe-Center) veröffentlicht.

Und aus der Erfahrung: man kann sich bei JIMDO meistens auf eine Lösung oder ein Parieren des Problems verlassen. 

Lesenswert:

Weitere JIMDO Creator Infos und Optimierung

Optimierung der digitalen Barrierefreiheit in einem Jimdo Creator-Shop

1. Verwendung von klarem und einfachem Design: Ein einfaches und benutzerfreundliches Design ist der Schlüssel zur digitalen Barrierefreiheit. Vermeiden Sie überladene Layouts, verwenden Sie klare Schriftarten und Farben, und stellen Sie sicher, dass der Text gut lesbar ist.

2. Alternative Texte für Bilder: Für Nutzer mit Sehbehinderungen sind alternative Texte für Bilder wichtig, da sie Beschreibungen des Bildinhalts bieten. In einem Jimdo Creator-Shop können Sie alternative Texte für Bilder ganz einfach hinzufügen, um die Zugänglichkeit zu verbessern.

3. Verwendung von Überschriften und Listen: Strukturieren Sie Ihren Inhalt mit Überschriften und Listen, um die Navigation zu erleichtern. Dies unterstützt nicht nur Screenreader, sondern verbessert auch die Lesbarkeit für alle Nutzer.

4. Vorlesefunktion integrieren: Eine Vorlesefunktion ermöglicht es Nutzern, sich den Text vorlesen zu lassen. Diese Funktion kann die Barrierefreiheit Ihres Jimdo Creator-Shops erheblich verbessern und die Reichweite Ihrer Zielgruppe erweitern.

5. Tastaturnavigation optimieren: Stellen Sie sicher, dass alle Funktionen und Inhalte Ihres Online-Shops auch über die Tastatur navigierbar sind. Dies ist besonders wichtig für Nutzer mit motorischen Beeinträchtigungen, die nicht mit der Maus navigieren können.

6. Farbkontraste beachten: Achten Sie auf ausreichende Farbkontraste zwischen Text und Hintergrund, um die Lesbarkeit zu verbessern, insbesondere für Nutzer mit Sehschwierigkeiten.

Die digitale Barrierefreiheit ist ein wichtiger Aspekt bei der Gestaltung von Websites, insbesondere bei Online-Shops. Durch die Optimierung der Barrierefreiheit in einem Jimdo Creator-Shop können Sie sicherstellen, dass Ihr Shop von einer breiten Zielgruppe genutzt werden kann im Bemühen, die rechtlichen Anforderungen zu erfüllen. 

WordPress + WooCommerce Agentur

WORDPRESS

Eines vorweg: es gibt nicht „das eine Plugin“ mit dem sich auf Knopfdruck „Barrierefreiheit“ einstellen lässt. Auch wenn es dauernd zu lesen ist. Punkt.

Da WordPress auch keine wirkliche verantwortliche Unternehmens- oder unique Herstellerstruktur besitzt (wenn wir das WordPress Project mal hier außen vor lassen) liegt hier auch wenig Sinn darin, auf Hilfe von oben zu warten. Da muss man selber (oder der Dienstleister) die Ärmel hochkrempeln.

Sehr empfehlenswert in dies Zusammenhang sind die folgenden Links, bei denen konkrete Plugin-Lösungen empfohlen werden, die wir bereits positiv getestet haben.

 

Im Detail:

  • WordPress Core (also das Grundsystem ohne Plugins oder Themes) verfolgt WCAG 2.1 AA-Standards (Web Content Accessibility Guidelines) grundsätzlich als Ziel.

  • Es gibt ein eigenes Accessibility-Team im WordPress-Projekt, das regelmäßig Verbesserungen und Tests durchführt.

  • Der Standard-Editor Gutenberg hatte anfangs Accessibility-Probleme, aber viele wurden seitdem behoben. Trotzdem gibt es noch Kritikpunkte – insbesondere im Bereich Tastaturnavigation und Screenreader-Kompatibilität.

  • Standard-Themes wie Twenty Twenty-One oder Twenty Twenty-Two gelten als vergleichsweise gut zugänglich.

Barrierefreiheit bei WooCommerce:

Aktueller Stand:

  • WooCommerce basiert vollständig auf WordPress und erbt viele seiner Accessibility-Merkmale.

  • Das WooCommerce-Core-Plugin wird regelmäßig auf Barrierefreiheit getestet, aber:

    • Nicht alle Themes und Extensions (Erweiterungen) sind barrierefrei!

    • Produktdarstellungen, Filterfunktionen und Checkout-Prozesse können für Screenreader oder Nutzer mit motorischen Einschränkungen Hürden darstellen, wenn sie nicht speziell optimiert wurden.

  • WooCommerce bietet Hooks und Filter, die eine barrierefreundliche Anpassung erleichtern.

Wie kann man eine WordPress-Seite barrierefreier machen?

Hier sind die wichtigsten Maßnahmen, um WordPress und WooCommerce barrierefreier zu gestalten:

1. Themes anpassen

  • Navigation, Farbkontraste, Fokusmarkierungen, ARIA-Labels und die semantische Struktur prüfen und optimieren.

2. Tastaturnavigation und Fokussteuerung sicherstellen

  • Alle interaktiven Elemente (Menüs, Formulare, Buttons) sollten mit der Tab-Taste erreichbar und steuerbar sein.

  • Visuelle Fokus-Indikatoren dürfen nicht entfernt oder versteckt werden.

3. Screenreader-Kompatibilität

  • Nutze semantisches HTML: Überschriftenhierarchie korrekt anwenden (<h1> bis <h6>), Listen, Tabellen, Buttons statt divs.

  • Ergänze nötige ARIA-Rollen und -Attribute, z.B. aria-label, aria-live, aria-expanded.

4. Formulare und WooCommerce-Checkout optimieren

  • Alle Eingabefelder sollten ein zugeordnetes <label> haben.

  • Validierungsfehler müssen verständlich und visuell wie akustisch kommuniziert werden.

  • Visuelle Hinweise (z.B. Pflichtfeldsterne) zusätzlich textlich beschreiben.

5. Farben & Kontraste prüfen

  • Der Kontrast zwischen Text und Hintergrund sollte mindestens 4.5:1 betragen (WCAG AA).

  • Tools: WAVE, Contrast Checker

6. Alternative Texte für Bilder

  • Jeder img-Tag braucht ein aussagekräftiges alt-Attribut.

  • Bei dekorativen Bildern: alt=""

7. Barrierefreiheitstools & Plugins verwenden

  • WP Accessibility: Hilft bei typischen Fehlern, z.B. Skip-Links, Alt-Text-Warnungen, Kontrastverbesserung.

  • Accessibility Checker von Equalize Digital: Gibt sofort Feedback im Editor.

8. Regelmäßige Tests durchführen

  • Tools: axe DevTools, NVDA Screenreader, VoiceOver (Mac)

  • manuelle Tests zusätzlich zu automatisierten Scans

Shopify Agentur

SHOPIFY

Auch bei Shopify gibt es nicht „die eine App“, mit der sich Barrierefreiheit auf Knopfdruck erledigen lässt. Das ist ein weitverbreiteter Irrglaube. Punkt.

Shopify ist zwar ein professionelles E-Commerce-System mit einem Unternehmen dahinter, aber auch hier gilt: Wer einen wirklich barrierefreien Online-Shop haben will, muss sich aktiv darum kümmern – oder jemanden damit beauftragen. Die gute Nachricht: Die Grundlagen sind solide, aber nicht perfekt.

Sehr empfehlenswert sind in diesem Zusammenhang folgende Ressourcen, bei denen konkrete App-Lösungen oder Anpassungsstrategien vorgestellt werden, die wir bereits positiv getestet haben:

Im Detail:

Shopify hat sich in den letzten Jahren sichtbar Mühe gegeben, das Thema Barrierefreiheit ernst zu nehmen:

  • Der Core von Shopify (also das grundlegende System inkl. Storefront-Renderer) orientiert sich an den WCAG 2.1 AA-Richtlinien.

  • Viele offizielle Themes im Shopify Theme Store sind mittlerweile mit dem Label „Accessibility Ready“ gekennzeichnet. Das ist ein guter Startpunkt.

  • Shopify stellt Entwicklern im Theme-Code semantisch sinnvolle HTML-Bausteine und ARIA-Attribute bereit – aber die Verantwortung für deren Nutzung liegt beim Theme-Entwickler oder Shop-Owner.

  • Die wichtigsten Einschränkungen betreffen häufig nicht den Core selbst, sondern die Kombination aus Apps, benutzerdefiniertem Code und Drittanbieter-Themes.

Wie kann man einen Shopify-Shop barrierefreier machen?

Hier sind die wichtigsten Maßnahmen, um einen Shopify-Shop (Frontend) besser in Richtung Barrierefreiheit zu optimieren:

1. Themes sorgfältig auswählen und anpassen

  • Nutze ein Theme mit „Accessibility Ready“-Kennzeichnung aus dem offiziellen Shopify Theme Store.

  • Prüfe Navigation, Farbkontraste, Fokusverhalten und semantische Struktur im Code.

  • Achte auf korrekt eingesetzte ARIA-Labels und Landmark-Rollen (role="navigation", main, banner etc.).

2. Tastaturbedienung sicherstellen

  • Alle wichtigen Bedienelemente (Menüs, Suche, Warenkorb, Buttons) sollten per Tab-Taste erreichbar sein.

  • Es muss eine sichtbare Fokusmarkierung geben – kein „Focus-Outline: none“ im CSS!

3. Screenreader-Kompatibilität sicherstellen

  • Vermeide es, Texte nur visuell darzustellen (z. B. per Icon oder Farbe), sondern ergänze sie mit beschreibendem Text oder ARIA-Labels.

  • Nutze semantisch korrektes HTML für Listen, Tabellen, Buttons und Formulare.

  • Prüfe mit NVDA oder VoiceOver, ob Screenreader wichtige Inhalte korrekt erfassen.

4. Formulare & Checkout optimieren

  • Alle Formulareingaben (auch bei Newsletter oder Kontaktformularen) brauchen zugewiesene <label>-Elemente.

  • Pflichtfelder klar kennzeichnen – nicht nur durch ein rotes Sternchen.

  • Fehlerhinweise bei der Validierung sollten sichtbar UND über Screenreader wahrnehmbar sein.

5. Farben & Kontraste prüfen

  • Farbkontraste müssen mindestens 4.5:1 betragen (Text zu Hintergrund).

  • Achte auf Hover-Effekte und Zustandserkennung bei interaktiven Elementen.

  • Tools: WAVE, Contrast Checker

6. Bilder mit Alt-Text versehen

  • Jeder Produktbild-Upload sollte einen aussagekräftigen Alt-Text erhalten.

  • Für dekorative Bilder: alt="" verwenden.

  • Achtung bei automatisierten Apps – viele erzeugen generische oder irrelevante Alt-Texte.

7. Accessibility-Apps gezielt einsetzen

  • Empfehlenswerte Tools sind z. B.:

    • Accessibility Enabler

    • UserWay Widget (mit Bedacht einsetzen)

    • Accessibly – bietet Fokusmodus, Kontrastumschalter, Lesemodi etc.

  • Wichtig: Diese Tools unterstützen, ersetzen aber keine strukturelle Optimierung.

8. Regelmäßig testen!

  • Nutze automatisierte Tests (z. B. axe DevTools, WAVE, Lighthouse).

  • Ergänze diese durch manuelle Tests mit Tastatur und Screenreader (NVDA, VoiceOver).

  • Versetze dich in die Perspektive der Nutzer – oder hole dir echtes Feedback aus der Zielgruppe.

    TYPO3 Agentur + Support

    TYPO3

    Der große Vorteil von TYPO3 ist: Es ist technologisch extrem flexibel und professionell ausgerichtet – und damit grundsätzlich hervorragend für barrierefreie Webseiten geeignet. Die Verantwortung dafür liegt allerdings zu 100 % bei der Umsetzung. TYPO3 bietet nur das technische  Fundament. Sehr empfehlenswert  (EN) in diesem Zusammenhang: https://typo3.com/de/blog/digital-accessibility-from-compliance-to-business-value 

    Im Detail:

    TYPO3 gilt in Sachen Barrierefreiheit als CMS mit sehr guten Voraussetzungen, aber es hängt stark davon ab, wie die Seite gebaut wird:

    • TYPO3 selbst (der Core) ist technisch so angelegt, dass barrierefreie Seiten möglich sind – WCAG 2.1 AA ist machbar und wird in offiziellen Projekten auch angestrebt.

    • Der Backend-Bereich von TYPO3 ist für Redakteure weitgehend barrierefrei bedienbar. Die Oberfläche nutzt viele ARIA-Rollen, semantische Strukturen und ist größtenteils screenreaderfreundlich.

    • Viele TYPO3-Extensions (vor allem Drittanbieter) wurden nicht mit Blick auf Accessibility entwickelt – hier ist Vorsicht geboten.

    • Der größte Hebel liegt im Frontend-Template und der HTML-Ausgabe: Was du baust oder dein Dienstleister liefert, entscheidet über die Barrierefreiheit.

    Wie kann man eine TYPO3-Website barrierefreier machen?

    Hier die wichtigsten Punkte, mit denen man TYPO3-Projekte in Richtung Barrierefreiheit optimieren kann:

    1. Templates strukturell barrierefrei umsetzen

    • Saubere, semantische HTML-Struktur mit Headings, Listen, ARIA-Landmarks.

    • Navigation logisch und konsistent aufbauen – am besten mit Skiplinks (<a href="#main-content">Zum Inhalt springen</a>).

    • Keine rein visuellen Strukturen (z. B. Tabellen fürs Layout) verwenden.

    2. Tastaturbedienung sicherstellen

    • Alle interaktiven Elemente (Menüs, Buttons, Modale, Formulare) müssen mit Tab erreichbar und steuerbar sein.

    • Fokuszustände im CSS sichtbar gestalten – nicht entfernen oder verstecken.

    3. Screenreader-Kompatibilität sicherstellen

    • Richtige HTML-Tags verwenden: Buttons statt <div onclick="">, beschriftete Formulare mit <label>.

    • Wo nötig: ARIA-Attribute sinnvoll einsetzen (aria-expanded, aria-live, aria-describedby etc.).

    • Visuelle Inhalte auch auditiv zugänglich machen – keine Icons ohne Textalternative.

    4. Formulare & Inhalte barrierefrei gestalten

    • Felder mit label versehen, Pflichtfelder eindeutig kennzeichnen.

    • Fehlermeldungen logisch zuordenbar und verständlich machen.

    • Redakteure schulen, damit Inhalte auch inhaltlich barrierefrei sind (Überschriftenstruktur, Bildbeschreibungen etc.).

    5. Farben & Kontraste

    • Kontrastverhältnisse: Mindestens 4.5:1 für normalen Text.

    • Farbige Hinweise (z. B. „grün = erfolgreich“) immer auch textlich erklären.

    • Tools: WAVE, Contrast Checker

    6. Bilder und Medien

    • Alle img-Tags mit sinnvollem alt-Text versehen.

    • TYPO3 bietet im Backend direkt die Möglichkeit, Alt-Texte einzugeben – diese Option muss verpflichtend genutzt werden.

    • Für Videos: Untertitel oder Transkripte bereitstellen.

    7. Redakteure einbeziehen

    • Die beste Technik nützt nichts, wenn Redakteure Inhalte falsch oder unstrukturiert pflegen.

    • Schulungen zu barrierefreier Inhaltserstellung: sinnvolle Überschriften, Alternativtexte, Tabellen korrekt einsetzen, etc.

    8. Accessibility Extensions und Tools

    • Es gibt einige hilfreiche TYPO3-Extensions, z. B.:

      • Accessible Captcha für barrierearme Formulare

      • Accessible Menu-Lösungen (oft selbst entwickelt)

    • Prüfe aber jede Extension kritisch: Viele stammen aus älteren TYPO3-Versionen und sind nicht auf Accessibility getestet.

    9. Regelmäßige Tests durchführen

    • Automatisierte Tests mit Lighthouse, axe, WAVE.

    • Manuelle Tests mit Screenreadern wie NVDA oder VoiceOver.

    • Nutze Tastaturtests und prüfe die Seite mit deaktivierten Stylesheets, um rein strukturelle Probleme zu erkennen.

    TYPO3 bringt also technisch alles mit, um barrierefreie Websites zu erstellen – aber es tut das nicht von allein. Das CMS ist eher ein Framework für Profis, was bedeutet: Wer es richtig macht, kann Top-Ergebnisse erzielen. Wer es falsch macht, leider auch das Gegenteil.

    Die größte Verantwortung liegt bei:

    • der Frontend-Entwicklung

    • der Template- und Extension-Auswahl

    • der Redaktionsarbeit

    Shopware Agentur und Support

    SHOPWARE

    Was Shopware betrifft, sieht die Lage so aus: Technisch möglich, in der Praxis oft vernachlässigt. Shopware bringt solide Grundfunktionen mit, aber viele Barrieren entstehen durch Themes, Plugins und individuelle Anpassungen. Wer es ernst meint mit digitaler Inklusion, muss auch bei Shopware selber anpacken. Empfehlenswerte Anlaufstellen:

      Im Detail:
      Shopware 6 hat eine moderne technologische Basis (Vue.js im Admin, Twig im Frontend) – aber Barrierefreiheit ist nicht durchgängig umgesetzt.

      • Im Admin-Bereich (also für Händler und Redakteure) fehlen teilweise Fokus-Indikatoren und ARIA-Rollen – die Barrierefreiheit für Backend-Nutzer ist nicht optimal.

      • Die Storefront (also das, was Kund:innen sehen) ist in der Basisversion nicht vollständig barrierefrei – viele Themes setzen nicht auf semantisches HTML, Tastaturnavigation ist lückenhaft.

      • Es gibt kein offizielles Accessibility-Zertifikat oder „Accessibility Ready“-Label für Themes oder Plugins.

      Fazit: Shopware kann barrierefrei sein, aber nur mit gezielter Frontend-Arbeit, Theme-Anpassung und redaktioneller Sorgfalt.

      Wie kann man einen Shopware-Shop barrierefreier machen?

      Hier die wichtigsten Maßnahmen, mit denen du deinen Shopware-Shop optimieren kannst:

      1. Themes überarbeiten (oder bewusst auswählen)

      • Keine Theme-Installation „out of the box“ ist komplett barrierefrei.

      • Achte auf:

        • Semantisch korrektes HTML

        • Skiplinks (z. B. „Zum Hauptinhalt springen“)

        • Rollen wie main, nav, banner und sinnvolle aria-labels

      2. Tastaturnavigation prüfen und verbessern

      • Alle Menüpunkte, Buttons, Formulare und Slider sollten per Tab erreichbar sein.

      • Fokuszustände müssen sichtbar und eindeutig gestaltet sein (z. B. Outline, Schatten, Farbänderung).

      3. Screenreader-Kompatibilität herstellen

      • Vermeide JavaScript-only-Elemente ohne Fallback.

      • Nutze ARIA-Rollen sparsam, aber sinnvoll (aria-expanded, aria-labelledby).

      • Prüfe, ob Screenreader die Struktur korrekt erfassen (Produktname, Preis, Beschreibung, CTA etc.).

      4. Produktdetailseiten & Checkout-Prozess überarbeiten

      • Produktinformationen müssen in logischer Reihenfolge und korrekt ausgezeichnet sein.

      • Formulare brauchen saubere label-Zuweisungen und klare Fehlerhinweise.

      • Pflichtfelder sollten nicht nur visuell (z. B. durch Farbe oder Sternchen) erkennbar sein.

      5. Farbkontraste & visuelles Design

      • Texte und Bedienelemente brauchen hohe Kontraste (mindestens 4.5:1 laut WCAG 2.1 AA).

      • Nutze Kontrast-Tools wie WAVE oder den Color Contrast Checker

      6. Alternative Texte & Medienzugänglichkeit

      • Produktbilder müssen aussagekräftige Alt-Texte haben – idealerweise redaktionell gepflegt, nicht automatisch generiert.

      • Bei Videos: Untertitel, Transkripte oder Audiodeskriptionen bereitstellen.

      7. Plugins und Extensions prüfen

      • Viele Plugins erweitern Funktionen, aber brechen gleichzeitig Accessibility-Standards (Popups, Slider, Filter, Custom Checkouts).

      • Prüfe Plugins manuell auf Tastaturbedienbarkeit, Fokusführung, Screenreader-Verhalten.

      8. Redaktion und Content-Management

      • Barrierefreiheit endet nicht im Code:

        • Überschriften richtig gliedern

        • Tabellen nicht als Layout-Element missbrauchen

        • Klartext statt Marketingfloskeln

      • Schulung der Content-Teams = Pflicht!

      9. Testen, testen, testen

      • Automatisierte Checks mit Lighthouse, axe, WAVE.

      • Manuelle Screenreader-Tests mit NVDA (Windows), VoiceOver (Mac).

      • Nutze Tastaturtests (nur mit Tab, ohne Maus!) für die Navigation.

      Shopware ist nicht automatisch barrierefrei, aber es bietet die Möglichkeit, barrierefreie E-Commerce-Erlebnisse zu bauen.

      Was passiert wenn es rappelt?

      Ja, es kann Konsequenzen geben, wenn die Seite oder der Shop nicht barrierefrei ist. Aber zunächst mal muss dazu verpflichtet sein man erhält in der Regel erst eine Aufforderung zur Nachbesserung, bevor es teuer wird.

      Was zählt: Guter Wille, Strategie und Fortschritt.

      Wer sich jetzt vorbereitet (auch in Etappen), ist auf der sicheren Seite – nicht nur rechtlich, sondern auch aus Sicht von SEO, UX und Kundenzufriedenheit.

      1. Beschwerdeverfahren wird eingeleitet

      Wenn ein Nutzer (z. B. mit Sehbehinderung) eine offizielle Beschwerde einreicht, wird sie geprüft – in der Regel durch:

      • eine Marktüberwachungsbehörde (z. B. Bundesnetzagentur oder Landesbehörden) oder

      • ggf. Verbraucherschutzstellen oder Behindertenverbände

      Die Behörde prüft dann, ob ein Verstoß gegen die Barrierefreiheitsvorgaben des BFSG/EAA vorliegt.

      2. Aufforderung zur Nachbesserung

      • Betreiber erhält eine Frist zur freiwilligen Behebung der Mängel.

      • Es wird kein sofortiges Bußgeld verhängt – man hat also eine ausreichende Chance, zu reagieren.

      • Die Aufforderung kann sehr konkret sein (z. B. „Gestalten Sie … für Screenreader zugänglich innerhalb von 4 Wochen“).

      3. Bußgelder und Sanktionen (wenn nach Aufforderung nicht nachgebessert wird)

      Wenn nicht nachgebessert wird oder auf die Aufforderung nicht reagiert wird, drohen 

      • je nach Schwere und Dauer des Verstoßes hohe Bußgelder

      • Abmahnungen durch Wettbewerber oder Verbände

      • ggf. öffentliche Benennung als nicht-konform („naming and shaming“) – Reputationsschaden

      Wer ist betroffen?

      Kleinbetriebe mit weniger als 10 Mitarbeitenden UND unter 2 Mio. € Umsatz sind aktuell (Stand 2024/25) vom Gesetz ausgenommen. Aber Achtung: Diese Ausnahme schützt nicht vor Abmahnungen oder Beschwerden über Antidiskriminierungsgesetze.

      Was kann man tun, wenn es passiert?

      Wenn man verpflichtet ist und am 28.6. noch nicht voll konform ist und eine Beschwerde kommt:

      • reagieren – nicht ignorieren!
      • Nachweis erbringen, was man bereits unternommenhat (z. B. Checklisten, Schulungen, Audit-Dokumente, beauftragte Agenturen)
      • Konzept oder Zeitplan vorlegen, wie und wann konkret nachgebessert werden soll
      • Optional: Beratung durch auf Accessibility spezialisierte Kanzleien oder Berater

      Abschließend

      Das Thema ernstnehmen und anpacken, auch wenn viele noch nicht „müssen“. Selbst mit (dokumentierten) Teilergebnissen ist man gut unterwegs und kann sich auch besser zur Wehr setzen indem er oder sie aufweist, was genau er bereits unternimmt.

      Gerne unterstützen wir

      Dieser Beitrag dient der allgemeinen Information, erhebt nicht den Anspruch auf Vollständigkeit oder inhaltliche Korrektheit und stellt keine Rechtsberatung dar.