Barrierefreie Website Checkliste

Diese praxisnahe Checkliste hilft Ihnen zu prüfen, ob Ihre Website oder Ihr Online-Shop barrierefrei ist – gemäß den internationalen WCAG 2.2-Richtlinien (Level A & AA), die dem Barrierefreiheitsstärkungsgesetz (BFSG) zugrunde liegen. Tiefergehende Erläuterungen zu den einzelnen Anforderungen, die ab 28. Juni 2025 gelten, finden Sie auf der Seite Website Programmierung.

Was erwartet Sie?

Übersichtliche Gliederung nach Elementtypen (z.  Bilder, Formulare, Navigation)
Direkte Zuordnung zu den jeweiligen WCAG-Kriterien
HTML-Beispiele für die praktische Umsetzung
Hinweise zur technischen und redaktionellen Optimierung

Checkliste technische Umsetzung

Wenn Sie Unterstützung bei der Umsetzung benötigen, stehen wir Ihnen gerne mit Know-how, Tests und konkreten Lösungen zur Seite.

Elementtyp	Beispiele	Anforderung	HTML-Umsetzung	WCAG-Kriterium
Bilder	Logos, Icons, Fotos	Inhaltlich beschreiben (alt-Text)	<img src=“logo.png“ alt=“Logo der Agentur Sichtbar.“>	1.1.1 (A)
Infografiken / Diagramme	Balkendiagramme, Statistiken	Alternativtext plus ausführliche Beschreibung	<img src=“umsatz.png“ alt=“Umsatzentwicklung 2023. Details siehe Beschreibung.“>	1.1.1 (A), 1.3.1 (A)
Bilder nur als Link	Kontakt-Icons etc.	Alt-Text muss Linkziel beschreiben	<a href=“/kontakt“ aria-label=“Kontakt“><img src=“kontakt.svg“ alt=“Kontakt“></a>	1.1.1 (A), 2.4.4 (A)
Bildhafte Buttons	Slider-Pfeile, Play-Buttons	aria-label oder sichtbarer Text nötig	<button aria-label=“Play“><img src=“play.svg“ alt=““></button>	1.1.1 (A), 4.1.2 (A)
Dekorative Bilder	Layout-Elemente	Mit alt=““ oder per CSS einbinden	<img src=“deko.jpg“ alt=““>	1.1.1 (A)

Elementtyp	Beispiele	Anforderung	HTML-Umsetzung	WCAG-Kriterium
Live-Video / Audio	Streams, Konferenzen	Alternativtext oder Untertitel	<video src=“stream.mp4″ aria-label=“Live-Diskussion zum Thema Inklusion“>	1.2.4 (AA)
Aufgezeichne-te Videos	Tutorials, Schulungen	Untertitel + Audiodeskription	<video><track kind=“subtitles“><track kind=“descriptions“></video>	1.2.2 (A), 1.2.5 (AA)
Audio (nur Ton)	Podcasts	Texttranskript erforderlich	<audio controls aria-describedby=“transkript“>	1.2.1 (A)
Animationen / Banner	Slider, Effekte	Müssen pausierbar, stoppbar sein	<button onclick=“stopSlider()“>Anhalten</button>	2.2.2 (A), 2.3.1 (A)

Elementtyp	Beispiele	Anforderung	HTML-Umsetzung	WCAG-Kriterium
Buttons	CTA, Formulare	Tastatur- und Screenreaderbedienung	<button type=“submit“>Absenden</button>	2.1.1 (A), 4.1.2 (A)
Formulare	Eingabefelder, Dropdowns	Mit <label> beschriften	<label for=“email“>E-Mail</label><input id=“email“>	3.3.2 (A), 1.3.1 (A)
Fehlermeldungen	Validierungsfeedback	Muss per aria-live übermittelt werden	<div aria-live=“assertive“>Bitte gültige E-Mail eingeben.</div>	3.3.1 (A), 4.1.3 (AA)
CAPTCHA	Bild- oder Audioprüfung	Alternative bereitstellen (z. B. Rechenfrage)	<img src=“captcha.jpg“><p>Alternative: Was ist 3+4?</p>	1.1.1 (A), 3.3.6 (AA)

Elementtyp	Beispiele	Anforderung	HTML-Umsetzung	WCAG-Kriterium
Navigation	Hauptmenü, Footer	Semantisch korrekt und konsistent	<nav><ul><li><a href=“/“>Start</a></li></ul></nav>	2.4.5 (AA)
Skiplinks	„Zum Inhalt springen“	Fokusfähig und sichtbar	<a href=“#main-content“>Zum Inhalt</a>	2.4.1 (A)
Seitentitel	<title>-Tag	Inhalt muss klar benannt sein	<title>Kontakt – Agentur Sichtbar</title>	2.4.2 (A), 3.2.2 (A)
Überschriftenstruktur	H1 bis H6	Keine Hierarchiesprünge	<h1>…</h1><h2>…</h2>	2.4.10 (AA), 1.3.1 (A)

