Checkliste für Barrierefreies Webdesign: Schritt-für-Schritt-Anleitung

Du hast eine Website und hörst immer wieder von „Barrierefreiheit“? Vielleicht hast du schon davon gehört, dass das Barrierefreiheitsgesetz auch für dich gelten könnte, und jetzt machst du dir Gedanken, ob deine Website den Anforderungen entspricht. Mit dieser praktischen Checkliste und Schritt-für-Schritt-Anleitung kannst du die wichtigsten Punkte prüfen und deine Website für alle zugänglich machen.

Warum ist Barrierefreiheit wichtig?

Für viele Menschen ist das Internet eine große Herausforderung: zu kleine Schriften, schlecht lesbare Farben oder nicht zugängliche Formulare machen den Zugang schwierig. Das betrifft nicht nur Menschen mit Behinderungen, sondern auch ältere Nutzer oder Menschen mit temporären Einschränkungen.

Barrierefreies Webdesign bedeutet, dass alle Menschen deine Inhalte erfassen und mit deiner Website interagieren können – unabhängig von ihren Fähigkeiten oder technischen Hilfsmitteln. Und das Beste daran? Es verbessert nicht nur die Benutzerfreundlichkeit für alle, sondern bringt auch rechtliche Sicherheit, bessere SEO-Rankings und eine breitere Zielgruppe.

Rechtliche Vorgaben: In Deutschland müssen öffentliche Einrichtungen ihre digitalen Angebote schon seit einigen Jahren barrierefrei gestalten. Für private Unternehmen wird das immer wichtiger – vor allem durch das Barrierefreiheitsstärkungsgesetz (BFSG), das ab dem 28. Juni 2025 in Kraft tritt. Kleinstunternehmen (weniger als 10 Mitarbeiter und ein Jahresumsatz von höchstens 2 Millionen Euro) und B2B-Dienstleistungen sind zwar davon (noch) ausgenommen – aber trotzdem sollten sie sich damit vertraut machen.
Anders sieht das bei digitalen Produkten aus: E-Books beispielsweise müssen dann grundsätzlich barrierefrei sein.

Die drei Stufen der Barrierefreiheit

Die Web Content Accessibility Guidelines (WCAG) sind internationale Standards, die sicherstellen, dass Websites für alle Menschen zugänglich sind. Sie sind in drei Stufen unterteilt:

Stufe A: Grundlegende Barrierefreiheit, die sicherstellt, dass wesentliche Barrieren beseitigt werden.

Stufe AA: Erweiterte Barrierefreiheit, die die Benutzererfahrung weiter verbessert.

Stufe AAA: Maximale Barrierefreiheit, die alle Anforderungen erfüllt, aber oft komplex umzusetzen ist.

Für detaillierte Informationen zu den einzelnen Stufen und deren Anforderungen, schau dir meinen Artikel zur Bedeutung der Barrierefreiheit an: Was ist Barrierefreiheit und warum ist sie wichtig?

Mit dieser Checkliste kannst du deine Website Schritt für Schritt auf Barrierefreiheit prüfen und verbessern – los geht’s!

Stufe A (Grundlegende Barrierefreiheit)

Strukturiere deinen Inhalt

Überschriftenhierarchie: Nutze die richtigen HTML-Überschriften-Tags (h1, h2,h3, usw.), um deine Inhalte logisch zu gliedern. Das hilft nicht nur Menschen, die Screenreader nutzen, sondern auch Suchmaschinen, deine Seite besser zu verstehen.

Klare und einfache Sprache: Vermeide Fachjargon, wenn er nicht unbedingt notwendig ist. Falls du technische Begriffe verwenden musst, erkläre sie kurz. Kurze, prägnante Sätze erleichtern das Verständnis.

Listen und Absätze: Nutze Listen, um Informationen übersichtlich zu präsentieren, und verwende Absätze, um deinen Text zu strukturieren. Ein riesiger Textblock kann überwältigend wirken.

Tipp: Stell dir vor, du erklärst einer älteren Person oder einem Kind, was auf deiner Website steht. Würden sie es verstehen?

Füge Alternativtexte für Bilder hinzu

Was ist ein Alternativtext? Alternativtexte (auch „Alt-Texte“ genannt) beschreiben den Inhalt eines Bildes und werden von Screenreadern vorgelesen. Sie helfen auch Suchmaschinen, das Bild zu indexieren.

Wie schreibt man gute Alt-Texte? Sei präzise und beschreibe, was auf dem Bild zu sehen ist und warum es wichtig ist. Beispiel: Ein Bild von einem blauen Auto könnte den Alt-Text „Blaues Auto in einer städtischen Umgebung“ haben.
Wenn das Bild dekorativ ist und keine wichtige Information enthält, kannst du den Alt-Text leer lassen (alt=““).

Bilder mit Text vermeiden: Falls du Text in Bildern nutzt, stelle sicher, dass der Alt-Text den gesamten Textinhalt des Bildes wiedergibt.

Website, Beispiel für nicht barrierefreien Alt-Text eines Bildes — Beispiel für nicht barrierefreien Alt-Text eines Bildes

Website, Beispiel für barrierefreien Alt-Text eines Bildes — Beispiel für barrierefreien Alt-Text eines Bildes

Stelle die Tastaturnavigation sicher

Tastaturfokus sichtbar machen: Wenn Nutzer mit der Tastatur durch deine Website navigieren, sollte der aktuelle Fokus immer deutlich sichtbar sein, man sollte immer genau sehen können, wo man ist. Eine gut erkennbare Umrandung zeigt dem Nutzer, welches Element gerade aktiv ist.

Interaktive Elemente: Alle interaktiven Elemente wie Links, Buttons und Formulare müssen über die Tastatur bedienbar sein.

Escape-Mechanismus: Falls du Pop-ups nutzt, sollte es einfach sein, sie mit der Escape-Taste zu schließen.

Stufe AA (Erweiterte Barrierefreiheit)

Achte auf Farbkontraste

Warum ist das wichtig? Menschen mit Sehschwächen, wie Farbschwäche, benötigen einen hohen Kontrast, um Texte und Bilder klar erkennen zu können.

Wie überprüfst du den Kontrast? Es gibt viele Online-Tools, mit denen du den Kontrast zwischen Text und Hintergrund prüfen kannst, z.B. den WebAIM Contrastchecker. Der Mindestkontrast sollte 4,5:1 betragen.

Nicht nur Farben nutzen: Falls du ein Formularfeld mit einem roten Rand markierst, um einen Fehler zu zeigen, stelle sicher, dass zusätzlich eine Textmeldung existiert..

Tipp: Teste deine Website in Graustufen, um zu sehen, ob alle Informationen noch klar erkennbar sind.

Verwende gut lesbare Schriftarten

Sans-Serif-Schriften bevorzugen: Sans-Serif-Schriften wie Arial oder Helvetica sind für viele Menschen leichter zu lesen.

Schriftgröße und -abstand: Mindestens 16px Schriftgröße und ein Zeilenabstand von mindestens 1,5 Zeilen.

Nicht nur Kursivschrift nutzen: Verwende Kursivschrift sparsam, da sie für manche Nutzer schwer zu lesen ist. Nutze sie nur, um wirklich relevante Informationen hervorzuheben.

Barrierefreiheit Website, Beispiele für schwache und starke Kontraste — Oben: Schwacher Farbkontrast und schwer lesbare Schrift
Unten: Starker Farbkontrast und gut lesbare Schrift

Optimiere die Navigationsstruktur

Klare Menüführung: Das Menü deiner Website sollte einfach und intuitiv sein. Vermeide verschachtelte Menüs mit zu vielen Unterpunkten.

Breadcrumbs: Verwende Breadcrumbs (Brotkrumen-Navigation), um den Nutzern zu zeigen, wo sie sich auf deiner Website befinden und wie sie dorthin zurückgelangen können.
- Beispiel: Startseite > Coaching-Angebote > Persönlichkeitsentwicklung > Selbstbewusstsein stärken

Sprunglinks: Ermögliche es Nutzern, direkt zu wichtigen Inhalten zu springen – besonders für Screenreader-Nutzer wichtig.

Mache Formulare zugänglich

Beschriftungen und Anweisungen: Jedes Formularfeld braucht eine klare und verständliche Beschriftung. Nutze das <label>-Tag, um es mit dem Eingabefeld zu verbinden. Zeige deutlich, welche Felder Pflicht sind.

Platzhalter vs. Beschriftung: Verlasse dich nicht nur auf Platzhaltertexte innerhalb von Eingabefeldern, um Informationen zu geben. Diese verschwinden beim Tippen. Beschriftungen sollten immer außerhalb des Eingabefeldes stehen.

Fehlermeldungen verständlich formulieren: Mache Fehlermeldungen klar und hilfreich. Statt „Fehler im Feld“ lieber „Bitte geben Sie eine gültige E-Mail-Adresse ein“.

Bedienung über Tastatur: Formulare sollten vollständig über die Tastatur bedienbar sein. Das bedeutet, dass Nutzer mit der Tab-Taste zwischen den Feldern wechseln und mit Enter Schaltflächen aktivieren können.

Barrierefreiheit Website, Fehlermeldungen in Formularen — **Die Felder sind als Warnhinweis nicht nur umrahmt, die Fehlermeldungen werden auch as Text ausgegeben**

