Barrierefreie Website: Checkliste nach WCAG 2.2

Für uns ist Barrierefreiheit schon jetzt das Wort des Jahres 2025. Warum? Ab dem 28.06.2025 sind barrierefreie Websites für viele Unternehmen Pflicht. Dafür sorgt das Barrierefreiheitsstärkungsgesetz (BFSG). Mit unserer Checkliste: Barrierefreie Website nach dem aktuellsten Standard (WCAG 2.2) gestalten Sie Websites, die für alle zugänglich sind. Die gute Nachricht: Von mehr Barrierefreiheit im Web profitieren Nutzer und Unternehmen gleichermaßen.

coma Magazin Barrierefreiheit Gesetz BFSG

Darum ist Barrierefreiheit im Web wichtig

Barrierefreiheit im Web ist für viele Unternehmen und Website-Betreiber ab 2025 kein Nice-to-have mehr. Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) wird es zum Muss. Die gesetzlichen Anforderungen des BFSG betreffen den gesamten Online-Handel, Hardware, Software und weitere digitale Produkte (Websites, Apps, digitale Dienste).

Das Ziel des BFSG: Barrierefreies Internet für alle. Jeder Mensch soll sich barrierefrei im Web bewegen können, egal ob mit Behinderung oder ohne. Einschränkungen können schließlich jeden treffen, auch temporär. Stellen Sie sich vor, Sie brechen sich einen Arm und können Websites am Desktop nur noch mit einer Hand bedienen. Dann sind auch Sie auf barrierefreies Webdesign angewiesen.

Digitale Barrierefreiheit ist ein Menschenrecht

Auch bei Barrierefreiheit auf Websites geht es letztendlich um das Menschenrecht auf Teilhabe an der Gesellschaft. Doch viele Menschen wurden bisher in der Web-Entwicklung ignoriert. Ein Grund: Die Anzahl an Menschen mit Einschränkungen wird häufig unterschätzt.

Der Digitalservice vom Bund zeigt: Von 1.000 Menschen haben in Deutschland u. a. ...

  • 666 eine Sehschwäche,

  • 250 motorische Einschränkungen,

  • 89 eine Lese- und Schreibschwäche,

  • 80 eine Rot-Grün-Schwäche,

  • 4 Blindheit oder eine Sehbehinderung und

  • 1 Mensch ist gehörlos.

Außerdem sind mehr als 22 Prozent der Menschen in Deutschland über 65 Jahre alt (Quelle: Statista). Auch für sie sind viele digitale Inhalte voller Hürden oder fast ausschließlich mit assistiven Technologien (wie Screenreadern, Vergrößerungssoftware) zu benutzen.

Was ist eine barrierefreie Website?

Eine barrierefreie Website ist so gestaltet, dass sie von allen Menschen genutzt werden kann, unabhängig von individuellen Einschränkungen. Eine Website ist dann barrierefrei, wenn sich Menschen intuitiv, effizient und ohne Hindernisse auf ihr bewegen können.

Zu den wichtigsten Merkmalen barrierefreier Website gehören:

  • technische Zugänglichkeit: korrekte HTML-Struktur, Screenreader-Kompatibilität

  • barrierefreies Webdesign: ausreichende Kontraste, anpassbare Schriftgrößen

  • barrierefreier Content: klare Struktur, klare Sprache, Alternativen für Bilder und Videos (multimediale Inhalte)

Kurz gesagt: Barrierefreiheit im Web ist digitale Inklusion. Jeder Mensch soll Zugang zu Informationen haben – ohne Barrieren.

Barrierefreiheit von Websites: Vorteile

Wo hört Nutzerfreundlichkeit auf, wo fängt Barrierefreiheit an? Genau hier liegt der Schatz der Barrierefreiheit. Denn: Am Ende geht es bei Websites und Webanwendungen immer um „Menschenfreundlichkeit“. Darum, dass Nutzerinnen und Nutzer leicht Zugang zu Informationen haben. Dass sie sich auf Websites intuitiv bewegen und wichtige Informationen, Dienstleistungen oder Produkte einfach konsumieren können. Und davon profitieren alle.

