Website barrierefrei gestalten mit WCAG & BFSG – plus Checkliste

Eine barrierefreie Website zu erstellen, ist heute wichtiger denn je. Die Web Content Accessibility Guidelines (WCAG) sind dabei Dein wichtigster Leitfaden für digitale Barrierefreiheit. Mit diesen Richtlinien, entwickelt vom World Wide Web Consortium (W3C), machst Du Deine Website für alle Menschen zugänglich – unabhängig von deren Fähigkeiten oder Einschränkungen. Die Bedeutung einer barrierefreien Website wird ab Juni 2025 noch größer: Mit dem European Accessibility Act (EAA) und dem deutschen Barrierefreiheitsstärkungsgesetz (BFSG) werden die WCAG-Richtlinien für viele digitale Angebote verpflichtend. In diesem Guide erfährst Du alles Wichtige, um Deine Website barrierefrei zu gestalten!

Warum ist eine barrierefreie Website wichtig?

Die Zahlen sprechen für sich: Allein in Deutschland leben etwa 7,9 Millionen Menschen mit einer Schwerbehinderung. Weltweit sind es sogar über eine Milliarde Menschen, die von Einschränkungen betroffen sind. Und diese Menschen haben natürlich das Recht auf eine barrierefreie Website und gleichberechtigten Zugang zu digitalen Informationen und Dienstleistungen. Stell Dir zum Beispiel einen sehbehinderten Menschen vor: Alltägliche Dinge wie Online-Banking, digitale Behördengänge oder das Buchen von Fahrkarten werden zur echten Herausforderung. Ohne die richtige Umsetzung der WCAG-Richtlinien – also fehlende Alt-Texte bei Bildern oder schlecht strukturierte Überschriften und Textkontraste, die ein Screenreader erkennen und vorlesen kann – ist es für viele Menschen unmöglich, digitale Services selbstständig zu nutzen.

Eine barrierefreie Website nützt nicht nur Menschen mit Behinderungen. Auch ältere Menschen, Nutzer mit temporären Einschränkungen (wie nach Unfällen, Operationen, etc.) oder Menschen mit langsamer Internetverbindung profitieren von gut umgesetzter Accessibility.

Welche SEO-Relevanz hat das BFSG?

Auch wenn das Barrierefreiheitsgesetz in erster Linie rechtliche und soziale Ziele verfolgt, hat die Umsetzung auch einen positiven Nebeneffekt auf die SEO-Leistung von Websites sowie Shops. Denn Suchmaschinen bevorzugen gut strukturierte, benutzerfreundliche, barrierefreie Seiten, da sie eine bessere Benutzererfahrung und eine effizientere Indexierung ermöglichen. Google & Co. berücksichtigen die durch das BFSG umgesetzten Punkte auch als Rankingfaktor. Denn eine barrierefreie Website erhöht die Wahrscheinlichkeit, dass Besucher länger auf der Seite bleiben. Dadurch ergeben sich niedrigere Absprungraten, die sich positiv auf das SEO-Ranking auswirken.

Ein weiterer Win-Win ist, dass die Einhaltung der WCAG (Web Content Accessibility Guidelines) auch andere SEO-relevante Aspekte, wie etwa Alt-Texte für Bilder, semantisches HTML, Keyboard-Navigation oder strukturierte Daten und ARIA-Labels* umasst. Wer also seine Seite barrierefrei gestaltet, optimiert automatisch auch seine Sichtbarkeit in den Suchmaschinen. 

Barrierefreie Website wird Pflicht – Die rechtliche Situation

In Deutschland macht die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) eine barrierefreie Website für öffentliche Stellen verpflichtend. Das neue Barrierefreiheitsstärkungsgesetz (BFSG) erweitert diese Verpflichtung ab Juni 2025 auch auf private Unternehmen im B2C-Bereich. Es umfasst elektronische Geräte wie Computer und Tablets, digitale Dienstleistungen wie Banking und E-Commerce sowie Onlineshops. Ausgenommen sind Kleinstunternehmen, der B2B-Bereich und Fälle, in denen Barrierefreiheit die Funktionalität stark beeinträchtigen würde. Bei Nichteinhaltung drohen Bußgelder bis zu 100.000 Euro.

Gibt es Ausnahmen für das BFSG?

Ja, ausgenommen sind B2B-Onlineshops sowie kleine E-Commerce-Unternehmen. Kleinstunternehmen können sich auf die sogenannte Kleinunternehmerregelung berufen, wenn sie weniger als zehn Personen beschäftigen und entweder einen Jahresumsatz von höchstens 2 Millionen Euro erzielen oder deren Jahresbilanzsumme höchstens 2 Millionen Euro umfasst. Für diese besteht keine Pflicht zur barrierefreien Gestaltung ihres Webauftritts. Dennoch ist es empfehlenswert – aus sozialen und SEO-Gründen.

Was droht, wenn die Anforderungen an eine barrierefreie Shopgestaltung nicht umgesetzt werden?

