Gut 7,8 Millionen Menschen in Deutschland haben eine anerkannte Schwerbehinderung, das sind 9,4 Prozent der Bevölkerung. Ob Sie diese Besucher erreichen, entscheidet sich beim Entwurf, nämlich an der Farbwahl, der Schriftgröße und dem Aufbau der Navigation. Dieselben Entscheidungen kommen allen anderen zugute, denn große Schrift und deutliche Farben wirken auch auf einem kleinen Handybildschirm.
Barrierefreiheit im Webdesign erkennen Sie an Farben, die auch bei schwacher Sehkraft tragen, an Schrift mit Luft zwischen den Zeilen und an Schaltflächen, denen man die Funktion sofort ansieht.
Farben und Kontraste im barrierefreien Webdesign
Den größten Unterschied macht die Schriftfarbe. Dunkle Schrift auf hellem Grund lesen auch Menschen mit nachlassender Sehkraft mühelos. Mögen Sie es dunkler, trägt helle Schrift auf kräftigem Untergrund genauso.
Denselben satten Ton verdienen auch die kleinen Texte, also Bildunterschriften, Hinweise unter den Formularfeldern und die Fußzeile. Bleiben sie ebenso lesbar wie der Fließtext darüber, wirkt die ganze Seite aufgeräumter. Schaltflächen und Eingabefelder brauchen ebenso eine Umrandung, die sich vom Hintergrund abhebt, damit Besucher sie als bedienbar wahrnehmen.
Wichtige Hinweise kommen an, wenn neben der Farbe auch ein Zeichen oder ein Wort sie trägt: eine Unterstreichung bei Links, eine Beschriftung an den Kurven eines Diagramms, ein Sternchen an Pflichtfeldern. So erreicht Ihre Botschaft auch Menschen mit einer Rot-Grün-Schwäche vollständig. Über die Lesbarkeit hinaus prägt die Farbe im Webdesign die Stimmung, die Ihre Seite beim ersten Blick auslöst.
Barrierefreie Schrift und großzügige Abstände
Bei der Schrift kommt es vor allem auf gut unterscheidbare Buchstaben an, gesetzt in einer Größe, die auch aus etwas Entfernung lesbar bleibt. Geben Sie den Zeilen dazu reichlich Abstand, findet das Auge sicher in die nächste Zeile. Schmale Textspalten und großzügiger Weißraum im Webdesign halten den Rückweg dorthin kurz.
Menschen mit einer Lese-Rechtschreib-Schwäche halten die Zeile dadurch leichter, und jeder, der abends auf dem Sofa mit dem Handy liest, findet schneller zurück in den Text. Manche stellen sich Abstände und Schriftgröße im Browser zusätzlich selbst ein. Ihr Layout kommt ihnen entgegen, sobald die Textkästen mit dem Inhalt mitwachsen und die Menüs sich bei größerer Schrift neu anordnen.
Die Gliederung zeigt sich an der Größe der Überschriften, mit einer kräftigen Hauptüberschrift, darunter Zwischenüberschriften in abgestufter Stärke und darunter dem Fließtext. Beim Überfliegen erschließt sich der Aufbau dadurch in Sekunden, und Vorlesesoftware gibt ihn in derselben Reihenfolge wieder. Suchmaschinen lesen dieselbe Gliederung aus dem Quelltext wie die Vorlesesoftware, weshalb gut strukturierte Inhalte beiden entgegenkommen.
Linksbündiger Satz hält die Wortabstände gleichmäßig und gibt dem Auge an jeder Zeile denselben Anfangspunkt. Absätze mit sichtbarem Abstand dazwischen ergeben Blöcke, die sich einzeln lesen lassen. Überschriften und Zitate gehören dabei als echter Text auf die Seite, damit sie beim Vergrößern scharf bleiben und sich vorlesen lassen. Lassen Sie am Smartphone außerdem das Vergrößern mit zwei Fingern zu, nutzen Menschen mit schwacher Sehkraft ihr gewohntes Hilfsmittel. Serifenlose Schriften mit deutlich unterscheidbaren Buchstabenformen haben sich in der Typografie für Bildschirmtexte bewährt.
Navigation und Formulare ohne Barrieren
Eine barrierefreie Navigation sieht auf jeder Unterseite Ihrer Website gleich aus, trägt überall dieselben Bezeichnungen und sitzt an derselben Stelle. Eine Breadcrumb-Navigation, die den Pfad von der Startseite bis zur geöffneten Seite anzeigt, macht die aktuelle Position deutlich. Eine Suche eröffnet den zweiten Zugang zu den Inhalten, und ein Sprunglink ganz oben führt mit einem Tastendruck direkt zum Text.
Eine gefüllte Fläche, ein Rahmen oder eine Unterstreichung zeigt auf den ersten Blick, worauf sich klicken lässt, und ein Symbol bekommt seine Beschriftung daneben, denn ein Zahnrad, ein Herz oder drei Striche bedeuten je nach Zusammenhang etwas anderes. Fährt der Mauszeiger darüber, wechselt die Farbe, und beim Tippen am Handy meldet ein kurzer Wechsel den Treffer. Geht jemand mit der Tabulatortaste durch die Seite, zeigt ein farbiger Rahmen das Element, das gerade an der Reihe ist. Am auffälligsten gerät dabei Ihr Call to Action, der sich in Farbe und Größe von den übrigen Schaltflächen abhebt.
Große Flächen mit etwas Abstand zueinander kommen jedem entgegen, der mit unruhiger Hand oder unterwegs im Bus tippt. Treffsichere Flächen gehören zur Usability, also zur Bedienfreundlichkeit der ganzen Seite. Bei Formularen steht die Beschriftung über dem Feld, sodass sie beim Tippen sichtbar bleibt, während ein Hinweis im Feld selbst dem eingegebenen Text weicht. Fehlermeldungen benennen das betroffene Feld und den erwarteten Inhalt und tragen damit zur Abschlussquote Ihrer Formulare bei.
Barrierefreie Bilder und Videos
Manche Besucher lassen sich Ihre Seite vorlesen. Für sie trägt jedes Bild eine kurze Beschreibung im Quelltext, den Alt-Text, der den Zweck der Aufnahme in einem Satz wiedergibt. Zeigt Ihre Aufnahme das Ladengeschäft, genügen Eingang und Schaufenster für ein vollständiges Bild im Kopf.
Rein schmückende Bilder kommen mit einer leeren Beschreibung aus, sodass die Vorlesefunktion gleich zum nächsten Inhalt weitergeht. Untertitel unter Ihren Videos erreichen gehörlose Menschen und ebenso alle, die im Wartezimmer still mitlesen. Den Platz dafür halten Sie am besten schon im Entwurf frei, zusammen mit dem Raum für eine Bildunterschrift.
Bei einem Bildwechsler und einem startenden Video hilft eine Schaltfläche zum Anhalten. Damit bestimmt jeder sein eigenes Tempo, was vor allem Menschen mit Aufmerksamkeitsstörungen hilft. Bleibt beim Laden außerdem alles an seinem Platz, trifft jeder Klick sein Ziel, und die Verschiebung beim Laden führen die Core Web Vitals als eigenen Wert.
Barrierefreiheit als gesetzliche Vorgabe
Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz, mit dem Deutschland eine europäische Vorgabe umsetzt. Es erfasst Angebote, bei denen Ihre Kundschaft online kauft oder bucht. Führen Sie einen Onlineshop, ein Kundenkonto oder eine Terminbuchung, gehört Ihr Angebot dazu.
Kleinstunternehmen nimmt das Gesetz bei Dienstleistungen aus, sofern zwei Bedingungen zugleich zutreffen: weniger als zehn Beschäftigte und höchstens zwei Millionen Euro Jahresumsatz oder Bilanzsumme. Fällt Ihr Angebot darunter, kommt eine Erklärung zur Barrierefreiheit auf der Website hinzu, die den erreichten Stand festhält und eine Kontaktmöglichkeit für Rückmeldungen nennt.
Den fachlichen Maßstab liefern eine europäische Norm und das internationale Regelwerk der Web Content Accessibility Guidelines, auf das sie sich stützt. Welche Anforderungen im Einzelfall greifen, klärt eine fachliche Prüfung. Bei einer Neugestaltung fallen die Entscheidungen zu Farben, Schriften und Navigation zusammen an. Early Webdesign baut Auftritte mit WordPress oder Astro und richtet sie dabei von Beginn an auf barrierefreies Webdesign aus.
Fazit
Ein barrierefreies Webdesign zeigt kräftige Farben, gut lesbare Schrift mit großzügigen Abständen, eine überall gleiche Navigation, deren Zustände sich ablesen lassen, Formulare mit dauerhafter Beschriftung und Medien, die beschrieben oder untertitelt sind. Wichtige Hinweise tragen dabei neben der Farbe ein Zeichen oder ein Wort, und jede Bewegung lässt sich anhalten.
Die Gliederung folgt der Größe der Überschriften, der Satz bleibt linksbündig, und die Textspalten behalten eine Breite, die den Zeilenwechsel sicher macht. Bilder ohne eigene Aussage bleiben beim Vorlesen unerwähnt, damit die Beschreibungen dort stehen, wo sie etwas beitragen.
Die Angaben zu Rechtsgrundlagen und Gestaltungsanforderungen geben den Stand vom 7. September 2026 wieder und beruhen auf dem Barrierefreiheitsstärkungsgesetz, den Hinweisen der Bundesfachstelle Barrierefreiheit sowie den Empfehlungen des W3C für barrierefreie Gestaltung. Dieser Beitrag dient der allgemeinen Information und ersetzt keine Rechtsberatung.
