Gemeinsam für ein zugängliches Web: Ein Leitfaden für deine Website

(die Links auf dieser Seite öffnen im neuen Tab)

Du fragst dich vielleicht, was es mit dem Thema „barrierefreie Website“ auf sich hat und ob das für dich überhaupt wichtig ist. Lass uns gemeinsam einen Blick auf die rechtlichen Grundlagen werfen und schauen, wie du deine Website für alle Menschen besser nutzbar machen kannst.

Warum das Ganze? Ein kurzer Blick auf die Gesetze

Es gibt vor allem zwei Gesetze, die du kennen solltest. Keine Sorge, wir halten es kurz und verständlich.

1. Die Barrierefreie-Informationstechnik-Verordnung (kurz BITV)

Dieses Gesetz gibt es schon länger. Es sorgt dafür, dass Websites von öffentlichen Stellen für alle zugänglich sein müssen. Dazu zählen zum Beispiel die Websites von Städten, Behörden und Ämtern. Auch Firmen, die zu einem großen Teil von öffentlichen Geldern gefördert werden, fallen darunter. Wahrscheinlich weißt du also schon, ob dieses Gesetz dich betrifft.

2. Das Barrierefreiheitsstärkungsgesetz (kurz BFSG)

Dieses Gesetz ist neu und trat am 28. Juni 2025 vollständig in Kraft. Es richtet sich an viele Unternehmen und Selbstständige aus der Privatwirtschaft. Das Gesetz besagt, dass Produkte und Dienstleistungen, die du online anbietest, barrierefrei sein müssen. Das betrifft vor allem:

Online-Shops
Websites, über die du Dienstleistungen anbietest (z. B. mit einem Buchungstool)
Bankdienstleistungen
und einige mehr.

Es gibt aber eine wichtige Ausnahme: Wenn dein Unternehmen weniger als 10 Mitarbeiter hat und dein Jahresumsatz unter 2 Millionen Euro liegt, bist du in den meisten Fällen von diesem Gesetz ausgenommen.

Was bedeutet das jetzt für dich?

Stellst du gerade fest, dass eines dieser Gesetze auf deine Website zutrifft? Oder wusstest du das schon und bist deshalb hier gelandet? Dann ist es wichtig, dass deine Website eine Reihe von Anforderungen erfüllt.

Wenn du eine rechtssichere Lösung brauchst, ist jetzt vielleicht der richtige Zeitpunkt, dich an Fachleute zu wenden. Denn ein Rechtsstreit mit Behörden oder der Konkurrenz kann unangenehm werden. Es gibt zwar Werkzeuge, die dir versprechen, deine Website automatisch barrierefrei zu machen, aber das schaffen sie in der Regel nicht vollständig. Stephan und ich unterstützen dich gerne bei der Umsetzung.

Wenn du aber aus eigenem Antrieb deine Website verbessern und für mehr Menschen nutzbar machen möchtest, dann lies bitte weiter. Lass uns gemeinsam das Internet ein Stück einfacher und zugänglicher machen.

Muss eine Website zu 100 % barrierefrei sein?

Wir alle wünschen uns ein Internet ohne Hindernisse. Die Realität sieht aber anders aus. Selbst Fachleute für Barrierefreiheit wissen, die vollkommene Barrierefreiheit ist schwer zu erreichen. Aber wir können dafür sorgen, dass es so wenige Barrieren wie möglich gibt. Jeder kleine Schritt in die richtige Richtung zählt.

Womit fange ich an, bei all den Geräten?

Wenn man sich mit digitaler Barrierefreiheit beschäftigt, merkt man schnell: Es gibt mehr als nur Maus und Tastatur. Menschen mit Einschränkungen nutzen ganz unterschiedliche Hilfsmittel, zum Beispiel:

Augensteuerung oder Mundmaus
Joysticks oder Spracheingabe
Bildschirmlesegeräte (Screenreader), die Texte vorlesen
Braille-Zeilen, die Text in Blindenschrift umwandeln

Wie soll man da allen gerecht werden? Ist das nicht viel zu aufwendig?

Die gute Nachricht ist, du musst nicht für jedes einzelne Gerät optimieren. Du kannst dir die Arbeit erleichtern, indem du dich auf zwei Hauptbereiche konzentrierst, die Bedienung mit der Tastatur und die Ausgabe durch einen Screenreader (einen Bildschirmleser).

Ein Screenreader liest vor, was auf dem Bildschirm steht. Dabei fallen Probleme sofort auf, die man optisch vielleicht übersieht. Zum Beispiel eine unlogische Reihenfolge von Inhalten oder fehlende Beschreibungen für Bilder.

Viele alternative Eingabegeräte funktionieren im Hintergrund wie eine Tastatur. Wenn du also sicherstellst, dass deine Website komplett mit der Tastatur bedienbar ist, machst du sie automatisch für viele verschiedene Hilfsmittel zugänglich.

Ein schneller Test für deine Website

Die Barrierefreiheit einer Website vollständig zu prüfen, ist eine Aufgabe für Menschen. Computer können aktuell nur etwa 40 % der möglichen Probleme automatisch erkennen. Und selbst dann wird oftmals fehlinterpretiert, da hier nur durch einen Algorithmus geprüft wird. Trotzdem schaffen diese Test-Werkzeuge einen guten ersten Überblick.