Vorteile für Nutzer

Barrierefreie Websites und Webanwendung sind besser gestaltet, erreichen eine höhere Akzeptanz und führen zu einer geringeren Abbruchquote. Sie sind außerdem …

  • verständlich und übersichtlich,

  • einfach bedienbar für alle,

  • optimiert für Menschen (besseres Nutzererlebnis),

  • optimiert für Suchmaschinen (SEO),

  • technisch sauber (da hohe technische Standards notwendig sind).

Vorteile für Unternehmen

Während einige Unternehmen das Thema digitale Barrierefreiheit (Web Accessibility) nur als Aufwand sehen, haben andere bereits die Vorteile für Ihr Business erkannt:

  • Neue Zielgruppen erreichen: Wie die Zahlen oben zeigen, ist die Anzahl der Menschen mit Einschränkungen groß und vielfältig. Mit einer barrierefreien Website erreichen Sie auch Menschen, die sonst ausgeschlossen wären oder Ihr Angebot nur eingeschränkt nutzen könnte.

  • SEO-Vorteile nutzen: Barrierefreiheit ist zwar noch kein direkter Rankingfaktor im SEO. Allerdings können sich viele Aspekte in Technik, Design und Content, die eine Website barrierefreier machen, positiv auf Ihre organischen Rankings auswirken.

  • Usability und User Experience verbessern: Eine barrierefreie Website ist oft einfacher zu bedienen – für alle Menschen. Das sorgt für eine bessere User Experience (Nutzererlebnis). Plus: Usabilty (Benutzerfreundlichkeit) ist einer der wichtigsten Rankingfaktoren für Google.

  • Soziale Verantwortung übernehmen, Haltung zeigen: Marken und Unternehmen mit barrierefreien digitalen Angeboten zeigen Sensibilität und Awareness.

  • Strafen vermeiden: Ab Juni 2025 gibt es in vielen Bereichen eine gesetzliche Pflicht zur digitalen Barrierefreiheit. Wer Abmahnungen und Strafen vermeiden will, muss die Standards erfüllen.

„Wir von coma sind überzeugt: Barrierefreie Websites sind einfach die besseren Websites. Zwar hat nicht jeder Mensch eine Einschränkung, aber 100 Prozent aller Nutzerinnen und Nutzer profitieren von guter Bedienbarkeit, cleanem Design und klaren Botschaften im Web.”

Martin KirmaierVorstand der coma AG

Internationaler Standard der digitalen Barrierefreiheit (WCAG 2.2)

Barrierefreie Websites orientieren sich in der Regel an den Web Content Accessibility Guidelines 2.2 (WCAG 2.2). Der WCAG ist ein international anerkannter Standard zur Umsetzung von Barrierefreiheit im digitalen Bereich und umfasst die Konformitätsstufen (conformance level) A, AA und AAA. Level AA entspricht den Mindestanforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG). Auf das Wesentliche heruntergebrochen, bestimmen 4 einfache Prinzipien, wann eine Website nach WCAG als barrierefrei gilt.

4 Prinzipien der Barrierefreiheit (WCAG 2.2):

  1. Wahrnehmbar (Perceivable): Informationen müssen so präsentiert werden, dass Nutzerinnen und Nutzer sie wahrnehmen können.

  2. Bedienbar (Operable): Website bzw. Webandwendung müssen bedienbar sein (Beispiel: einfache Navigation).

  3. Verständlich (Understandable): Informationen und Bedienung der Website bzw. Webanwendung müssen verständlich sein.

  4. Robust (Robust): Inhalte müssen robust sein, damit sie von assistiven Technologien (Screenreader, Vorlesesoftware, Spracherkennungssoftware etc.) ausgelesen werden können.

