Barrierefreiheit im Web ist kein Luxus, sondern eine Notwendigkeit – und ab 2025 ist die Bereitstellung einer barrierefreien Website für viele Unternehmen sogar verpflichtend (Stichwort: Barrierefreiheitsstärkungsgesetz, BFSG). Doch auch unabhängig von gesetzlichen Vorgaben profitieren alle Nutzer von einer barrierefreien Website: bessere Usability, bessere SEO und eine größere Reichweite.
Doch wo stehen du und dein Unternehmen aktuell? Unsere Checkliste hilft dir dabei, grundlegende Hürden zu identifizieren und erste Maßnahmen einzuleiten – ohne tief in den Code eintauchen zu müssen.
1. Sind Farbkontraste auf der Website ausreichend?
Sehbehinderte Menschen können geringe Kontraste nur schwer erkennen. Doch auch für Nutzer:innen ohne visuelle Einschränkungen bringen ausreichende Kontraste Vorteile: Wer kennt es nicht - man sitzt bei Sonnenschein auf der Parkbank und die Sonne scheint auf das Display unseres Smartphones. Nur zu oft haben wir uns schon über schwache Kontraste geärgert, die einen Text bei schlechten Lichtverhältnissen schlicht nicht oder nur mit Anstrengung lesbar machen.
Die WCAG (Web Content Accessibility Guidelines) als Richtlinie für barrierefreie Websites definieren daher Mindestkontrastwerte für Text-Elemente:
- Normale Schrift (bis 18px bzw. 14px fett): Kontrastverhältnis mindestens 4,5:1
- Große Schrift (ab 18px bzw. 14px fett): Kontrastverhältnis mindestens 3:1
Test: Nutze Tools wie WebAIM Contrast Checker oder WAVE, um deine Farbkontraste zu prüfen.
📌 Profi-Tipp: Verlasse dich nicht nur auf Farben, um Informationen zu vermitteln! Verwende zusätzlich Symbole oder Unterstreichungen, z. B. bei Fehlerhinweisen in Formularen. Zu den Vorgaben für eine barrierfreie Website gehört beispielsweise auch, dass Verlinkungen nicht ausschließlich über abweichende Farben hervorgehoben sein dürfen, sondern es zusätzlich mindestens einer weiteren Unterscheidung bedarf.
2. Sind Textgröße und Schriftart leserfreundlich?
Viele Websites verwenden kleine, schwer lesbare Schriften oder serifenlastige Fonts, die auf Bildschirmen unscharf wirken. Grundregeln für bessere Lesbarkeit:
- Mindestens 16px als Basisschriftgröße
- Zeilenhöhe (Line-Height) von mindestens 1,5 für gute Lesbarkeit
- Verzicht auf Blocksatz, da dieser ungleichmäßige Wortabstände erzeugt oder zentrierten Text für längere Textabschnitte.
Test: Erhöhe in den Browsereinstellungen die Schriftgröße um 200 %. Bleibt die Seite gut lesbar, ist sie bereits auf einem guten Weg.
📌 Profi-Tipp: Nutze relative Größenangaben wie rem oder em, damit Texte sich dynamisch anpassen können, wenn Nutzer die Browserzoom-Funktion verwenden.
3. Kann deine Website vollständig mit der Tastatur bedient werden?
Viele Menschen mit motorischen Einschränkungen oder Sehbehinderungen nutzen keine Maus, sondern ausschließlich die Tastatur zur Navigation auf einer Website. Eine barrierefreie Website muss daher ohne Maus navigierbar sein.
Test: Drücke die TAB-Taste. Kannst du alle interaktiven Elemente (Links, Buttons, Formulare) in einer sinnvollen Reihenfolge durchgehen? Drücke ENTER auf Buttons oder Links. Lösen sie die erwartete Aktion aus? Nutze SHIFT + TAB. Kannst du auch rückwärts durch die Seite navigieren? Sind die aktuell fokussierten Elemente visuell klar hervorgehoben?
Fehlerquellen:
- Unsichtbare Fokus-Markierungen → Verwende auffällige Fokus-Styles um Nutzer:innen deutlich zu machen, welches Element aktuell fokussiert wird.
- JavaScript-gestützte Navigation ohne Tastaturunterstützung → Stelle sicher, dass Event-Listener nicht nur click, sondern auch keydown (z. B. für ENTER und SPACE) unterstützen.
4. Sind Bildbeschreibungen (Alt-Texte) korrekt hinterlegt?
Bilder sagen mehr als tausend Worte – außer für Screenreader-Nutzer. Hier entscheidet der Alt-Text (alt-Attribut) darüber, ob ein Bild eine hilfreiche Information oder eine leere Fläche ist. Herauszufinden ob ein hinterlegter Alt-Text ein sinnvoller ist, ist dabei teils garnicht so einfach. Die BITV als Richtlinie unterscheidet bei der Bewertung von Alt-Texten grundsätzlich in drei Kategorien:
- Dekorative Bilder:
- Inhalstrelevate Bilder:
- Komplexe Infografiken:
Abhängig davon, wie ein Bild kategorisiert wird gibt es verschiedene Vorgaben bezüglich der zu hinterlegenden Textalternativen:
- Dekorative Bilder? → alt="" (damit der Screenreader sie ignoriert)
- Inhaltsrelevante Bilder? → alt="Beschreibender Text des Bildes"
- Komplexe Infografiken? → Zusätzlich eine ausführliche Beschreibung im umliegenden Fließtext oder über aria-describedby hinterlegen
Test: Prüfe die Alt-Texte deiner Website
📌 Profi-Tipp: Screenreader-Nutzer sollten nicht mit „Bild von…“ oder „Foto zeigt…“ begrüßt werden – einfach direkt das Wesentliche beschreiben. Vermeide zudem ausschweifende Beschreibungen der Bildinhalte und versuche dich kurz und präzise auszudrücken.
5. Sind Links und Navigationselemente klar und zugänglich?
Eine unstrukturierte Navigation kann für Screenreader und Tastatur-Nutzer zum Albtraum werden. Folgende Punkte sind wichtig:
- Sprechende Link-Texte statt „Hier klicken“ besser "Mehr erfahren über unsere Services"
- Sind Skiplinks zu Beginn der Seite hinterlegt, die es Nutzer:innen erlauben direkt zu zentralen Inhalten der Seite (bspw. Hauptinhalt) zu springen?
- ARIA-Attribute für Navigationen wie role="navigation" oder aria-current="page"
- Genügend Abstand zwischen Klickzielen, damit auch Menschen mit motorischen Einschränkungen sie treffen können
Test: Navigiere mit einem Screenreader wie NVDA (Windows) oder VoiceOver (Mac) durch deine Seite. Sind die Links logisch und verständlich?
6. Sind Formulare und interaktive Elemente zugänglich
Barrierefreie Formulare sind mehr als hübsches Design. Achte darauf, dass:
- Jedes Feld eine klare Beschriftung (
- Fehlermeldungen verständlich sind und idealerweise eine Lösung vorschlagen
- Platzhalter (placeholder) nicht als einzige Orientierung genutzt werden – sie verschwinden beim Tippen
Test: Versuche, das Formular nur mit der Tastatur auszufüllen. Teste es mit einem Screenreader. Wird jede Eingabe verständlich erklärt?
7. Sind Videos und Audioinhalte barrierefrei?
Multimedia-Inhalte sollten immer mit Alternativen versehen sein:
- Videos mit Sprache? → Bereitstellung von Untertiteln (z. B. mit track-Element)
- Audioinhalte ohne visuelle Alternative? → Bereitstellung eines Transkripts
- Automatische Wiedergabe? → Vermeiden! Oder zumindest eine klare Pause-Funktion anbieten
Test: Spiele ein Video ohne Ton ab. Ist die Kernbotschaft verständlich? Starten Videos auf der Seite automatisch? Wenn ja, lassen sich diese pausieren?
Semantisch korrekte Inhaltsstruktur: Mehr als nur schöne Überschriften
Eine gut strukturierte Website ist nicht nur für Nutzer*innen wichtig, sondern auch für Screenreader und Suchmaschinen. Semantisch korrekte Überschriften (h1 - h6) sorgen dafür, dass Inhalte logisch gegliedert sind und barrierefrei erfasst werden können.
- Nur eine h1 pro Seite – Sie beschreibt das Hauptthema der Seite.
- Hierarchische Struktur beachten – Eine h2 folgt direkt auf die h1, gefolgt von h3 als Unterkapitel usw.
- Keine Sprünge in der Reihenfolge – Beispielsweise sollte nach einer h2 keine h4 folgen ohne das eine h3 dazwischen liegt
📌 Profi-Tipp: Teste deine Seitenstruktur mit Browser-Plugins wie der Web Developer Toolbar oder nutze Screenreader-Modi in Chrome oder Firefox, um zu erleben, wie assistive Technologien deine Inhalte wahrnehmen.
Barrierefreiheit ist ein fortlaufender Prozess – Wir unterstützen dich dabei!
Unsere Checkliste gibt dir einen ersten Überblick und hilft dir, die größten Barrieren schnell zu identifizieren. Doch Barrierefreiheit im Web ist ein komplexes Thema, das weit über diese grundlegenden Prüfschritte hinausgeht. Aspekte wie semantisches HTML, ARIA-Rollen, dynamische Inhalte oder die korrekte Strukturierung von Formularen und Tabellen erfordern tiefere technische Kenntnisse.
Zudem ist Barrierefreiheit keine einmalige Optimierung, sondern ein kontinuierlicher Prozess. Gerade in dynamischen Webprojekten müssen Überschriften-Strukturen, Alternativtexte, interaktive Elemente und neue Inhalte regelmäßig überprüft und angepasst werden. Damit Barrierefreiheit nachhaltig in deinem Unternehmen verankert wird, sollte das Redaktionsteam mit den wichtigsten A11Y-Prinzipien vertraut sein und diese in die tägliche Content-Pflege integrieren.
Möchtest du wissen, wo deine Website wirklich steht und welche Maßnahmen den größten Impact haben? Wir bieten eine kostenfreie Erstberatung an! Gemeinsam analysieren wir deine Seite, priorisieren sinnvolle Optimierungen und zeigen dir, wie du Barrierefreiheit nachhaltig umsetzen kannst – für eine Website, die wirklich für alle zugänglich ist.