Wenn Menschen das Wort Barrierefreiheit hören, denken viele an Rollstuhlrampen und hohe Farbkontraste. Auf Websites übersetzt sich das oft in den Gedanken „Schwarzer Text auf weißem Grund, passt schon“.
Das ist ein Trugschluss. Barrierefreiheit bedeutet viel mehr als die richtige Farbwahl. Es geht darum, dass alle Menschen deine Seite nutzen können. Und das betrifft nicht nur Menschen mit Behinderung, sondern jeden, der irgendwann eingeschränkt ist, durch Müdigkeit, eine schlechte Verbindung oder grelles Sonnenlicht auf dem Display.
Was eine barrierefreie Website ist
Eine barrierefreie Website, auf Englisch accessible, kann jede Person wahrnehmen, verstehen und bedienen. Das schließt unter anderem ein:
- Sehen: Sehschwäche, Farbenblindheit, Blindheit
- Hören: Videos ohne Untertitel schließen Menschen aus
- Motorik: Wer keine Maus bedienen kann, braucht die Tastatur oder Sprachsteuerung
- Kognition: Komplizierte Sprache und überladene Seiten überfordern
- Technik: Langsame Verbindungen, alte Geräte, Screenreader
Laut der Weltgesundheitsorganisation WHO (öffnet in neuem Tab) lebt etwa jeder sechste Mensch weltweit mit einer erheblichen Behinderung. Dazu kommen vorübergehende Einschränkungen wie ein gebrochener Arm oder einfach Stress und Zeitdruck. Jeder von uns ist irgendwann darauf angewiesen, dass eine Seite einfach funktioniert.
Für wen eine barrierefreie Website Pflicht ist
Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz, kurz BFSG. Es setzt den European Accessibility Act der EU um. Für Websites wichtig sind diese Punkte:
- Es gilt vor allem für Dienstleistungen im elektronischen Geschäftsverkehr. Gemeint sind Websites und Apps, über die Verbraucher Verträge abschließen, etwa Online-Shops oder Buchungen mit Bezahlung.
- Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz oder Bilanzsumme sind bei Dienstleistungen ausgenommen.
- Reine Informations-Websites ohne Vertragsabschluss und Angebote, die sich nur an Unternehmen richten, fallen in der Regel nicht darunter.
- Maßstab ist die Norm EN 301 549, die auf die Richtlinien WCAG 2.1 in Stufe AA verweist.
- Verstöße können mit einem Bußgeld von bis zu 100.000 Euro geahndet werden.
Ob deine Website betroffen ist, hängt also davon ab, was auf ihr passiert und wie groß dein Unternehmen ist. Das ist eine rechtliche Frage, die im Zweifel eine Fachanwältin oder die Bundesfachstelle Barrierefreiheit (öffnet in neuem Tab) klären sollte.
Welche Fälle genau darunter fallen, was in die Barrierefreiheitserklärung gehört und was bei Verstößen droht, steht im Ratgeber zum Barrierefreiheitsstärkungsgesetz.
Mein Rat ist trotzdem einfach. Auch wenn das Gesetz dich nicht betrifft, lohnt sich Barrierefreiheit. Deine Kunden profitieren, und bei einer neuen Website kostet sie kaum Mehraufwand.
Warum Kontrast allein nicht reicht
Guter Kontrast ist wichtig. Die WCAG verlangen für normalen Text ein Verhältnis von mindestens 4,5 zu 1, für große Schrift 3 zu 1. Aber Kontrast ist nur einer von vielen Punkten. Die Richtlinien beruhen auf vier Grundsätzen:
- Wahrnehmbar: Alternativtexte für Bilder, Untertitel für Videos, Informationen nicht nur über Farbe vermitteln, Text lässt sich vergrößern.
- Bedienbar: Alles funktioniert mit der Tastatur, der Fokus ist sichtbar, nichts blinkt hektisch, und es gibt genug Zeit für Eingaben.
- Verständlich: Klare Sprache, gleichbleibende Navigation, Fehlermeldungen, die erklären, was zu tun ist.
- Robust: Sauberer, semantischer Code, den Screenreader und andere Hilfsmittel verstehen.
Ein paar Beispiele aus der Praxis
- Links: Statt „Hier klicken“ steht im Link, wohin er führt, etwa „Preisliste als PDF herunterladen“.
- Formulare: Jedes Feld hat eine sichtbare Beschriftung, Pflichtfelder sind eindeutig markiert, und Fehlermeldungen sagen, was falsch ist.
- Buttons: Ein Button ist im Code ein echtes Button-Element und kein beliebiges Element, das nur aussieht wie ein Button. Nur dann erkennt ein Screenreader ihn als Button, und er funktioniert auch mit der Tastatur.
- Klickflächen: Buttons und Links sind groß genug, um sie auch mit zittriger Hand oder auf dem Handy zu treffen.
Checkliste für deine barrierefreie Website
Die folgenden Punkte decken die häufigsten Barrieren auf kleinen Websites ab. Sie ersetzen keine vollständige Prüfung nach WCAG, zeigen aber schnell, wo du stehst.
- Jede Seite hat genau eine Hauptüberschrift, darunter folgen die Zwischenüberschriften in der richtigen Reihenfolge.
- Normaler Text hat einen Kontrast von mindestens 4,5 zu 1 zum Hintergrund.
- Alle Links, Buttons und Formularfelder sind mit der Tastatur erreichbar.
- Der Fokus ist immer deutlich sichtbar.
- Menüs und Pop-ups lassen sich mit Escape schließen.
- Bilder mit Inhalt haben einen Alternativtext, dekorative Bilder einen leeren.
- Jedes Formularfeld hat eine sichtbare Beschriftung.
- Fehlermeldungen sagen, was falsch ist und wie man es behebt.
- Linktexte sagen, wohin sie führen.
- Videos haben Untertitel und starten nicht automatisch mit Ton.
- Die Seite respektiert die Einstellung „Bewegung reduzieren“.
- Die Seite lässt sich auf 200 Prozent vergrößern, ohne dass Inhalte verschwinden.
- Die Sprache der Seite ist im Code angegeben, damit Screenreader richtig vorlesen.
Barrierefreie Website testen
Der Tastatur-Test
Leg die Maus zur Seite und bediene deine Website nur mit der Tastatur. Mit Tab springst du vorwärts, mit Shift und Tab zurück, mit Enter löst du Links und Buttons aus, mit Escape schließt du Menüs.
- Kommst du an jedes Element heran?
- Siehst du immer, wo du gerade bist?
- Funktioniert das Menü, und lässt es sich wieder schließen?
Typische Probleme sind Menüs, die nur bei Mausbewegung aufgehen, unsichtbarer Fokus und Pop-ups, aus denen man nicht mehr herauskommt.
Automatische Prüfung
Kostenlose Browser-Erweiterungen wie axe DevTools oder WAVE zeigen viele typische Fehler auf einen Blick, zum Beispiel fehlende Alternativtexte, zu schwache Kontraste oder unbeschriftete Formularfelder. Sie finden aber nicht alles. Ob eine Seite wirklich gut bedienbar ist, zeigt erst der Test mit Tastatur und Screenreader.
Screenreader ausprobieren
Auf dem Mac ist VoiceOver eingebaut, auf Windows gibt es den kostenlosen Screenreader NVDA. Lass dir deine Startseite einmal vorlesen. Du merkst schnell, ob die Überschriften eine sinnvolle Gliederung ergeben.
Wie du dabei vorgehst und welche Tasten du brauchst, steht im Beitrag Website mit Screenreader testen.
Bewegung mit Bedacht
Animationen können eine Seite lebendig machen. Für manche Menschen lösen starke Bewegungen aber Schwindel oder Übelkeit aus. Deshalb gibt es in allen gängigen Betriebssystemen die Einstellung „Bewegung reduzieren“. Eine gute Website respektiert sie und verzichtet dann auf Animationen. Videos, die automatisch mit Ton starten, und blinkende Elemente sind ohnehin tabu.
Plugins sind keine Abkürzung
Werkzeugleisten, die Barrierefreiheit auf Knopfdruck versprechen, sogenannte Overlays, lösen das Problem nicht. Die Website darunter bleibt, wie sie ist. Warum das so ist, habe ich im Beitrag Warum ein Accessibility-Overlay keine Website barrierefrei macht am Beispiel der Vatikan-Website beschrieben.
Kurz zusammengefasst
Barrierefreiheit beginnt nicht beim Kontrast, sondern beim Mitdenken. Eine klare Struktur, Tastaturbedienung, verständliche Sprache und sauberer Code machen deine Website für alle besser, auch für Menschen ohne Einschränkung und für Suchmaschinen.
Ich prüfe jede Website, die ich baue, mit axe auf die WCAG 2.2 in Stufe AA, im hellen und im dunklen Design, am Rechner und auf dem Handy. Wenn du wissen willst, wie das bei deiner Website aussehen kann, schau dir an, wie ich Websites erstelle.
Titelbild: Foto von Skitter Photo über StockSnap, Lizenz CC0 (öffnet in neuem Tab), gefunden über Openverse.