4 Prinzipien nach WCAG: verständlich, bedienbar, robust, wahrnehmbar
4 Prinzipien nach WCAG: verständlich, bedienbar, robust, wahrnehmbar

Barrierefreie Website: Checkliste

Legen wir los! Hier kommt Ihre Checkliste mit den wichtigsten Aspekten und vielen Tipps zur Umsetzung von barrierefreien Websites. Besser gesagt: Wir haben für Sie drei Checklisten erstellt – gegliedert in Design, Content und Technik. Ihr Vorteil: Durch die Gliederung nach Bereichen können Sie Ihre Website gezielt auf Barrierefreiheit prüfen – und Ihr Team oder Ihre Digitalagentur besser briefen.

Internationaler Standard: Die Checklisten decken alle relevanten Erfolgskriterien für den Level AA der WCAG 2.2 (Stand: 12.12.2024) ab. Websites mit Level AA erfüllen das Barrierefreiheitsstärkungsgesetz (BFSG; Pflicht ab 28.06.2025).

Barrierefreies Webdesign

12 Punkte, auf die Sie bei UX und Design achten sollten (WCAG 2.2, Level AA):

  1. Konsistente Menüführung: Menüs müssen auf allen Seiten dieselbe Reihenfolge und Struktur haben (3.2.3).

  2. Sinnvolle Linktexte: Linktexte müssen den Zielinhalt klar beschreiben und für Screenreader verständlich sein (2.4.4).

  3. Sichtbarer Fokus: Alle interaktiven Elemente benötigen einen sichtbaren Fokus-Indikator, der gut erkennbar ist (2.4.11, 2.4.12).

  4. Kontraste: Texte müssen einen Kontrast von mindestens 4,5:1 (kleiner Text) bzw. 3:1 (großer Text) zum Hintergrund haben (1.4.3).

  5. Farben: Visuelle Hinweise (z. B. Warnungen) dürfen nicht allein durch Farben dargestellt werden (1.4.1).

  6. Barrierefreie Schriftgestaltung: Sans-Serif-Schriften verwenden, Schriftgrößen anpassbar, ausreichende Zeilenabstände beachten, Zeilenlängen unter 80 Zeichen (1.4.12).

  7. Verzicht auf horizontales Scrollen: Inhalte müssen bei einer Vergrößerung auf 200 % ohne horizontales Scrollen lesbar bleiben (1.4.10).

  8. Mindestens 200 % Zoom ermöglichen: Inhalte dürfen bei Zoom nicht an Funktionalität verlieren (1.4.4).

  9. Bewegte, blinkende und scrollbare Elemente: Der Nutzer muss diese Inhalte pausieren, stoppen oder ausblenden können (2.2.2).

  10. Klickbare Ziele (Target Size): Interaktive Elemente (Buttons, Links) müssen mindestens 24x24 CSS-Pixel groß sein (2.5.8).

  11. Design und Inhalte für Screenreader „vorhersehbar“ gestalten: Navigation und Bedienelemente müssen konsistent und logisch strukturiert sein (3.2.3, 3.2.4).

  12. Wiederholende Blöcke – einfaches Überspringen ermöglichen: Implementieren Sie „Skip Links“, um Navigation und wiederholende Inhalte zu überspringen (2.4.1).

Leitfaden: Barrierefreie Website

In unserem kostenlosen Leitfaden: Barrierefreie Website erfahren Sie Details und Hintergründe zur Barrierefreiheit im Web. Plus: Selbsttest in Firefox, viele Tool-Tipps und unsere Checklisten zum Download.

Barrierefreier Content

