Wie mache ich meine Website barrierefrei?

Website barrierefrei machen: Was heißt das und wer muss es tun?

Eine Website ist barrierefrei, wenn sie wahrnehmbar, bedienbar, verständlich und robust ist – so lauten die vier Grundprinzipien der Web Content Accessibility Guidelines (WCAG). Praktisch heißt das: Texte lassen sich lesen, auch bei schwachem Sehvermögen, alles funktioniert ohne Maus, Abläufe sind nachvollziehbar, und der Code ist so sauber, dass Hilfsmittel wie Screenreader ihn richtig auslesen. Als Umsetzungsziel hat sich WCAG 2.2 auf Stufe AA etabliert.

Ob eine Pflicht besteht, hängt von Ihrem Angebot ab. Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt seit dem 28. Juni 2025 und betrifft vor allem Verbraucherangebote mit Vertragsabschluss wie Onlineshops und Buchungsstrecken; bei Dienstleistungen sind Kleinstunternehmen ausgenommen. Reine Informationsseiten und Angebote nur für Geschäftskunden fallen in der Regel nicht darunter, öffentliche Stellen folgen der BITV 2.0. Dieser Ratgeber ersetzt keine Rechtsberatung – lassen Sie Ihre Betroffenheit im Einzelfall prüfen.

Schritt 1: Ist-Zustand prüfen – automatisch und von Hand

Beginnen Sie mit einer Bestandsaufnahme. Automatische Werkzeuge wie Lighthouse, axe oder WAVE finden fehlende Beschriftungen, zu geringe Kontraste oder doppelte Kennungen schnell, erkennen aber nur einen Teil der Probleme. Ob ein Alternativtext sinnvoll ist oder die Bedienung logisch bleibt, sehen sie nicht. Verlassen Sie sich deshalb nie allein auf einen Prüfwert, sondern ergänzen Sie jeden automatischen Lauf durch einfache Handtests.

Prüfen Sie Ihre wichtigsten Strecken, etwa Startseite, Kontaktformular, Buchung oder Bestellung, mit einigen Handgriffen. Bedienen Sie die Seite nur mit der Tab-Taste, vergrößern Sie sie auf 200 Prozent und testen Sie eine kurze Strecke mit einem Screenreader wie NVDA oder VoiceOver. Notieren Sie jeden Fehler mit Seite, Beschreibung und Dringlichkeit. So entsteht eine priorisierte Liste, an der sich Aufwand und Reihenfolge der Umsetzung ablesen lassen.

• Nur mit der Tastatur durch die Seite navigieren
• Ansicht auf 200 Prozent vergrößern und prüfen, ob nichts abgeschnitten wird
• Stichprobe mit Screenreader auf den wichtigsten Strecken
• Kontraste von Text und Bedienelementen messen
• Fehler mit Seite, Beschreibung und Dringlichkeit festhalten

Schritt 2: Wahrnehmbar – Kontraste, Texte und Medien

Normaler Text braucht nach WCAG ein Kontrastverhältnis von mindestens 4,5 zu 1 zum Hintergrund, große Schrift und Bedienelemente wie Rahmen von Eingabefeldern mindestens 3 zu 1. Hellgrauer Text auf Weiß und Text über Fotos sind typische Fehler. Verlassen Sie sich außerdem nie allein auf Farbe: Ein roter Rahmen um ein fehlerhaftes Feld braucht zusätzlich einen Text oder ein Symbol. Text sollte sich ohne Verlust vergrößern lassen und nicht in Bildern stecken.

Bilder mit Aussage erhalten einen kurzen, sinnvollen Alternativtext, rein dekorative Bilder einen leeren, damit Screenreader sie überspringen. Videos brauchen Untertitel, und für Inhalte, die nur im Bild erklärt werden, ist eine Beschreibung oder ein Transkript nötig. Medien sollten nicht automatisch mit Ton starten und sich anhalten lassen. Diese Maßnahmen helfen nicht nur Menschen mit Einschränkungen, sondern auch jedem, der unterwegs im Lärm oder bei hellem Licht auf das Display schaut.

Schritt 3: Bedienbar – Tastatur, Fokus und Zielgrößen

Alles, was sich mit der Maus bedienen lässt, muss auch per Tastatur funktionieren: Menüs, Formulare, Dialoge, Karussells. Die Reihenfolge beim Durchtabben sollte der visuellen Logik folgen, und jedes aktive Element braucht einen deutlich sichtbaren Fokus. Nach WCAG 2.2 darf der Fokus zudem nicht von festen Elementen wie Kopfzeilen oder Cookie-Bannern verdeckt werden. Ein Sprunglink am Seitenanfang erlaubt, die Navigation zu überspringen. Tastaturfallen, aus denen man nicht mehr herauskommt, sind unzulässig.