Ob Produkte oder Webauftritte die Anforderungen des BFSG einhalten, prüfen die Marktüberwachungsbehörden der Bundesnetzagentur. Stellen diese fest, dass im Shop oder auf der Website die Barrierefreiheitsanforderungen nicht erfüllt sind, werden die Betreiber aufgefordert, diese umzusetzen. Bei Nichtbeachtung, drohen Verkaufsverbot, Rückruf oder Anordnung zur Schließung des Onlineshops. Da die Behörden sich gerade im Aufbau befinden, wird die Umsetzung schrittweise erfolgen und eher unterstützend als sanktionierend.

Mindestanforderungen an eine barrierefreie Website: Die WCAG

Die WCAG (Web Content Accessibility Guidelines) definieren den Standard für eine barrierefreie Website. Um die Anforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG) zu erfüllen, müssen Unternehmen die WCAG 2.1 auf Stufe AA umsetzen. Diese Guidelines stützen sich auf vier Kernprinzipien:

1. Wahrnehmbar machen: Jeder Nutzer soll alle Inhalte erfassen können – egal, ob er sieht, hört oder tastet. Das bedeutet zum Beispiel, dass Bilder Beschreibungen und Videos Untertitel brauchen.

2. Einfach bedienbar: Websites müssen sich problemlos steuern lassen – sei es mit Maus, Tastatur oder anderen Hilfsmitteln. Wichtig ist auch, dass niemand unter Zeitdruck gesetzt wird.

3. Leicht zu verstehen: Klare Struktur und einfache Sprache sind das A und O. Die Website soll logisch aufgebaut sein und Nutzer sollten sich intuitiv zurechtfinden.

4. Technisch einwandfrei: Die Website muss mit verschiedenen Browsern und Hilfsmitteln wie Screenreadern reibungslos funktionieren.

Welche Websitebereiche müssen barrierefrei gestaltet sein?

Laut BFSG muss die gesamte Customer Journey, also der gesamte Weg des Nutzers auf der Seite barrierefrei sein. Das umfasst laut Händlerbund folgende Punkte:

• vom Einstieg auf eine Website (z. B. Cookie-Banner) bis Abschluss (z. B. Check-out, Newsletteranmeldung)
• Informationen & Schaltflächen (Bestellbestätigungsmails, Kundenkonten, Rechtstexte)
• Identifizierungs-, Authentifizierungs-, Sicherheits- & Zahlungsfunktionen sowie -methoden
• Newsletter
• Kontaktformulare & Chatbots

Zudem müssen Shopbetreiber eine sogenannte Barrierefreiheitserklärung in den Allgemeinen Geschäftsbedingungen oder anderweitig deutlich wahrnehmbar veröffentlichen, die den Stand der Barrierefreiheit im Shop transparent macht und zeigt, dass sich das Unternehmen mit der Thematik aktiv auseinandersetzt. Unter Umständen müssen die vorhandenen Rechtstexte angepasst werden, um auf den Einsatz von Accessibility-Tools (wie Screenreader) hinzuweisen. Eine vollständige Checkliste zur Barrierefreiheit sowie eine rechtssichere Beratung bietet der Händlerbund.

Barrierefreiheit für Websites: Die drei Stufen der WCAG im Detail

Stufe A: Das Fundament

Diese grundlegenden Anforderungen sorgen dafür, dass Deine Website besser nutzbar ist:

• Bilder brauchen Alternativtexte, damit Screenreader sie beschreiben können. In diesen ALT-Tags wird der Bildinhalt beschrieben, sodass er bei Bedarf von entsprechenden Tools vorgelesen werden kann. So erhalten Menschen mit einer starken Sehschwäche Informationen zu den abgebildeten Inhalten.
• Videos benötigen Untertitel für gehörlose Menschen.
• Alle Funktionen wie Benutzeroberflächen und Navigation müssen mit verschiedenen Eingabemethoden bedienbar sein: bspw. per Tastatursteuerung, Screenreader oder Sprachbefehl.
• Die Website muss eine klare Struktur haben.
• Fehler müssen verständlich angezeigt werden.

Stufe AA: Der professionelle Standard

Diese Stufe macht Deine Website wirklich gut zugänglich:

• Texte müssen sich gut vom Hintergrund abheben (Kontrastverhältnis mindestens 4,5:1).
• Die Seite muss bis 200 % vergrößerbar sein.
• Es muss immer erkennbar sein, wo man sich auf der Seite befindet.
• Die Website muss mit verschiedenen Eingabemethoden funktionieren.
• Formulare müssen klar beschriftet sein.

Stufe AAA: Die Königsklasse

Diese höchste Stufe bietet maximale Zugänglichkeit:

• Noch bessere Kontraste (7:1)
• Videos mit Gebärdensprache
• Texte in einfacher Sprache (z. B. durch Verzicht auf Fremdwörter, die Verwendung kurzer, klarer Sätze sowie präziser Wörter)
• Keine zeitlichen Begrenzungen

Barrierefreiheit Website Test: Praktische Umsetzung

Um die Barrierefreiheit Deiner Website systematisch zu verbessern, solltest Du sie zuerst testen. Eine selbst erstellte Website, die den HTML-Standard einhält, erfüllt bereits viele der gesetzlichen Anforderungen. Hier sind die wichtigsten Schritte und Tools zur Überprüfung:

