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.

Was ist barrierefreies Webdesign?

Auf den Punkt gebracht: Barrierefreies Webdesign sorgt dafür, dass deine Website für alle Menschen nutzbar ist – egal, ob sie körperliche Beeinträchtigungen haben, älter sind oder deine Seite unter schwierigen Bedingungen nutzen, wie bei schwachem Licht oder lauter Umgebung.

Warum ist Barrierefreiheit wichtig?

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 und B2B-Angebote sind zwar davon (noch) ausgenommen – aber trotzdem sollten sie sich damit vertraut machen. Denn Barrierefreiheit wird immer wichtiger.

Zugänglichkeit für alle: Wenn ein Kunde mit Sehbehinderung deine Produkte nicht sehen kann, weil die Bilder keine Alternativtexte haben, verlierst du nicht nur einen Verkauf, sondern vielleicht auch einen zukünftigen Kunden.

Bessere Nutzererfahrung: Eine barrierefreie Website ist in der Regel auch benutzerfreundlicher für alle. Das bedeutet klarere Navigation, verständlichere Inhalte und eine bessere Struktur.

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?

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. Wenn du technische Begriffe verwenden musst, erkläre sie kurz. Kurze, prägnante Sätze machen es allen Nutzern leichter, deine Inhalte zu verstehen.

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 und ist schwer zu lesen.

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: Vermeide es, Text in Bildern zu verwenden, denn er ist für Screenreader nicht auslesbar. Wenn es nicht anders geht, 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. Stelle sicher, dass kein Element ausgelassen wird.

Escape-Mechanismus: Wenn du ein Pop-up oder ein modales Fenster öffnest, sollte es einfach sein, es mit der Escape-Taste zu schließen. Das gibt den Nutzern die Kontrolle und verbessert die Benutzerfreundlichkeit.

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. https://webaim.org/resources/contrastchecker. Der Mindestkontrast sollte 4,5:1 betragen.

Nutze nicht nur Farben, um Infos zu geben. Beispiel: Wenn du ein Formularfeld mit einem roten Rand markierst, weil es falsch ausgefüllt wurde, stelle sicher, dass es zusätzlich eine Textmeldung gibt, die den Fehler erklärt.

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 als Serif-Schriften.

Schriftgröße und -abstand: Stelle sicher, dass die Schrift groß genug ist (mindestens 16px) und ausreichend Zeilenabstand besteht (mindestens 1,5 Zeilen). Nutzer sollten die Möglichkeit haben, den Text zu vergrößern, ohne dass das Layout zerschossen wird.

Nicht nur Kursivschrift: 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. Dies ist besonders hilfreich für Menschen mit kognitiven Einschränkungen.
- Die Breadcrumbs könnten so aussehen: Startseite > Coaching-Angebote > Persönlichkeitsentwicklung > Selbstbewusstsein stärken

Diese Breadcrumbs helfen dir, schnell zu einer der vorherigen Kategorien zurückzukehren, falls du mehr über andere Coaching-Angebote erfahren möchtest.

Sprunglinks: Ermögliche es Nutzern, direkt zu wichtigen Inhalten zu springen, indem du Sprunglinks anbietest. Diese sind besonders für Screenreader-Nutzer wichtig, da sie lange Navigationsleisten überspringen und direkt zum Hauptinhalt gelangen können.

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: Mache Fehlermeldungen klar und hilfreich. Gib den Nutzern genaue Hinweise, wie sie den Fehler beheben können. Beispielsweise statt „Fehler im Feld“ besser „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: Stelle sicher, dass alle Videos Untertitel enthalten. Das ist nicht nur für gehörlose oder schwerhörige Nutzer wichtig, sondern auch für Menschen, die in lauten Umgebungen keine Lautsprecher nutzen können.

Audiodeskription: 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: Biete für alle Audioinhalte ein Transkript an. Das ist nicht nur für Menschen nützlich, die lieber lesen als zuhören, sondern auch für Suchmaschinen, die den Text durchsuchen und indexieren können.

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: Es gibt verschiedene Tools wie den WAVE Accessibility Checker oder den Lighthouse Report von Google, die dir helfen können, grundlegende Barrierefreiheitsprobleme zu identifizieren.

Manuelle Tests: Automatische Tools decken nicht alles ab. Daher ist es wichtig, dass du selbst manuelle Tests durchführst, z. B. indem du deine Website mit der Tastatur bedienst oder Screenreader ausprobierst.

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 habe 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. Auch wenn solche Overlays von Organisationen wie der „Aktion Mensch“ kritisch gesehen werden, glaube ich, dass sie eine wertvolle Ergänzung zu den umfassenderen Maßnahmen sind, die ich bereits umgesetzt habe.

Fazit

Barrierefreies Webdesign ist nicht etwas, das man tun muss, weil ein Gesetz es verlangt. Es zeigt, dass du dich wirklich um alle Besucher kümmerst. Und eine barrierefreie Website ist nicht nur inklusiv, sondern auch benutzerfreundlich und letztlich erfolgreicher, weil sie eine breitere Zielgruppe erreicht. Mit dieser Checkliste bist du gut gerüstet, deine Website Schritt für Schritt barrierefrei zu gestalten.

Die Checkliste im Überblick: