Eine Webseite kann modern aussehen und technisch einwandfrei funktionieren und trotzdem für manche Menschen schwer oder gar nicht nutzbar sein. Zu geringe Farbkontraste, winzige Schriften, unklare Links oder ein Menü, das sich nur mit der Maus bedienen lässt, werden schnell zu echten Hindernissen. Digitale Barrierefreiheit bedeutet, Webseiten so zu gestalten, dass möglichst viele Menschen ihre Inhalte wahrnehmen, verstehen und bedienen können. Davon profitieren nicht nur Menschen mit dauerhaften Einschränkungen. Auch eine gebrochene Hand, schlechte Lichtverhältnisse, ein kleines Smartphone-Display oder nachlassende Sehkraft können die Nutzung erschweren.
In diesem Artikel zeige ich Dir sieben Maßnahmen, die Du an Deiner eigenen Webseite prüfen und Schritt für Schritt verbessern kannst. Du brauchst dafür kein Spezialwissen und musst auch nicht versuchen, sämtliche Anforderungen der WCAG an einem Nachmittag abzuarbeiten.
Wenn Du Deine Webseite noch grundsätzlich planst, lies vorher: Webseite erstellen: Die 6 wichtigsten Schritte für Anfänger
Was bedeutet Barrierefreiheit bei einer Webseite?
Eine barrierefreie Webseite soll Menschen nicht unnötig davon ausschließen, Informationen zu lesen, Formulare auszufüllen, Videos zu nutzen oder eine Bestellung beziehungsweise Buchung abzuschließen.
Eine wichtige Orientierung dafür sind die Web Content Accessibility Guidelines, kurz WCAG. Das sind international anerkannte Richtlinien für digitale Barrierefreiheit. Die aktuelle WCAG-Version 2.2 ordnet die Anforderungen vier Grundprinzipien zu: Inhalte sollen wahrnehmbar, bedienbar, verständlich und robust sein.
Diese vier Begriffe klingen zunächst theoretisch. Für Deine Webseite werden sie aber sehr praktisch: Kann jemand Deinen Text erkennen? Kann er mit der Tastatur durch das Menü navigieren? Versteht er, was ein Button macht? Genau an solchen Fragen setzt Barrierefreiheit an.
Muss jede Webseite seit 2025 barrierefrei sein?
Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG), aber daraus folgt nicht, dass automatisch jede geschäftliche Webseite unter das Gesetz fällt.
Das BFSG betrifft bestimmte Produkte und Dienstleistungen, darunter auch Dienstleistungen im elektronischen Geschäftsverkehr. Dazu können zum Beispiel Online-Shops oder bestimmte Online-Buchungsprozesse gehören. Kleinstunternehmen, die Dienstleistungen anbieten oder erbringen, sind grundsätzlich vom BFSG ausgenommen. Als Kleinstunternehmen gelten Unternehmen mit weniger als zehn Beschäftigten und höchstens 2 Millionen Euro Jahresumsatz beziehungsweise Jahresbilanzsumme.
Wichtig
Das ist nur eine allgemeine Orientierung und keine Rechtsberatung. Ob das BFSG für Deine konkrete Webseite und Dein Angebot gilt, solltest Du im Zweifel individuell prüfen. Unabhängig von einer gesetzlichen Pflicht lohnt es sich, unnötige Barrieren abzubauen.
7 Maßnahmen für eine barrierefreiere Webseite
1. Sorge für ausreichende Farbkontraste
Vielleicht kennst Du das: Eine sehr helle Schrift sieht im Design zunächst modern und dezent aus. Auf dem Smartphone oder bei hellem Tageslicht lässt sie sich plötzlich kaum noch lesen. Für Menschen mit einer Sehschwäche kann ein zu geringer Kontrast die Nutzung einer Webseite noch deutlich schwieriger machen.
Deshalb sollte sich Text klar vom Hintergrund abheben. Das gilt nicht nur für Fließtexte, sondern auch für Buttons, Links, Formularfelder und andere wichtige Elemente Deiner Webseite. Als Orientierung gibt die WCAG 2.2 konkrete Mindestwerte vor. Für normalen Text sollte das Kontrastverhältnis auf Level AA mindestens 4,5:1 betragen, für großen Text mindestens 3:1. Du musst diese Werte aber nicht selbst ausrechnen.
Mit dem WebAIM Contrast Checker kannst Du die Vordergrund- und Hintergrundfarbe eingeben und direkt prüfen, ob der Kontrast ausreicht.
Achte außerdem darauf, Informationen nicht nur über eine Farbe zu vermitteln. Wird ein fehlerhaft ausgefülltes Formularfeld beispielsweise ausschließlich rot markiert, kann diese Information für manche Nutzer schwer erkennbar sein. Ergänze deshalb eine verständliche Meldung wie „Bitte gib eine gültige E-Mail-Adresse ein“.
2. Verwende Alt-Texte richtig
Ein Alt-Text, also Alternativtext, beschreibt den relevanten Inhalt eines Bildes für Menschen, die das Bild nicht oder nicht vollständig wahrnehmen können. Screenreader können diesen Text vorlesen.
Die häufige Regel „Jedes Bild braucht einen beschreibenden Alt-Text“ ist allerdings zu pauschal. Entscheidend ist die Funktion des Bildes.
Ein schlechtes Beispiel wäre „Bild123 blau“. Besser ist eine Beschreibung, die genau die Information vermittelt, die der Nutzer durch das Bild erhalten soll. Bei einer komplexen Infografik reicht ein einzelner kurzer Alt-Text eventuell nicht aus. Dann sollte die entscheidende Information zusätzlich im umgebenden Text stehen.
3. Sorge für gut lesbare und vergrößerbare Texte
Barrierefreiheit lässt sich nicht auf eine einzige vorgeschriebene Schriftgröße reduzieren. Eine Schrift kann auf dem Papier groß genug wirken und auf dem Smartphone trotzdem schlecht lesbar sein.
Wichtiger ist das Zusammenspiel aus Schriftgröße, Schriftart, Zeilenabstand, Kontrast und responsivem Verhalten. Nach WCAG 2.2 AA muss Text bis auf 200 Prozent vergrößert werden können, ohne dass Inhalte oder Funktionen verloren gehen.
Mach deshalb einen einfachen Praxistest: Öffne Deine Webseite am Desktop und stelle den Browserzoom auf 200 Prozent. Kannst Du weiterhin alle Texte lesen? Überlagern sich Elemente? Verschwinden Buttons oder Teile des Menüs? Musst Du für normalen Text ständig horizontal hin- und herscrollen? Solche Probleme solltest Du korrigieren.
Merke Dir
Teste nicht nur Deine Startseite. Blogartikel, Kontaktseite, Formulare und wichtige Landingpages können sich bei Vergrößerung unterschiedlich verhalten.
4. Mache Deine Webseite mit der Tastatur bedienbar
Nicht jeder Nutzer bedient eine Webseite mit der Maus. Deshalb sollten wichtige Funktionen auch über eine Tastatur erreichbar sein. WCAG verlangt unter anderem, dass die Funktionalität über eine Tastaturschnittstelle bedienbar ist und Nutzer nicht in einem Element „festhängen“.
Du kannst das selbst testen: Lege die Maus zur Seite und bewege Dich mit der Tab-Taste durch Deine Webseite. Mit Shift + Tab gehst Du zurück. Prüfe dabei, ob Du das Menü, Links, Buttons und Formularfelder erreichst und ob jederzeit sichtbar ist, welches Element gerade den Fokus hat.
Problematisch wird es beispielsweise, wenn Du einen Button zwar mit der Tab-Taste erreichst, aber nicht erkennst, dass er ausgewählt ist. Auch Pop-ups, Slider und mobile Menüs solltest Du bei diesem Test nicht vergessen.
5. Formuliere verständliche Links und Buttons
Ein Link oder Button sollte möglichst erkennen lassen, was nach dem Anklicken passiert. Formulierungen wie „Hier klicken“ oder mehrfaches „Mehr erfahren“ sind ohne den umgebenden Kontext wenig aussagekräftig.
Statt „Hier klicken“ kannst Du beispielsweise „Anleitung zur WordPress-Installation lesen“ schreiben. Ein Button kann statt „Absenden“ je nach Formular auch „Kostenlosen Leitfaden anfordern“ heißen.
Achte außerdem auf die Bedienung am Smartphone. Sehr kleine Klickflächen oder mehrere eng nebeneinanderliegende Elemente erhöhen die Gefahr, versehentlich den falschen Link zu öffnen. WCAG 2.2 enthält dafür ein eigenes Erfolgskriterium zur Zielgröße von Bedienelementen, wobei Ausnahmen vorgesehen sind.
6. Strukturiere Deine Inhalte mit echten Überschriften
Überschriften sind nicht nur Gestaltung. Sie zeigen, wie Inhalte zusammengehören, und helfen Nutzern, eine Seite schneller zu erfassen. Auch Screenreader können Überschriften zur Navigation verwenden.
Nutze deshalb eine logische Hierarchie. Die Hauptüberschrift der Seite ist die H1. Darunter folgen H2-Abschnitte und bei Bedarf H3-Unterpunkte. Wähle eine Überschrift nicht deshalb als H3, weil Dir ihre voreingestellte Schriftgröße besser gefällt. Die optische Gestaltung regelst Du über Dein Design, die HTML-Ebene über die inhaltliche Struktur.
Ein typischer Fehler ist, Überschriftenebenen zu überspringen oder normalen Text nur fett und groß zu formatieren. Optisch kann das wie eine Überschrift aussehen, technisch ist es aber keine.
7. Gestalte Formulare und Inhalte verständlich
Ein Kontaktformular kann technisch funktionieren und trotzdem unnötig schwer zu bedienen sein. Nutzer müssen erkennen können, welche Angaben erwartet werden, welche Felder Pflicht sind und was sie tun sollen, wenn eine Eingabe fehlerhaft ist.
Beschrifte Formularfelder eindeutig und verlasse Dich nicht nur auf Platzhaltertexte im Eingabefeld. Fehlermeldungen sollten erklären, was konkret korrigiert werden muss. „Bitte gib eine gültige E-Mail-Adresse ein“ hilft mehr als ein roter Rahmen ohne Erklärung.
Auch beim normalen Inhalt gilt: Schreibe verständlich, erkläre Fachbegriffe dort, wo sie zum ersten Mal wichtig werden, und teile lange Textwände sinnvoll auf. Barrierefreiheit bedeutet nicht automatisch „Leichte Sprache“. Verständliche Inhalte helfen aber sehr vielen Menschen.
Barrierefreiheit betrifft noch mehr als diese sieben Maßnahmen
Die sieben Punkte sind ein sinnvoller Einstieg, aber keine vollständige WCAG-Prüfung. Je nach Webseite kommen weitere Anforderungen hinzu. Videos benötigen beispielsweise je nach Inhalt geeignete Alternativen wie Untertitel. Bewegte oder automatisch startende Inhalte können zusätzliche Probleme verursachen. Bei komplexen Komponenten, Shops oder Buchungssystemen reicht eine kurze Sichtprüfung ebenfalls nicht aus.
Das ist ein wichtiger Unterschied: Mit den Maßnahmen in diesem Artikel kannst Du typische Barrieren reduzieren. Du solltest daraus aber nicht ableiten, dass eine Webseite nach dem Abarbeiten automatisch vollständig barrierefrei oder rechtskonform ist.
So prüfst Du Deine Webseite in 5 Minuten selbst
Für einen ersten Schnellcheck brauchst Du kein kostenpflichtiges Audit. Öffne eine wichtige Seite Deiner Webseite und führe diese fünf Tests durch:
- Bediene die Seite für einige Minuten nur mit der Tastatur.
- Stelle den Browserzoom auf 200 Prozent und kontrolliere Text, Menü und Buttons.
- Prüfe die wichtigsten Text- und Button-Kontraste mit einem Kontrasttool.
- Kontrolliere bei Bildern, ob informative Bilder sinnvolle Alt-Texte besitzen und dekorative Bilder korrekt behandelt werden.
- Öffne die Seite auf dem Smartphone und prüfe Lesbarkeit, Klickflächen, Formulare und Navigation.
Dieser Schnelltest ersetzt keine professionelle Prüfung. Er zeigt Dir aber oft schon innerhalb weniger Minuten Probleme, die im normalen Arbeitsalltag unbemerkt bleiben.
Typische Fehler bei der Umsetzung
Fehler 1: Barrierefreiheit erst am Ende berücksichtigen
Ein häufiger Fehler ist, Barrierefreiheit erst ganz am Ende als Zusatzfunktion einbauen zu wollen. Viele Probleme entstehen jedoch bereits beim Design und beim Aufbau der Inhalte. Wenn Du Barrierefreiheit von Anfang an mitdenkst, lassen sich viele Barrieren einfacher vermeiden.
Fehler 2: Sich nur auf ein Accessibility-Plugin verlassen
Ein einzelnes Accessibility-Plugin oder Overlay kann nicht automatisch sämtliche Barrieren Deiner Webseite beseitigen. Solche Werkzeuge können einzelne Funktionen ergänzen, ersetzen aber keine saubere Struktur, verständliche Inhalte, Tastaturbedienbarkeit und technisch korrekte Umsetzung.
Fehler 3: Alles sofort perfekt machen wollen
Gerade bei einer bestehenden Webseite kann die Vielzahl der WCAG-Kriterien schnell überfordern. Du musst nicht alles gleichzeitig lernen und umsetzen. Beginne mit den Bereichen, die Deine Besucher besonders häufig nutzen: Navigation, Texte, Kontaktformular, wichtige Buttons und zentrale Angebotsseiten. Danach kannst Du Deine Webseite Schritt für Schritt weiter verbessern.
Checkliste: Ist Deine Webseite bereits barriereärmer?
- Text und Hintergrund haben einen ausreichenden Kontrast
- Wichtige Buttons und Links sind gut erkennbar
- Informationen werden nicht ausschließlich durch Farben vermittelt
- Informative Bilder besitzen passende Textalternativen
- Dekorative Bilder erzeugen keine unnötigen Screenreader-Inhalte
- Texte bleiben bei 200 Prozent Browserzoom nutzbar
- Menü, Links, Buttons und Formulare lassen sich mit der Tastatur erreichen
- Der Tastaturfokus ist sichtbar
- Überschriften sind logisch als H1, H2 und H3 strukturiert
- Links und Buttons beschreiben möglichst verständlich ihr Ziel beziehungsweise ihre Funktion
- Formularfelder sind eindeutig beschriftet und Fehlermeldungen verständlich
- Die wichtigsten Seiten wurden auf dem Smartphone geprüft
- Videos und andere Medien wurden auf notwendige barrierefreie Alternativen geprüft
Häufig gestellte Fragen
Muss jede Webseite seit 2025 barrierefrei sein?
Nein. Das BFSG gilt seit dem 28. Juni 2025 für bestimmte Produkte und Dienstleistungen. Kleinstunternehmen, die Dienstleistungen anbieten oder erbringen, sind grundsätzlich ausgenommen. Ob Deine konkrete Webseite betroffen ist, hängt unter anderem vom Angebot und vom Unternehmen ab.
Was ist WCAG 2.2?
WCAG steht für Web Content Accessibility Guidelines. Die Richtlinien beschreiben Kriterien für zugänglichere digitale Inhalte. WCAG 2.2 ist die aktuelle W3C-Empfehlung und baut auf den vorherigen Versionen auf.
Welche Schriftgröße ist barrierefrei?
Es gibt nicht die eine Schriftgröße, mit der eine Webseite automatisch barrierefrei wird. Entscheidend sind unter anderem Lesbarkeit, Kontrast und die Möglichkeit, Text zu vergrößern. WCAG 2.2 AA verlangt, dass Text bis auf 200 Prozent vergrößert werden kann, ohne dass Inhalt oder Funktion verloren gehen.
Braucht jedes Bild einen Alt-Text?
Nicht jedes Bild braucht eine ausführliche Beschreibung. Informative Bilder benötigen eine passende Textalternative. Rein dekorative Bilder sollten so umgesetzt sein, dass unterstützende Technologien sie ignorieren können.
Wie kann ich meine Webseite kostenlos auf Barrierefreiheit testen?
Beginne mit manuellen Tests: Tastaturbedienung, 200-Prozent-Zoom, Smartphone-Ansicht und Kontrolle der Alt-Texte. Für Farbkontraste kannst Du zusätzlich ein kostenloses Kontrasttool wie Silktide verwenden. Automatische Tools finden allerdings nicht alle Barrieren.
Verbessert Barrierefreiheit automatisch mein Google-Ranking?
Nein, Barrierefreiheit ist kein direkter Ranking-Schalter. Viele Maßnahmen verbessern jedoch gleichzeitig Struktur, Bedienbarkeit und Nutzererfahrung. Diese Überschneidungen können für eine gute Webseite insgesamt sinnvoll sein, sollten aber nicht als Ranking-Garantie verstanden werden.
Reicht ein Accessibility-Plugin aus?
Nein. Ein Plugin kann einzelne Funktionen ergänzen, macht eine Webseite aber nicht automatisch barrierefrei. Viele Anforderungen betreffen die Struktur, Inhalte, Formulare, Tastaturbedienung und technische Umsetzung.
Fazit: Barrierefreiheit beginnt nicht erst bei der perfekten Webseite
Du musst nicht jede WCAG-Anforderung auswendig kennen, um Deine Webseite besser zugänglich zu machen. Gute Kontraste, sinnvolle Alt-Texte, eine klare Überschriftenstruktur, verständliche Formulare und echte Tastaturbedienbarkeit beseitigen bereits viele typische Hürden. Prüfe zuerst eine Deiner wichtigsten Seiten mit dem 5-Minuten-Test und behebe die auffälligsten Probleme. Danach kannst Du Dich Schritt für Schritt tiefer mit digitaler Barrierefreiheit beschäftigen.
Wenn Du noch am grundsätzlichen Aufbau arbeitest: Webseite erstellen: Die 6 wichtigsten Schritte für Anfänger