Elementtyp	Beispiele	Anforderung	Umsetzung	WCAG-Kriterium
Farbkontraste	Text, UI-Elemente	Kontrastverhältnis normaler Text: 4,5:1 großer Text: 3:1	color-Check mit Tools	1.4.3 (AA), 1.4.11 (AA)
Schriftgröße	Fließtext, Labels, Menüs	Empfohlene Mindestgröße: 16 px; großer Text ab 18 px oder 14 px fett; skalierbar gestalten	CSS mit rem oder em; keine festen px-Werte	1.4.3 (AA), 1.4.4 (AA)
Vergrößerung / Zoom	Texte, Layout	Bis 200 % ohne Informationsverlust	Relative Einheiten verwenden (em, rem, %)	1.4.4 (AA), 1.4.10 (AA)
Textabstand	Fließtext, Absätze, Headlines	Muss bei Nutzeranpassung lesbar und funktional bleiben	line-height ≥ 1.5, spacing über CSS	1.4.12 (AA)
Layoutanpassung	Responsive Design	Kein Scrollen in zwei Richtungen (ab 320 px Breite)	Media Queries einsetzen	1.4.10 (AA)
Tooltip / Hover	Mouseover-Inhalte	Auch per Tastatur steuerbar	aria-describedby, focusable machen	1.4.13 (AA)
Bilder mit Text	Werbebanner, Teaser-Elemente	Text muss als HTML vorliegen oder skalier-/konfigurierbar sein	Echten HTML-Text verwenden, keine eingebetteten Texte	1.4.5 (AA)

Elementtyp	Beispiele	Anforderung	Umsetzung	WCAG-Kriterium
Sprache deklarieren	Hauptsprache	<html lang=“de“>	Klar definieren	3.1.1 (A)
Sprachwechsel	Begriffe, Zitate	<span lang=“en“>Accessibility</span>	Kennzeichnen	3.1.2 (AA)
Fehlervermeidung	Formulare	Pflichtfelder und Hinweise	required, <label>	3.3.2 (A), 3.3.4 (AA)
Statusmeldungen	„Gesendet“, „Fehler“	aria-live nutzen	<div role=“status“>…</div>	4.1.3 (AA)

🔧 Tools zur Prüfung der digitalen Barrierefreiheit

Automatisierte Tools entdecken etwa 30–40 % der Barrieren. Die Kombination aus automatisierter Prüfung und manuellen Tests (z. B. mit Screenreader und Tastatur) ist entscheidend für eine zuverlässige Bewertung. Hier sind bewährte Tools zur Prüfung der Barrierefreiheit von Websites – sowohl für Entwickler als auch für Redakteure und Projektverantwortliche. Nutzen Sie sie zusammen mit unserer Barrierefreiheit Website Checkliste.

Tool	Beschreibung	Besonderheiten
WAVE (Web Accessibility Evaluation Tool)	Prüft Kontrast, Alternativtexte, Formularbeschriftungen etc. direkt im Browser	Kostenlos, einfach zu bedienen, visuelle Darstellung der Fehler
axe DevTools (Deque Systems)	Erweiterung für Chrome & Firefox zur WCAG-Prüfung	Zeigt Fehler und Verbesserungsvorschläge mit Codebezug
Lighthouse (Google Chrome DevTools)	Performance-Analyse inkl. Barrierefreiheit	In Chrome eingebaut, zeigt einen „Accessibility Score“
Siteimprove Accessibility Checker	Analysiert einzelne Seiten nach WCAG-Kriterien	Browser-Plugin, betont redaktionelle Probleme
ARC Toolkit	Erweiterung für Chrome – prüft auf Barrierefreiheitsfehler	Technisch detailliert, auch für große Projekte geeignet

Tool	Beschreibung	Besonderheiten
NVDA (NonVisual Desktop Access)	Kostenloser Screenreader für Windows	Ideal zum Testen mit Tastatur & Screenreader
VoiceOver (macOS/iOS)	In Apple-Geräten integriert	Nützlich zur mobilen Barrierefreiheitsprüfung
JAWS (Job Access With Speech)	Professioneller Screenreader	Marktführer, besonders für komplexe Anwendungen
W3C HTML Validator	Prüft HTML-Struktur und Semantik	Wichtig für technisch korrekte Basis
Tastatur-Only-Test	Manuelle Prüfung ohne Maus	Erkennt Fokusfallen, nicht erreichbare Elemente

Tool	Beschreibung	Besonderheiten
Contrast Ratio (github.io/contrast-ratio)	Prüft Kontrastverhältnisse (Text vs. Hintergrund)	Simpel und schnell
Colour Contrast Analyser (TPGi)	Desktop-Tool zur Kontrastprüfung und Simulation von Sehbehinderungen	Unterstützt mehrere Betriebssysteme
NoCoffee Vision Simulator (Chrome Plugin)	Simuliert verschiedene Sehbehinderungen direkt im Browser	Praktisch zur visuellen Nachvollziehbarkeit