WCAG 2.2 stellt außerdem Anforderungen an Touch-Bedienung: Klickbare Flächen sollen mindestens 24 mal 24 CSS-Pixel groß sein oder genügend Abstand haben, und Aktionen, die ein Ziehen erfordern, brauchen eine einfache Alternative per Klick. Zeitlimits, etwa bei Sitzungen, sollten sich verlängern lassen. Diese Punkte erleichtern die Bedienung für Menschen mit motorischen Einschränkungen und verbessern zugleich die Nutzung auf dem Smartphone.

• Alle Funktionen per Tastatur erreichbar, logische Reihenfolge
• Sichtbarer Fokus, der nicht verdeckt wird
• Sprunglink zum Hauptinhalt
• Klickflächen mit ausreichender Größe oder ausreichendem Abstand
• Einfache Alternativen zu Ziehbewegungen

Schritt 4: Verständlich – Struktur, Formulare und Fehler­mel­dungen

Eine klare Struktur hilft allen. Verwenden Sie genau eine Hauptüberschrift und darunter eine logische Hierarchie, setzen Sie Bereiche wie Kopfzeile, Navigation, Hauptinhalt und Fußzeile semantisch aus, geben Sie jeder Seite einen aussagekräftigen Titel und legen Sie die Sprache der Seite im Code fest, damit Screenreader richtig betonen. Linktexte sollten für sich verständlich sein; „hier klicken“ sagt in einer Linkliste nichts aus.

Formulare sind die häufigste Hürde. Jedes Feld braucht eine sichtbare, mit dem Feld verknüpfte Beschriftung, Pflichtfelder müssen erkennbar sein, und Fehlermeldungen erscheinen als Text beim betroffenen Feld und sagen, wie sich der Fehler beheben lässt. Nutzen Sie die Browser-Funktion zum automatischen Ausfüllen und verlangen Sie nicht, Angaben mehrfach einzugeben. Anmeldungen sollten ohne Rätsel oder Gedächtnisaufgaben funktionieren. Das erhöht die Zahl der abgeschlossenen Anfragen.

Schritt 5: Robust – sauberer Code, Drittan­bieter und Dokumente

Die verlässlichste Grundlage ist semantisches HTML: echte Schaltflächen als Buttons, Links als Links, Listen als Listen. ARIA-Attribute ergänzen, wo native Elemente nicht reichen, ersetzen sie aber nicht; fehlerhaftes ARIA macht die Bedienung oft schlechter als gar keines. Für selbst gebaute Komponenten wie Aufklappmenüs, Dialoge oder Slider gibt es erprobte Muster, die Tastatur und Screenreader berücksichtigen. Prüfen Sie diese Bausteine einzeln.

Beachten Sie auch, was nicht von Ihnen stammt: Cookie-Banner, Buchungs- und Zahlungs-Widgets, Chat-Fenster und eingebettete Karten. Sind sie nicht zugänglich, wird Ihre ganze Strecke unbenutzbar – dann sind Anpassung oder Austausch nötig. Das gilt ebenso für PDF-Dokumente, die als strukturierte, zugängliche Dateien bereitgestellt werden sollten. Vom Einsatz eines Overlays, das Barrierefreiheit per Knopfdruck verspricht, raten wir ab: Es behebt die Ursachen im Code nicht.

Schritt 6: Erklärung, Rückmeldung und dauerhafte Pflege

Dokumentieren Sie den Stand Ihrer Barrierefreiheit. Je nach Pflicht gehören dazu Informationen zur Barrierefreiheit Ihres Angebots, eine Barrierefreiheitserklärung mit dem Stand der Umsetzung und bekannten Einschränkungen sowie ein Kontakt, über den Nutzer Mängel melden können. Öffentliche Stellen sind hierzu ausdrücklich verpflichtet; für andere Anbieter hängen die Informationspflichten von Gesetz und Angebot ab. Lassen Sie das im Einzelfall rechtlich prüfen; das ersetzt keine Rechtsberatung.

Barrierefreiheit ist kein Projekt mit Endpunkt, denn jeder neue Inhalt kann Lücken öffnen. Legen Sie Regeln für die Redaktion fest: Alternativtexte, Überschriftenstruktur, aussagekräftige Linktexte, Untertitel. Prüfen Sie bei Releases und größeren Änderungen die wichtigsten Strecken erneut und schulen Sie neue Redakteure. Wer Zuständigkeiten klar benennt, hält die Qualität dauerhaft. Wir begleiten Sie von der Prüfung über die Umsetzung bis zur Schulung.