Wir finden den Test von WAVE sehr hilfreich. Es listet Probleme übersichtlich auf und zeigt direkt an, wo sie sich auf der jeweiligen Seite befinden. Den Test gibt es auch als Erweiterung für den Browser. Damit kannst du auch Seiten prüfen, die noch nicht veröffentlicht sind. Weitere hilfreiche Tools und Add-Ons findest du in unserem Beitrag zu dem Thema. Aber wie gerade schon erwähnt ist es unbedingt notwendig, die Ergebnisse manuell zu überprüfen und sich nicht blind darauf zu verlassen.

Häufige Barrieren, die du schnell beheben kannst

Lass uns schauen, welche Hindernisse wir mit wenig Aufwand entfernen können. Für die folgenden Punkte brauchst du wahrscheinlich keine Programmierer und hilfst trotzdem sehr vielen Menschen.

1. Zu geringe Farbkontraste

Farben sind wichtig für das Design, aber noch wichtiger ist, dass man alles gut lesen kann. Texte und wichtige Grafiken müssen sich klar vom Hintergrund abheben.

Mit dem Contrast Checker von WebAIM kannst du deine Farben ganz einfach prüfen. Du kannst die Farbwerte eingeben oder mit einer Pipette direkt von deiner Website aufnehmen. Ist der Kontrast zu schwach, kannst du mit einem Schieberegler die Farben anpassen, bis es passt. Achte besonders auf Texte, die auf Bildern liegen. Hier muss der Kontrast an jeder Stelle stimmen!

2. Unklare Linktexte

Gehe deine Website durch und schau dir alle Links an. Stell dir vor, du würdest nur den verlinkten Text hören. Wüsstest du dann, wohin der Link führt? Wenn du Links wie „mehr lesen“, „Details“ oder „klicken Sie hier“ findest, solltest du sie verständlicher formulieren. Ein guter Linktext beschreibt, was einen nach dem Klick erwartet, zum Beispiel „Mehr über unsere Webdesign-Leistungen lesen“.

3. Fehlende Alternativtexte für Bilder

Jedes Bild, das eine wichtige Information enthält, braucht einen sogenannten Alternativtext. Das ist eine kurze Beschreibung, die von Screenreadern vorgelesen wird. Das Porträt einer Person sollte also beschrieben werden. Eine rein dekorative Welle im Hintergrund braucht dagegen keine Beschreibung.

Beschreibe, was eine sehende Person auf dem Bild erkennen würde. Fasse dich kurz, aber sei präzise.

4. Fehlende oder falsche Überschriftenstruktur

Eine saubere Struktur mit Überschriften ist nicht nur für Menschen mit Screenreadern wichtig, sondern auch für Suchmaschinen wie Google. Pro Seite sollte es eine Hauptüberschrift (h1) geben. Darunter folgen dann Unterüberschriften (h2, h3 usw.), die den Inhalt gliedern. Wichtig ist, dass du keine Ebene überspringst (also nicht von einer h2 direkt zu einer h4). Ist eine Seite komplex und weist mehrere, inhaltlich gleichwertige Bereiche auf, sind Experten der Meinung, dass hier auch mit mehreren H1 gearbeitet werden darf, um den Inhalt noch besser in die einzelnen Schwerpunktbereiche zu untergliedern.

Darüber hinaus sollte man darauf achten, dass die verschiedenen Bereiche einer Website, also die Navigationsbereiche wie Header und Footer, als auch der Main-Content, der Bereich, in dem sich der Inhalt einer Seite befindet, entsprechend ausgezeichnet sind.

5. Nicht nutzbare Formulare

Schau dir deine Formulare an (z. B. das Kontaktformular oder die Suche). Hier kannst du mit kleinen Änderungen viel bewirken:

Jedes Eingabefeld braucht eine zugehörige Beschriftung. Ein Text, der nur im Feld steht und beim Tippen verschwindet (ein sogenannter Platzhalter), reicht nicht aus. Denn dann weiß man nach der Eingabe nicht mehr, was gefragt war.
Vermeide „Captchas“, also diese Rätsel, die beweisen sollen, dass du ein Mensch bist. Sie sperren oft auch Menschen mit Einschränkungen aus. Wenn du nicht darauf verzichten kannst, nutze unsichtbare Alternativen.
Individuelle Fehlermeldungen, zumeist liest man bei Fehleingaben zum Beispiel „das Feld ist erforderlich“. Seien wir ehrlich, selbst wir fragen uns dann manchmal, was fehlt, was habe ich denn vergessen? Was meinst du, wie es da erst zum Beispiel blinden Menschen geht. Gerade, wenn in solch einem Fall der Cursor nicht automatisch im ersten, korrekt auszufüllenden Feld aktiv ist, sodass man zumindest gleich losschreiben kann.

Mehr zu dem Thema barrierefreie Kontaktformulare findest du in unserem Beitrag dazu. Wir haben ein eigenes Kontaktformular entwickelt, damit wir die Möglichkeit haben, all diese Dinge so auszuformulieren, wie es für die Nutzer am einfachsten verständlich ist und so die barrierefreie Bedienbarkeit zu gewährleisten.

Auf unserer Design-Netzwerk-Website haben wir in den letzten Jahren wichtige Links zum Thema digitale Barrierefreiheit gesammelt, schau auch hier gern einmal vorbei: zu unserer Website