Mit diesen 12 Punkte sorgen Sie für barrierefreien Content (WCAG 2.2, Level AA) auf Ihrer Website:

  1. Kurze, verständliche und gut lesbare Sätze: Verwenden Sie einfache Sprache und vermeiden Sie Fachjargon (3.1.5).

  2. Option für Leichte Sprache (optional für Level AA): Stellen Sie eine Version in leichter Sprache bereit, insbesondere für Zielgruppen mit kognitiven Einschränkungen.

  3. Gebärdensprache (optional für Level AA): Inhalte in Gebärdensprache bereitstellen, wenn sinnvoll.

  4. Sinnvolle Reihenfolge von Inhalten: Inhalte müssen logisch und für Screenreader korrekt strukturiert sein (1.3.2).

  5. Text auf Bildern vermeiden: Verwenden Sie textbasierte Inhalte statt Text in Bildern (1.4.5).

  6. Alt-Tags für funktionale Bilder: Jedes funktionale Bild benötigt einen aussagekräftigen Alt-Text (1.1.1).

  7. Leere Alt-Tags für dekorative Bilder: Verwenden Sie leere Alt-Tags (alt="") für rein dekorative Bilder, damit Screenreader sie ignorieren (1.1.1).

  8. Anhalten von Videos und Audios ermöglichen: Fügen Sie Steuerungen für „Play“, „Pause“ und „Stopp“ hinzu (1.2.2).

  9. Videos mit Untertiteln: Alle Videos müssen synchronisierte Untertitel enthalten (1.2.2).

  10. Audio-Transkripte von Videos und Audios: Stellen Sie Textversionen von Audio- und Videoinhalten bereit (1.2.3).

  11. Konsistente Hilfemechanismen: Hilfefunktionen wie FAQs oder Kontaktbuttons müssen einheitlich verfügbar sein (3.2.7).

  12. Vermeidung doppelter Eingaben: Nutzen Sie Autofill-Funktionen oder speichern Sie Daten für wiederholte Formulareingaben (3.2.6).

Überfordert, überlastet, überfragt?

Sie brauchen Unterstützung für die Barrierefreiheit Ihrer Website oder Ihres Online-Shops? Dann vereinbaren Sie einfach ein kostenloses Erstgespräch mit uns. Wir helfen Ihnen gerne.

Barrierefreie Website-Technik

Barrierefrei programmieren – 12 Punkte, auf die Sie bei der technischen Umsetzung achten sollten (WCAG 2.2, Level AA):

  1. HTML-Markup validieren: Verwenden Sie ein valides und robustes HTML-Markup (4.1.1).

  2. Semantisches Markup: Nutzen Sie semantische HTML-Elemente wie <header>, <main> und <footer> (1.3.1).

  3. Navigationsbereiche kennzeichnen: Verwenden Sie Landmark-Rollen wie role="navigation" oder ARIA-Attribute (1.3.1). Mehr dazu erfahren Sie in unserem Leitfaden.

  4. Zitate und Abkürzungen korrekt markieren: Verwenden Sie <blockquote> für Zitate und <abbr> für Abkürzungen mit Titelattribut (1.3.1).

  5. Saubere Headline-Struktur: Folgen Sie der Hierarchie von <h1> bis <h6> und verwenden Sie nur eine <h1> pro Seite (1.3.1).

  6. Lang-Attribute für Sprachen: Deklarieren Sie die Hauptsprache der Seite und Sprachwechsel mit lang-Attributen (3.1.1, 3.1.2).

  7. Solide Tabellen mit Kopfzeilen: Verwenden Sie <th> und scope für Tabellenköpfe, um Daten besser zugänglich zu machen (1.3.1).

  8. Formulare und Validierungen: Implementieren Sie semantische Formulare mit Labels, Anleitungen und Validierungsmeldungen (3.3.3).

  9. Barrierefreie Drittanbieter-Komponenten: Vergewissern Sie sich, dass Plugins und Tools von Drittanbietern barrierefrei sind (4.1.2).

  10. Tastatursteuerung: Alle Funktionen müssen vollständig über die Tastatur bedienbar sein (2.1.1).

  11. Sichtbarer Fokus bei Navigation: Fügen Sie gut sichtbare Fokus-Indikatoren für Tastaturnutzer hinzu (2.4.7, 2.4.11).

  12. Fehlerbehandlung und Korrekturvorschläge: Geben Sie hilfreiche Fehlermeldungen aus und schlagen Sie Korrekturen vor (3.3.3).

It's all about the code!

Barrierefreiheit braucht einen robusten Code. In unserem kostenlosen Leitfaden: Barrierefreie Website erklären wir Ihnen, warum. Außerdem: Deep Dive zu HTML und ARIA für barriererfreie Websites.

Website auf Barrierefreiheit prüfen: Tools

Bei vielen Unternehmen ist der Weg zur Barrierefreiheit ein Prozess. Das gilt vor allem bei Websites, für die das BFSG nicht verpflichtend ist: Schritt für Schritt werden Design, Content, Technik optimiert. Hier sind drei Tools, um Ihre Website auf Barrierefreiheit zu prüfen – und Ihre Fortschritte festzuhalten.

Website auf Barrierefreiheit prüfen: Tools

  • Wave Accessibility Tool

    Wave bietet direkt mehrere benutzerfreundliche Web Accessibility Evaluation Tools, um die Accessibility (Barrierefreiheit) Ihrer Website zu analysieren – per Browser Extension (Chrome, Firefox, Edge), Schnittstelle (API) oder als Report.

    Vorteile:

    • mehrere Tools in einer Suite

    • schneller URL-Check möglich

    • kostenlos verfügbar

    • gute visuelle Darstellung der Probleme

  • Lighthouse von Google

    Lighthouse ist ein Open-Source-Tool von Google (Chrome Developer Tool). Sie können es einfach als Browser-Extension aktivieren oder über die Entwickler-Tools in Chrome aktivieren. Es prüft die Barrierefreiheit Ihrer Website und liefert detaillierte Berichte.

    Vorteile:

    • einfach zu verwenden

    • direkt im Browser verfügbar

    • liefert umfassende Berichte inkl. Hinweise zu Performance und SEO

  • axe DevTools

    Die axe DevTools funktionieren als Browser-Add-on (für Chrome und Firefox). Mit axe erkennen und priorisieren Sie Probleme mit der Accessibility direkt auf Ihrer Website.

    Vorteile:

    • einfache Integration in den Entwicklungsprozess

    • detaillierte Anleitung zum Beheben von Problemen

Fazit

Hand aufs Herz: An Barrierefreiheit im Web kommt 2025 kein Unternehmen mehr vorbei – und das ist auch gut so. Einfache Sprache, eine klare Informationshierarchie, unterstützendes UI-Design und robuste Technik machen jede Website zu einer besseren Website.

Bei der Entwicklung neuer Websites kann die Barrierefreiheit von Anfang an mitgedacht werden. Bei einer bestehenden Website oder einem Website-Relaunch ist der Weg zur Barrierefreiheit mit zusätzlichem Aufwand verbunden. Deshalb empfehlen wir Ihnen folgendes Vorgehen: Erstellen Sie eine Ist-Analyse Ihrer Website(s), identifizieren und priorisieren Sie die wichtigsten Punkte, um die gesetzlichen Richtlinien zu erfüllen, und starten Sie durch in Richtung Barrierefreiheit.

coma AG Martin Kirmaier

Wir machen Ihre Website barrierefrei

Sprechen Sie mit mir über Ihre Herausforderungen und Ziele – in einem unverbindlichen Erstgespräch. Gemeinsam finden wir Lösungen, die begeistern.

Martin Kirmaier Vorstand, coma AG martin.kirmaier@coma.de
coma Projekt ByCS Vorschau barrierefreies Projekt

BayernCloud Schule: Wir verbinden Bildung und Digitales – barrierefrei und responsive

Für das Bayerische Kultusministerium setzten wir das Web-Portal BayernCloud Schule (ByCS) um – mit digitalen Inhalten und Anwendungen für Lehrkräfte, Schüler und Verwaltung. Es ist für alle bayerischen Schulen zugänglich, natürlich barrierefrei konzipiert und umgesetzt.

Zu BayernCloud Schule

coma Projekt ByCS Vorschau barrierefreies Projekt