Website barrierefrei machen: Erste Schritte

Website barrierefrei machen bedeutet, Inhalte so aufzubauen, dass möglichst viele Menschen sie wahrnehmen und bedienen können. Dazu gehören Menschen mit eingeschränktem Sehen, Hören oder Bewegen ebenso wie Nutzer, die vorübergehend nur eine Hand frei haben oder eine Webseite mit der Tastatur bedienen.

Du musst nicht mit einem vollständigen Umbau beginnen. Prüfe zuerst die wichtigsten Seiten, beseitige klare Hindernisse und teste jede Änderung. Viele Verbesserungen helfen zugleich älteren Lesern, mobilen Nutzern und Menschen mit langsamer Internetverbindung.

Dieser Beitrag wurde am 22. August 2026 anhand der Informationen der Bundesfachstelle Barrierefreiheit und des World Wide Web Consortium geprüft. Er ersetzt keine rechtliche Beratung.

Warum Barrierefreiheit für kleine Webseiten wichtig ist

Eine schwer lesbare Schrift, unklare Überschriften oder ein Formular ohne Beschriftung stören nicht nur Menschen mit einer anerkannten Behinderung. Auch bei nachlassender Sehschärfe, einem gebrochenen Arm, grellem Sonnenlicht oder einer langsamen Verbindung werden solche Hürden sichtbar.

Für ein Online Business ist das praktisch relevant. Besucher sollen einen Ratgeber lesen, ein Angebot verstehen oder ein Formular ausfüllen können. Wenn schon die Navigation mit der Tastatur scheitert, hilft auch ein guter Verkaufstext nicht.

Barrierefreiheit ist außerdem kein einmaliges Projekt. Neue Beiträge, Bilder, Formulare und Erweiterungen können neue Probleme erzeugen. Plane deshalb kurze Prüfungen in deinen normalen Veröffentlichungsablauf ein.

Gilt das Barrierefreiheitsstärkungsgesetz für dich?

Das Barrierefreiheitsstärkungsgesetz, kurz BFSG, gilt seit dem 28. Juni 2025 für bestimmte Produkte und Dienstleistungen. Dazu können auch Dienstleistungen im elektronischen Geschäftsverkehr gehören. Ob deine konkrete Webseite darunter fällt, hängt unter anderem von Angebot, Unternehmensgröße und Rolle im Geschäftsprozess ab.

Die Bundesfachstelle Barrierefreiheit zu Onlineshops erklärt die Ausnahme für Kleinstunternehmen, die Dienstleistungen anbieten. Dafür müssen weniger als zehn Personen beschäftigt sein und der Jahresumsatz darf höchstens zwei Millionen Euro betragen. Bei Produkten gelten andere Fragen.

Verlasse dich deshalb nicht allein auf eine pauschale Aussage aus einem Blog. Prüfe dein Angebot anhand der offiziellen Informationen und hole bei Unsicherheit fachlichen Rat ein. Selbst wenn eine Ausnahme greift, bleiben die praktischen Vorteile einer zugänglichen Seite bestehen.

Website barrierefrei machen: Mit einer Prüfung starten

Wähle zuerst fünf wichtige Seiten: Startseite, einen häufig gelesenen Artikel, eine Landingpage, ein Kontaktformular und eine rechtliche Seite. Öffne jede Seite auf Computer und Smartphone.

Die W3C Easy Checks nennen einfache erste Prüfungen. Dazu gehören Seitentitel, Alternativtexte, Überschriften, Kontrast, Vergrößerung, Tastaturbedienung, sichtbarer Fokus, Formulare und bewegte Inhalte.

Notiere jedes Problem in einer einfachen Liste. Ordne zuerst Hindernisse, die einen Vorgang vollständig verhindern. Danach folgen Probleme, die das Lesen oder Bedienen erschweren. Kleine Schönheitsfehler kommen zuletzt.

Automatische Tests sind nur der Anfang

Ein Prüfwerkzeug findet zum Beispiel fehlende Alternativtexte oder manche Kontrastfehler. Es erkennt aber nicht zuverlässig, ob ein Alternativtext den Bildinhalt sinnvoll beschreibt oder eine Überschrift logisch gewählt wurde.

Nutze automatische Prüfungen daher als Hinweisgeber. Ergänze sie durch Tastaturtests, starke Vergrößerung und eine inhaltliche Kontrolle. Ein fehlerfreier Werkzeugbericht beweist noch keine barrierefreie Seite.

Überschriften und Links verständlich schreiben

Überschriften bilden die Gliederung eines Beitrags. Verwende die Hauptüberschrift nur einmal. Darunter folgen H2 Überschriften für Hauptabschnitte und H3 Überschriften für Unterpunkte. Wähle die Ebene nach der Struktur, nicht nach gewünschter Schriftgröße.

Ein Linktext wie „hier klicken“ sagt außerhalb seines Absatzes wenig. Schreibe stattdessen, wohin der Link führt, etwa „Anleitung zum Bilderkomprimieren“. Wiederhole denselben Linktext nicht für verschiedene Ziele.

Kurze Absätze, aktive Sätze und klare Begriffe helfen ebenfalls. Erkläre Abkürzungen beim ersten Auftreten. Vermeide ganze Textblöcke in Großbuchstaben, weil sie schwerer zu erfassen sind.

Alternativtexte für Bilder festlegen