Stufe AAA (Maximale Barrierefreiheit)

Gestalte Medieninhalte barrierefrei

Untertitel für Videos: Wichtig für gehörlose Nutzer und für alle, die in lauten Umgebungen ohne Ton schauen.

Audiodeskription für Videos: Eine Audiodeskription hilft, indem sie das, was auf dem Bildschirm passiert, in Worte fasst. So können Menschen mit Sehbehinderungen die Handlung besser nachvollziehen..

Transkripte: Beschreibt, was im Video passiert, um Menschen mit Sehbehinderungen zu helfen.

Automatische Wiedergabe vermeiden: Gib den Nutzern die Kontrolle über die Wiedergabe von Medieninhalten. Biete eine Play-Taste an und stelle sicher, dass die Wiedergabe unterbrochen werden kann.

Gestalte Dokumente und PDFs barrierefrei

Barrierefreie PDFs sind der nächsthöhere Schritt in puncto Barrierefreiheit und indirekt natürlich auch Teil der Website.

Warum das wichtig ist: Viele Websites bieten Inhalte in Form von PDFs oder anderen Dokumenten zum Download an. Diese sollten genauso barrierefrei gestaltet sein wie der Rest deiner Website.

Textbasierte PDFs: Vermeide gescannte Dokumente, die nur aus Bildern bestehen. PDFs sollten in einem textbasierten Format vorliegen, damit Screenreader den Text erfassen können.

Struktur hinzufügen: Nutze die Funktionen von Programmen wie Adobe Acrobat, um Überschriften, Lesezeichen und alternative Texte für Bilder in deinen PDFs hinzuzufügen.

Formulare in PDFs: Wenn dein PDF Formulare hat, sollten diese genauso einfach zu bedienen sein wie auf deiner Website. Gestalte die Formularfelder in deinem PDF so, dass sie leicht mit der Tastatur ausgefüllt werden können. Nutzer sollten problemlos zwischen den Feldern wechseln und ihre Eingaben machen können

Übergeordnete Maßnahmen

Regelmäßige Tests und Überprüfungen

Automatische Tools nutzen: WAVE Accessibility Checker oder den Google Lighthouse, können helfen, grundlegende Barrierefreiheitsprobleme zu identifizieren.

Manuelle Tests: Automatische Tools decken nicht alles ab. Bediene deine Website mal selbst nur mit der Tastatur oder einem Screenreader.

Feedback von Nutzern: Hole dir regelmäßig Feedback von Nutzern ein, insbesondere von Menschen mit Behinderungen. Sie können dir wertvolle Hinweise geben, was auf deiner Seite verbessert werden könnte.

Barrierefreiheits-Plugin

Es gibt verschiedene Plugins, sogenannte Overlays, wie UserWay oder WP Accessibility Helper. Diese Tools ermöglichen es Nutzern, schnell Anpassungen an einer Website vorzunehmen, um sie zugänglicher zu gestalten. Zum Beispiel können sie die Schriftgröße ändern oder den Kontrast anpassen. Aber: Sie sind kein Ersatz für die Maßnahmen, die direkt auf der Website umgesetzt werden sollten.

*Auf meiner Website hatte ich UserWay installiert. Ein Plugin, das man bei Bedarf mit einem Klick auf das Symbol aktivieren kann. So kann man einen legasthenie-freundliche Schrift aktivieren, das Schriftbild vergrößern und Lesehilfen einblenden. Eine schnelle Möglichkeit bietet, die Zugänglichkeit noch weiter zu verbessern. Solche Overlays werden von Organisationen wie der „Aktion Mensch“ kritisch gesehen. Ich dachte anfangs, dass so ein Tool ein guter Schritt in Richtung Barrieirefreiheit ist – Inzwischen habe ich mich überzeugen lassen, dass diese Tools die Maßnahmen, die ich dir hier vorgestellt habe, nicht ersetzen können. Außerdem sieht jedes Plugin anders aus und hat unterschiedliche Funktionen an verschiedenen Stellen. Damit kann es die Bedienung einer Website sogar erschweren. Deshalb nutze ich es nicht mehr.

Fazit

Mit dieser Checkliste hast du nicht nur eine inklusivere Website, sondern machst dein Webdesign insgesamt benutzerfreundlicher und nachhaltiger. SEO, Nutzerfreundlichkeit, rechtliche Sicherheit – alles spricht dafür! Und falls du dir unsicher bist oder professionelle Unterstützung brauchst: Schau dir meinen 1:1-Workshop „Barrierefrei-Boost“ an – gemeinsam optimieren wir deine Website, ohne dass du im Technik-Dschungel stecken bleibst.

Die Checkliste im Überblick: