Barrierefreiheit im Web: Warum sie wichtig ist und wie Sie Ihre Website verbessern

Wenn Menschen Ihre Website nicht nutzen können, verlieren Sie sie leise

Die meisten Unternehmen erhalten keine ausführliche Beschwerde, wenn jemand auf eine digitale Barriere stößt. Wer das Menü nicht mit der Tastatur öffnen, eine Fehlermeldung nicht verstehen oder kontrastarmen Text nicht lesen kann, verlässt die Website häufig einfach.

Probleme mit der Barrierefreiheit können sich deshalb zeigen als:

• abgebrochene Formulare
• weniger Buchungen oder Käufe
• zusätzliche Fragen an den Support
• Nutzer, die wichtige Informationen nicht finden
• manuelle Umwege, die Mitarbeiter anbieten müssen
• geringeres Vertrauen in das Unternehmen

Barrierefreiheit ist daher mehr als ein Ideal oder eine technische Checkliste. Entscheidend ist, ob Menschen die Inhalte wahrnehmen, durch die Website navigieren, das Interface verstehen und ihre eigentliche Aufgabe abschließen können.

Meine praktische Einschätzung ist einfach: Barrierefreiheit ist konsequent umgesetzte Usability. Viele Verbesserungen, die Menschen mit Behinderungen helfen, unterstützen zugleich ältere Nutzer, Personen mit vorübergehenden Einschränkungen und alle, die eine Website unter ungünstigen Bedingungen verwenden.

WCAG ist der praktische Referenzpunkt

Die Web Content Accessibility Guidelines (WCAG) werden vom W3C im Rahmen der Web Accessibility Initiative entwickelt. Sie beschreiben, wie Webinhalte für Menschen mit visuellen, auditiven, motorischen oder kognitiven Einschränkungen zugänglicher gestaltet werden können.

WCAG basiert auf vier Prinzipien. Inhalte und Funktionen müssen:

• wahrnehmbar
• bedienbar
• verständlich
• robust

sein.

In der Praxis umfasst das unter anderem:

• Textalternativen für Bilder, die Informationen vermitteln
• Tastaturzugang zu Menüs, Schaltflächen und Formularen
• ausreichenden Farbkontrast
• deutlich sichtbare Fokusmarkierungen
• eine korrekte Überschriftenstruktur und semantisches HTML
• verständliche Beschriftungen und Fehlermeldungen
• Inhalte, die auch bei Zoom und größerer Schrift funktionieren
• Unterstützung für Hilfsmittel wie Screenreader

WCAG unterscheidet drei Konformitätsstufen: A, AA und AAA. Stufe A deckt grundlegende Barrieren ab. AA ergänzt weitere Anforderungen, die für eine praxistaugliche Nutzung wichtig sind. AAA ist die höchste Stufe, aber weder für jede Art von Inhalt erreichbar noch immer das richtige erste Ziel.

Für professionelle Websites ist AA häufig ein vernünftiges Qualitätsziel. Welche gesetzlichen Anforderungen tatsächlich gelten, hängt jedoch vom Land, von der Organisation und von der angebotenen Dienstleistung ab.

WCAG 2.2 ist die neueste fertige Version, Gesetze können trotzdem auf ältere Standards verweisen

WCAG 2.2 ist die neueste fertige Empfehlung des W3C. Sie baut auf WCAG 2.1 auf und enthält zusätzliche Kriterien, unter anderem für sichtbaren Tastaturfokus, die Größe klickbarer Ziele und barrierefreie Authentifizierung.

Das W3C empfiehlt, die neueste Version zu verwenden. Inhalte, die WCAG 2.2 erfüllen, entsprechen grundsätzlich auch WCAG 2.1 und 2.0, unter Berücksichtigung der Erläuterungen im Standard.

Das bedeutet nicht, dass jedes Gesetz automatisch vollständige Konformität mit WCAG 2.2 AA verlangt. Deutsche und europäische Vorschriften können weiterhin auf WCAG 2.1 und die europäische Norm EN 301 549 Bezug nehmen.

Es ist deshalb sinnvoll, drei Dinge zu unterscheiden:

1. Was das Gesetz für Ihre konkrete Dienstleistung verlangt
2. Welchen Qualitätsstandard Sie bei neuer Entwicklung anstreben
3. Welche Barrieren reale Nutzer heute tatsächlich blockieren

Ein Audit sollte alle drei Punkte benennen, nicht nur eine allgemeine Punktzahl ausgeben.

Was gilt in Deutschland?

Welche rechtlichen Anforderungen gelten, hängt unter anderem davon ab, wer die Website betreibt und welche Funktion sie erfüllt.

Für öffentliche Stellen des Bundes sind insbesondere das Behindertengleichstellungsgesetz und die Barrierefreie-Informationstechnik-Verordnung, BITV 2.0 relevant. Die technischen Anforderungen orientieren sich an EN 301 549 und damit in weiten Teilen an WCAG 2.1 auf den Stufen A und AA. Für Länder und Kommunen gelten ergänzend die jeweiligen landesrechtlichen Regelungen.

Seit dem 28. Juni 2025 gilt außerdem das Barrierefreiheitsstärkungsgesetz, BFSG. Es setzt den European Accessibility Act in deutsches Recht um und betrifft bestimmte Produkte sowie verbrauchergerichtete Dienstleistungen, beispielsweise:

• Dienstleistungen im elektronischen Geschäftsverkehr
• bestimmte Bankdienstleistungen für Verbraucher
• Telekommunikationsdienste
• E-Books
• bestimmte Personenbeförderungsdienste
• den Zugang zu audiovisuellen Mediendiensten

Das bedeutet nicht, dass jede Unternehmenswebsite automatisch in demselben Umfang erfasst wird. Maßgeblich sind unter anderem die angebotene Dienstleistung, die Zielgruppe und mögliche Ausnahmen.

Kleinstunternehmen, die Dienstleistungen anbieten oder erbringen, sind nach § 3 Absatz 3 BFSG von den Anforderungen des Gesetzes ausgenommen. Als Kleinstunternehmen gelten nach dem BFSG Unternehmen mit weniger als zehn Beschäftigten und entweder höchstens zwei Millionen Euro Jahresumsatz oder höchstens zwei Millionen Euro Jahresbilanzsumme. Für Produkte gelten andere Abgrenzungen.

Eine technische Prüfung kann Barrieren und mögliche Abweichungen identifizieren, ersetzt jedoch keine Rechtsberatung. Wenn unklar ist, ob und in welchem Umfang das eigene Angebot unter BITV, BFSG oder andere Vorschriften fällt, sollte dies anhand der konkreten Dienstleistung juristisch geprüft werden.

Der Sinn dieser Einordnung ist nicht, Unternehmen Angst zu machen. Barrierefreiheit gehört inzwischen zu Gesetzgebung, Beschaffung und professioneller Qualitätssicherung. Gute Grundlagen früh einzuplanen ist meist günstiger, als später ein ganzes Designsystem nachzurüsten.

Der geschäftliche Nutzen ist praktisch

Barrierefreiheitsarbeit garantiert keine bestimmte Steigerung der Conversion-Rate. Der Nutzen besteht darin, vermeidbare Hindernisse aus Abläufen zu entfernen, die die Website ohnehin unterstützen soll.

Formulare, Buchung und Checkout

Ein Formular ohne verständliche Beschriftungen, brauchbare Fehlermeldungen oder logische Fokusreihenfolge ist ein Conversion-Problem, bevor es zur juristischen Frage wird.

Ein zugängliches Formular sollte unter anderem:

• für jedes Feld eine sichtbare und technisch verknüpfte Beschriftung besitzen
• das erwartete Eingabeformat erklären
• Fehler klar benennen
• Fokus vorhersehbar behandeln
• die erfolgreiche Übermittlung bestätigen
• vollständig ohne Maus bedienbar sein

Das unterstützt Screenreader-Nutzer ebenso wie Menschen, die das Formular auf dem Smartphone ausfüllen oder sich schlicht vertippen.

Mobile Nutzung

Viele Maßnahmen für Barrierefreiheit verbessern unmittelbar die mobile Nutzung:

• größere Touch-Ziele
• besserer Kontrast bei hellem Umgebungslicht
• deutliche Fokus- und Aktivzustände
• Inhalte, die Vergrößerung vertragen
• weniger Anforderungen an präzise Eingaben
• verständlichere Fehlermeldungen

Nutzer müssen keine dauerhafte Behinderung haben, um davon zu profitieren. Vielleicht halten sie das Smartphone mit einer Hand, befinden sich im Zug oder haben vorübergehend eingeschränktes Seh- oder Bewegungsvermögen.

Struktur und Auffindbarkeit

Semantische Überschriften, beschreibende Links, Textalternativen und sauber strukturiertes Markup helfen Suchsystemen, eine Seite zu verstehen. Das ist keine Garantie für bessere Rankings, schafft aber eine bessere technische und redaktionelle Grundlage.

Barrierefreiheit und SEO überschneiden sich in einigen Bereichen, sind jedoch nicht dasselbe. Eine Seite kann für Suchmaschinen gut optimiert und trotzdem mit Tastatur oder Screenreader unbenutzbar sein.

Wartung und Qualität

Barrierefreie Komponenten lassen sich häufig leichter:

• systematisch testen
• dokumentieren
• wiederverwenden
• übergeben
• nach späteren Änderungen kontrollieren

Wenn Buttons, Modals, Formulare und Navigation klaren Standards folgen, muss das Team dieselben Fehler nicht in jeder Kampagne erneut beheben.

Typische Probleme aus der Praxis

Barrieren sind nicht immer technisch kompliziert. Viele entstehen aus Design- und Entwicklungsentscheidungen, die einzeln harmlos wirkten:

• hellgrauer Text, der in Figma gut aussah, auf normalen Displays aber schwer lesbar ist
• Icon-Buttons ohne zugänglichen Namen
• individuell gebaute Dropdowns ohne Tastaturbedienung
• automatisch laufende Karussells ohne geeignete Steuerung
• Überschriftsebenen, die nach Aussehen statt nach Struktur gewählt wurden
• Links, die nur „Mehr erfahren“ heißen
• Fehlermeldungen, die ausschließlich durch rote Farbe gekennzeichnet werden
• Dateinamen als Alternativtext für Bilder
• Videos ohne Untertitel
• PDFs als einzige Quelle wichtiger Informationen
• Cookie- oder Chat-Lösungen, die den Fokus einfangen
• Animationen ohne Rücksicht auf die Einstellung für reduzierte Bewegung

Automatisierte Werkzeuge finden einen Teil dieser Fehler. Andere erfordern manuelle Tests und ein Verständnis dafür, welche Aufgabe der Nutzer erledigen möchte.

So würde ich bei einer typischen Unternehmenswebsite priorisieren

Sie müssen nicht jede Barriere gleichzeitig beheben. Beginnen Sie mit den Nutzerwegen, bei denen ein Problem die größten Folgen hat.

1. Die wichtigsten Abläufe mit der Tastatur testen

Prüfen Sie:

• Navigation
• zentrale Leistungsseiten
• Kontaktformular
• Buchung oder Kauf
• Anmeldung
• Modals und Cookie-Einstellungen

Verwenden Sie ausschließlich Tab, Umschalt+Tab, Enter, Leertaste und Pfeiltasten. Kontrollieren Sie, ob alle Funktionen erreichbar und bedienbar sind, der Fokus sichtbar bleibt und die Reihenfolge logisch ist.

2. Formulare zuerst korrigieren

Formulare sind häufig die letzte Barriere vor einer Anfrage oder Bestellung. Prüfen Sie Beschriftungen, Hinweise, Fehlermeldungen, Fokusreihenfolge und Bestätigung nach dem Absenden.

Placeholder-Text sollte nicht die einzige Beschriftung sein. Er verschwindet bei der Eingabe und ist oft schwer zu interpretieren.

3. Kontrast mit echten Inhalten prüfen

Testen Sie nicht nur den Hero-Bereich, sondern auch:

• Fließtext
• kleine Hilfetexte
• Links
• Schaltflächen
• Fehlermeldungen
• Text auf Bildern
• Navigation und Footer
• Hover-, Fokus- und deaktivierte Zustände

Kontrastprobleme entstehen häufig, wenn Farben aus einem Designsystem in Kombinationen verwendet werden, die niemand geprüft hat.

4. Struktur und Semantik kontrollieren

Jede Seite sollte eine verständliche Dokumentstruktur besitzen:

• eine eindeutige Hauptüberschrift
• eine logische Reihenfolge der Unterüberschriften
• echte Listen für Listeninhalte
• Buttons für Aktionen und Links für Navigation
• semantische Bereiche wie header, nav, main und footer
• aussagekräftige Seitentitel und Linktexte

Semantisches HTML liefert Browsern und Hilfsmitteln bessere Informationen, ohne dass sich das visuelle Design ändern muss.

5. Bilder, Icons und Grafiken prüfen

Informative Bilder benötigen einen Text, der ihre Funktion oder Bedeutung vermittelt. Dekorative Bilder sollten für Screenreader keinen unnötigen Ballast erzeugen.

Alternativtext muss nicht alles beschreiben, was sichtbar ist. Er sollte die Information vermitteln, die der Nutzer ohne das Bild verpassen würde.

6. Zoom und größere Schrift testen

Vergrößern Sie die Seite auf mindestens 200 Prozent und kontrollieren Sie:

• Bleiben Inhalte lesbar?
• Überlagern sich Bedienelemente?
• Wird wichtiger Text abgeschnitten?
• Entsteht unnötiges horizontales Scrollen?
• Lassen sich Formulare weiterhin bedienen?
• Verdecken fixierte Banner große Teile des Bildschirms?

7. Video, Audio und Bewegung kontrollieren

Wenn Sprache oder Ton wichtige Informationen vermitteln, benötigen Nutzer Untertitel oder eine geeignete Textalternative.

Bewegung sollte pausierbar oder reduzierbar sein, wenn sie Probleme verursachen kann. Die Systemeinstellung für reduzierte Bewegung sollte berücksichtigt werden, sofern die Animation nicht für die Funktion erforderlich ist.

8. Mit einem Screenreader testen

Eine grundlegende Prüfung mit VoiceOver, NVDA oder einem vergleichbaren Werkzeug deckt Probleme auf, die automatisierte Tests übersehen:

• unverständliche Lesereihenfolge
• Buttons ohne Namen
• unklare Feldbeschriftungen
• Statusmeldungen, die nicht vorgelesen werden
• dynamische Inhalte ohne Ankündigung
• unnötige Informationen aus dekorativen Elementen

Bei umfangreicheren Diensten ist die Einbeziehung von Personen, die Hilfsmittel selbst im Alltag nutzen, noch wertvoller.

Automatisierte Werkzeuge helfen, reichen aber nicht aus

Werkzeuge wie axe und Lighthouse können bestimmte technische Fehler schnell erkennen. Dazu gehören einige Kontrastprobleme, fehlende zugängliche Namen oder ungültige Strukturen.

Sie können nicht zuverlässig beurteilen:

• ob ein Alternativtext wirklich hilfreich ist
• ob die Überschriftenstruktur inhaltlich Sinn ergibt
• ob die Fokusreihenfolge logisch ist
• ob eine Fehlermeldung den Nutzer zur Lösung führt
• ob ein Ablauf verständlich ist
• ob sich die Tastaturbedienung vorhersehbar anfühlt
• ob Inhalte verständlich formuliert sind

Ein grüner automatisierter Score ist daher weder ein Konformitätsnachweis noch ein Beleg für gute Nutzbarkeit. Er ist ein Datenpunkt innerhalb einer breiteren Prüfung.

Abwägungen, über die man ehrlich sprechen sollte

Vollständige Prüfung oder schrittweise Verbesserung

Eine einfache Marketing-Website und eine komplexe Buchungsplattform haben unterschiedliche Risiken. Wenn nicht alles sofort korrigiert werden kann, priorisieren Sie Funktionen, die Leistungen bereitstellen, Käufe abwickeln oder Anfragen erzeugen.

Schrittweises Arbeiten braucht trotzdem einen Plan. Andernfalls wird „später“ schnell zu einem der Anzeichen, dass Ihre Website ein Upgrade braucht.

Markenauftritt oder Lesbarkeit

Eine Marke kann unverwechselbar bleiben, ohne dünnen grauen Text, schwache Kontraste und permanente Bewegung einzusetzen. Barrierefreiheit beseitigt keine Kreativität. Sie verlangt lediglich bewusstere Entscheidungen darüber, was wirklich wichtig ist.

Eigene Komponenten oder Drittanbieter-Lösungen

Eine solide selbst entwickelte Website kann trotzdem Barrieren erhalten durch:

• Chat
• Cookie-Banner
• Buchungswerkzeuge
• Zahlungsanbieter
• Karten
• Videoplayer
• eingebettete Formulare

Diese Bestandteile müssen in die Prüfung einbezogen werden. Nutzer unterscheiden nicht danach, welcher Anbieter den Fehler verursacht.

Technische Konformität oder tatsächliche Nutzbarkeit

Eine Lösung kann viele formale Tests bestehen und trotzdem unnötig kompliziert sein. WCAG ist ein notwendiger Referenzpunkt, doch gute Barrierefreiheit benötigt auch klare Inhalte, vorhersehbare Navigation und reale Nutzertests.

Wie sinnvoller Fortschritt aussieht

Bedeutende Verbesserungen setzen nicht voraus, dass die gesamte Website sofort perfekt wird.

Guter Fortschritt kann bedeuten, dass:

• Kontakt- und Bestellformulare mit Tastatur und Screenreader funktionieren
• die Hauptnavigation sichtbaren Fokus und eine logische Reihenfolge besitzt
• primäre Handlungsaufforderungen deutlich und lesbar sind
• wichtige Seiten eine verständliche Überschriftenstruktur haben
• Videos mit relevanter Sprache Untertitel erhalten
• das Team weiß, wie es zugänglichere Inhalte veröffentlicht
• neue Komponenten vor der mehrfachen Verwendung getestet werden

Damit werden reale Barrieren reduziert und spätere Verbesserungen günstiger.

Barrierefreiheit sollte kein einmaliges Projekt kurz vor dem Launch sein. Sie gehört in Design, Entwicklung, Content-Arbeit und Qualitätssicherung, damit dieselben Fehler nicht erneut eingebaut werden.

Möchten Sie wissen, wo Ihre Website heute steht?

Kontaktieren Sie mich für eine fokussierte Prüfung der Barrierefreiheit. Sie erhalten eine priorisierte Übersicht über reale Barrieren, die zuerst zu verbessernden Nutzerwege und sinnvolle weitere Schritte.