1. Nutze den W3C Markup Validator zur Überprüfung des HTML-Standards.
2. Installiere die Chrome-Erweiterung für Barrierefreiheitstests (WAVE Evaluation Tool).
3. Prüfe die Konformität mit WCAG 2.1 AA Standards (W3C Guidelines).
4. Berücksichtige die deutschen Anforderungen zur „Leichten Sprache“ (Weitere Infos).
5. Hole Dir bei Bedarf professionelle Unterstützung für die technische Umsetzung.

Barrierefreiheit Website & Onlineshop Checkliste für JTL-Shop

JTL arbeitet an einer neuen Shopversion (JTL-Shop 5.5), welche vermutlich im April veröffentlicht wird. Diese soll die Händler bei der Erfüllung des Gesetzes unterstützen. Gehe diese Checkliste Punkt für Punkt durch, um Deinen JTL-Shop barrierefrei zu gestalten. Am besten nutzt Du ein Projektmanagement-Tool, um den Fortschritt zu dokumentieren. Beginne mit der Grundstruktur und arbeite Dich systematisch durch die technischen Details.

1. Strukturierung & Navigation im JTL-Shop

• Überschriftenhierarchie: Verwende HTML-Überschriften (h1 bis h6) in logischer Reihenfolge, besonders bei Produktkategorien und -beschreibungen.
• Shop-Navigation: Implementiere eine übersichtliche Kategoriestruktur und Filtermöglichkeiten.
• Skip-Links: Füge Links zum Überspringen von Navigationsbereichen und Produktfiltern ein.

2. Produktdarstellung & Medien

• Produktbilder: Versehe alle Produktbilder mit aussagekräftigen Alt-Texten.
• Produktvarianten: Stelle sicher, dass Varianten (Farbe, Größe etc.) klar erkennbar und auswählbar sind.
• Produktvideos: Biete Untertitel und Beschreibungen für Produktvideos an.

3. Check-out & Formulare

• Bestellprozess: Gestalte den Check-out-Prozess übersichtlich und leicht verständlich.
• Formularfelder: Nutze klare Labels für alle Eingabefelder im Bestellprozess.
• Fehlermeldungen: Zeige Fehler bei der Bestellung deutlich und lösungsorientiert an.
• Tastatursteuerung: Ermögliche die komplette Bestellung auch per Tastatur.

4. Text & Produktinformationen

• Schriftgrößen: Verwende gut lesbare Schriftgrößen für Produktbeschreibungen.
• Preisdarstellung: Stelle Preise und Rabatte klar sowie eindeutig dar.
• Kontraste: Achte besonders bei Aktionspreisen und Call-to-Action-Buttons auf gute Kontraste.

5. Technische Implementierung im JTL-Shop

• ARIA-Attribute: Nutze ARIA-Labels* besonders für dynamische Shop-Elemente wie Warenkorb-Updates.
• Produktfilter: Mache alle Filter und Sortierfunktionen barrierefrei bedienbar.
• JavaScript: Reduziere JavaScript auf das notwendige Minimum, da es Sicherheitsrisiken mit sich bringen kann (z. B. durch Cross-Site-Scripting, XSS, oder durch die Einführung von Angriffsflächen durch unzureichend abgesicherte Skripte). Webshops nach dem Baukastenprinzip basieren vorrangig auf JavaScript. Wenn JavaScript für Deinen Shop unvermeidbar ist, sollte es nur dort eingesetzt werden, wo es unbedingt erforderlich ist: beispielsweise für interaktive Elemente wie Warenkorb-Updates oder Formularvalidierungen. In vielen Fällen kannst Du mithilfe serverseitiger Logik JavaScript ersetzen. Zum Beispiel können viele dynamische Inhalte, die normalerweise mit JavaScript geladen werden (z. B. Produktinformationen oder Preise), auch über serverseitige Templates oder direkt vom Server generiert und ausgeliefert werden, ohne dass JavaScript notwendig ist.

*ARIA-Labels sind im html hinterlegte Texte, die Screenreader nutzen, um beispielsweise Symbole (wie eine Lupe) verständlicher zu machen (die Lupe wird dann als “Suche” vorgelesen).

Die Vorteile einer barrierefreien Website für Dein Unternehmen

Eine barrierefreie Website bietet klare Vorteile: größere Zielgruppe, besseres Image, optimierte SEO, verbesserte Usability und rechtliche Absicherung. Die Investition zahlt sich sowohl gesellschaftlich als auch wirtschaftlich aus – je früher, desto besser.

Fazit: WCAG bietet die Chance, Websites für mehr Menschen zugänglich zu machen. Mit den richtigen Tools ist Barrierefreiheit für jedes Unternehmen umsetzbar.

Wenn Du Beratung zum Thema wünschst, Deine Website hinsichtlich der barrierefreien Gestaltung durchchecken lassen möchtest oder Hilfe bei der Umsetzung der WCAG benötigst, unterstützen wir Dich gern.