Häufige Fragen zur Barrierefreien Website Checkliste

Eine Checkliste hilft Ihnen dabei, die Barrierefreiheit Ihrer Website gezielt zu überprüfen und sicherzustellen, dass alle Nutzer – mit und ohne Behinderung – Ihre Inhalte zugänglich, bedienbar und verständlich nutzen können. Sie bietet eine leicht umsetzbare Struktur, mit der Sie alle relevanten Elemente des Webdesigns Schritt für Schritt prüfen können. So wird aus Ihrer Website ein inklusives Angebot, das niemanden ausschließt.

Barrierefreiheit bedeutet, dass digitale Inhalte so gestaltet sind, dass sie von allen Menschen – auch mit körperlichen, sensorischen oder kognitiven Einschränkungen und mit einer Behinderung – problemlos genutzt werden können. Ziel ist ein inklusives Web, das niemand ausschließt – zum Beispiel blinde Menschen, Personen mit motorischen Einschränkungen, Leseschwierigkeiten oder kognitiven Beeinträchtigungen.

Die Web Content Accessibility Guidelines (WCAG) 2.2 bilden den internationalen Standard. In Deutschland gilt zusätzlich die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) für öffentliche Stellen. Ab dem 28. Juni 2025 wird Barrierefreiheit auch für viele private Unternehmen gesetzlich verpflichtend – geregelt im Barrierefreiheitsstärkungsgesetz (BFSG).

Barrierefreies Webdesign bringt nicht nur rechtliche Sicherheit, sondern auch zahlreiche praktische Vorteile:

Mehr Reichweite, da Ihre Website auch für Menschen mit Einschränkungen oder Behinderung nutzbar ist
Verbesserte Lesbarkeit und Navigation für alle Nutzer
Höhere Benutzerfreundlichkeit auf mobilen Geräten
Bessere Sichtbarkeit in Suchmaschinen durch klare Struktur
Zufriedenere Besucher dank leicht verständlicher und inklusiver Inhalte

Die Checkliste ist in verschiedene Elemente wie Bilder, Formulare, Navigation oder Multimedia unterteilt. Sie erfahren unter anderem, ob:

Inhalte mit der Tastatur bedienbar sind
Farben und Kontraste ausreichend gewählt wurden
Alternativtexte vorhanden und verständlich formuliert sind
Schriftgrößen und Abstände gut lesbar und anpassbar sind
Formulare korrekt beschriftet und zugänglich sind
Audio- und Videoinhalte mit Untertiteln oder Transkripten versehen sind

Machen Sie sich mit den Richtlinien (z. B. WCAG, BITV) vertraut
Überprüfen Sie Ihre Inhalte und Funktionen mithilfe der Checkliste
Identifizieren Sie Barrieren – z. B. bei Kontrasten, fehlenden Labels oder geringer Lesbarkeit
Passen Sie Design und Code entsprechend an
Führen Sie Tests mit Nutzern mit Behinderung und technischen Hilfsmitteln durch
Gestalten Sie auch künftige Inhalte und Updates barrierefrei und inklusiv

Bereits jetzt ist Barrierefreiheit verpflichtend für öffentliche Einrichtungen wie Verwaltungen, Schulen oder Bibliotheken
Ab dem 28. Juni 2025 gilt die Pflicht auch für viele private Anbieter, die Produkte oder Dienstleistungen digital vertreiben – etwa über Online-Shops, Buchungssysteme oder Kundenportale

Eine Prüfung ausschließlich mit automatisierten Tools (z. B. WAVE, axe, Lighthouse) ist nicht ausreichend. Prüfen Sie die Barrierefreiheit zusätzlich manuell, zum Beispiel:

Die Navigation ausschließlich mit der Tastatur
Die Ausgabe mit einem Screenreader (z.  NVDA, VoiceOver)
Farbkontraste und Schriftgrößen mit geeigneten Simulationstools
Die Nutzbarkeit für Personen mit motorischen oder kognitiven Einschränkungen bzw. Behinderung

Fehlende Alternativtexte bei Bildern
Unzureichende Farbkontraste und zu kleine Schriftgrößen
Elemente, die nicht per Tastatur oder Screenreader erreichbar sind
Unlogische Überschriftenstruktur oder Hierarchiesprünge
Formulare ohne klare und zugeordnete Beschriftung
Inhalte, die sich nicht vergrößern oder leicht anpassen lassen
Hinweise ausschließlich über Farbe oder Position, z.  „klicken Sie auf den roten Button links“

Die Checkliste unterstützt Sie durch alle Phasen eines Webprojekts – von der Planung über die Umsetzung bis zur laufenden Qualitätssicherung. Sie hilft Ihnen dabei, Barrierefreiheit systematisch, leicht verständlich und praxisnah entsprechen der Guidelines umzusetzen. So stellen Sie sicher, dass Ihre Website allen Nutzern zugänglich ist und den gesetzlichen Anforderungen entspricht – und gleichzeitig ein inklusives, zukunftsfähiges Webangebot darstellt.