Ein informativer Alternativtext beschreibt den Zweck eines Bildes im Zusammenhang mit dem Beitrag. Er muss nicht jedes Detail aufzählen. Ein rein dekoratives Bild erhält einen leeren Alternativtext, damit ein Screenreader es überspringen kann.

Schreibe nicht automatisch „Bild von“ oder „Foto von“. Ein besserer Text lautet zum Beispiel: „Kontrastprüfung einer Webseite auf einem Laptop“. Bei einer Grafik nennst du die wesentliche Aussage und stellst ausführliche Daten zusätzlich als Text bereit.

Der Beitrag Alt Texte schreiben zeigt dir die Unterscheidung zwischen informativen, funktionalen und dekorativen Bildern. Prüfe zuerst Bilder in Formularen und auf Zielseiten, weil ihr Zweck dort besonders wichtig ist.

Kontraste und Schrift prüfen

Text muss sich deutlich vom Hintergrund abheben. Das W3C nennt beim Mindestkontrast für normalen Text ein Verhältnis von 4,5 zu 1. Für großen Text gilt mindestens 3 zu 1. Logos und rein dekorative Elemente werden anders behandelt.

Die W3C Erläuterung zum Mindestkontrast erklärt auch, dass dünne Schriften trotz rechnerisch ausreichender Werte schwach wirken können. Prüfe deshalb nicht nur den Farbwert, sondern auch Schriftstärke und tatsächliche Darstellung.

Verlasse dich nie allein auf Farbe. Ein fehlerhaftes Formularfeld braucht zusätzlich einen Text oder ein Symbol. Ein grüner und ein roter Zustand sind für manche Menschen kaum zu unterscheiden.

Vergrößere die Seite im Browser auf 200 Prozent. Text und Bedienelemente dürfen sich nicht überdecken. Das Menü, Formulare und Hinweise müssen weiter nutzbar bleiben.

Tastatur und Formulare testen

Lege die Maus beiseite. Bewege dich mit Tabulatortaste und Umschalttaste plus Tabulatortaste durch die Seite. Mit Enter oder Leertaste solltest du Links, Schaltflächen und andere Bedienelemente auslösen können.

Der aktuelle Fokus muss sichtbar sein. Ein klarer Rahmen zeigt, welches Element gerade ausgewählt ist. Prüfe auch, ob die Reihenfolge logisch dem sichtbaren Aufbau folgt und ob du ein geöffnetes Menü wieder schließen kannst.

Jedes Formularfeld braucht eine verständliche Beschriftung. Ein Platzhalter im Feld reicht nicht, weil er beim Tippen verschwindet. Fehlermeldungen sollen das betroffene Feld nennen und erklären, wie der Fehler behoben wird.

Teste das Kontaktformular vollständig. Sende eine richtige und eine fehlerhafte Eingabe. Prüfe Bestätigung, Fehlermeldungen und die Bedienung auf dem Smartphone.

Videos, Animationen und Downloads berücksichtigen

Ein Video mit gesprochenen Informationen braucht passende Untertitel. Wichtige sichtbare Vorgänge benötigen außerdem eine textliche Erklärung oder Audiobeschreibung. Automatisch erzeugte Untertitel musst du wegen Namen, Zahlen und Fachbegriffen kontrollieren.

Bewegte Slider, blinkende Hinweise und automatisch startende Videos lenken ab. Nutzer sollten Bewegungen pausieren oder stoppen können. Häufig ist eine ruhige Darstellung ohnehin verständlicher und schneller.

Auch herunterladbare PDF Dateien können Barrieren enthalten. Eine zugängliche Webseite gleicht ein unlesbares Dokument nicht aus. Stelle wichtige Informationen möglichst zusätzlich als HTML bereit und prüfe häufig genutzte Downloads gesondert.

Technik und Ladezeit gemeinsam verbessern

Barrierefreiheit und Geschwindigkeit widersprechen sich nicht. Komprimierte Bilder, sauberes HTML und wenige unnötige Skripte helfen vielen Nutzern. Der Beitrag WordPress Bilder komprimieren erklärt, wie du Dateigröße und Darstellungsqualität abwägst.

Prüfe nach Änderungen auch die Ladezeit und sichtbare Layoutverschiebungen. Die Anleitung Core Web Vitals verbessern zeigt die wichtigsten Messwerte. Eine schnelle Seite ist aber nicht automatisch barrierefrei; beide Prüfungen ergänzen sich.

Ein realistischer Plan für vier Wochen

In Woche eins prüfst du die fünf wichtigsten Seiten mit den Easy Checks. In Woche zwei korrigierst du Überschriften, Linktexte und Alternativtexte. In Woche drei testest du Navigation und Formulare vollständig mit der Tastatur.

In Woche vier bearbeitest du Kontraste, Vergrößerung, Videos und Downloads. Danach ergänzt du deine Veröffentlichungscheckliste um fünf feste Punkte: Überschriftenfolge, Alt Text, Linktext, Tastaturtest und mobile Ansicht.

Dokumentiere offene Probleme mit Seite, Stelle, Auswirkung und Zuständigkeit. So bleibt die Aufgabe überschaubar und du erkennst, was bereits verbessert wurde.

Website barrierefrei machen beginnt mit echten Nutzungssituationen. Prüfe deine wichtigsten Seiten, behebe blockierende Fehler zuerst und wiederhole den Test nach jeder größeren Änderung. So entsteht Schritt für Schritt eine verständlichere Webseite für mehr Menschen.