Barrierefreiheit – Anforderungen der WCAG im Detail

Wir möchten mit diesem Artikel ein wenig Licht ins Dunkel bringen und die in den sog. Web Content Accessibility Guidelines (WCAG) definierten Anforderungen an die Barrierefreiheit eines Webangebots genauer vorstellen. Das am 28. Juni 2025 in Kraft getretene Barrierefreiheitsstärkungsgesetz (BFSG) verweist indirekt auf diese Richtlinien als Mindeststandard, die es zu erfüllen gilt.

Die WCAG lassen sich grundsätzlich in vier Prinzipien unterteilen. Inhalte einer Website müssen wahrnehmbar, bedienbar, verständlich und robust sein. Jedes Prinzip beinhaltet eine Reihe von Erfolgskriterien, die von A bis AAA kategorisiert sind. Das Barrierefreiheitsstärkungsgesetz fordert die Erfüllung der Erfolgskriterien der Kategorien A und AA.

Im Folgenden möchten wir nun auf die einzelnen Prinzipien genauer eingehen.

„Informationen und Bestandteile der Benutzerschnittstelle müssen den Benutzern so präsentiert werden, dass diese sie wahrnehmen können.“

Textalternativen: Stellen Sie Textalternativen für alle Nicht-Text-Inhalte zur Verfügung, so dass diese in andere vom Benutzer benötigte Formen geändert werden können (z.B. Großschrift, Braille, Symbole oder einfachere Sprache). Ein klassisches Anwendungsbeispiel sind Medien. Bilder, Videos und Audiodateien sollten beschreibende Untertitel und alt-Tags haben. So können auch seh- oder hörbeeinträchtigte Personen diese Inhalte wahrnehmen.

Zeitbasierte Medien: Stellen Sie Alternativen für zeitbasierte Medien zur Verfügung. Bei Audio- und Videoinhalten sollten Sie zum Beispiel ein Transkript in Textform bereitstellen. Taube Menschen könnten somit die Inhalte einfach lesen und blinden Menschen kann der Inhalt durch den Einsatz von Screenreadern vorgelesen werden.

Anpassbar: Erstellen Sie Inhalte, die auf verschiedene Arten dargestellt werden können (z.B. einfacheres Layout), ohne dass Informationen oder Struktur verloren gehen.
Dieses Kriterium wirkt erstmal ein bisschen kryptisch. Ganz konkret können daraus zum Beispiel folgende Anforderungen abgeleitet werden:

• Inhalte sollten sich unabhängig von der Bildschirmauflösung und Bildschirmausrichtung (Hoch-/Querformat) korrekt und vollständig darstellen lassen.
• Anweisungen, die auf die korrekte Bedienung der Inhalte Ihrer Website abzielen, sollten in Textform bereitgestellt werden, damit diese von Assistenzsystemen erfasst werden können.
• Sofern die Reihenfolge Ihrer Inhalte relevant ist, muss diese im HTML-Code so verankert werden, dass die Reihenfolge auch dann noch erhalten bleibt, selbst wenn das Styling Ihrer Website durch Assistenzsysteme abgeschaltet wird.
• Korrekte Verwendung der HTML-Syntax, so dass der Inhalt Ihrer Website durch Assistenzsysteme richtig interpretiert werden kann. Sie sollten z.B. einen Satz nicht als h1-Überschrift definieren, nur damit der Text groß erscheint, obwohl es sich dabei gar nicht um eine Überschrift handelt. 

Unterscheidbar: Machen Sie es Benutzern leichter, Inhalte zu sehen und zu hören einschließlich der Trennung von Vorder- und Hintergrund. Wichtige Inhalte sollten z.B. nicht ausschließlich durch eine andere Schriftfarbe hervorgehoben werden, sondern zusätzlich durch entsprechende HTML-Tags. Ebenso sollten Audio- und Videoinhalte jederzeit mittels einer klar erkennbaren Schaltfläche pausiert werden können.
Das Schriftbild Ihrer Website muss gut zu lesen sein. Dies kann über einen besonders hohen Farbkontrast, passende Zeilen- und Buchstabenabstände, und der Wahl einer geeigneten Schriftart erreicht werden.

„Bestandteile der Benutzerschnittstelle und Navigation müssen bedienbar sein.“

Tastaturbedienbarkeit: Das wichtigste Kriterium dieses Prinzips ist die Bedienbarkeit Ihrer Website rein über die Tastatur. Einige Menschen sind nicht fähig eine Maus zu bedienen und auf ihre Tastatur angewiesen. So müssen alle Steuerelemente Ihrer Website mit der Tastatur erreichbar und steuerbar sein (auch der Cookiebanner!). Es darf keine sog. „Tastaturfallen“ geben. Auf keinen Fall sollte es Stellen auf Ihrer Website geben, aus denen es kein Zurück gibt, wenn man dorthin mittels seiner Tastatur navigiert.

Ausreichend Zeit: Geben Sie Benutzern ausreichend Zeit, Inhalte zu lesen und zu benutzen. Dies betrifft vor allem Audio- und Videoinhalte. Diese sollten von den Besuchern Ihrer Website so steuerbar sein, dass jeder die Inhalte in seinem individuellen Tempo konsumieren kann. Weiterhin ist es wichtig, dass sich selbstständig bewegende Inhalte vom Besucher Ihrer Website jederzeit pausiert werden können. Der Königsweg hier wäre, dem Besucher eine Möglichkeit anzubieten, die Website vollständig ohne Animationen betrachten zu können.

Anfälle und physische Reaktionen: Gestalten Sie Inhalte nicht auf Arten, von denen bekannt ist, dass sie zu Anfällen oder physischen Reaktionen führen. Einfacher ausgedrückt: sorgen Sie dafür, dass die Inhalte Ihrer Website keine epileptischen Anfälle oder ähnliches auslösen können.

Navigierbar: Stellen Sie Mittel zur Verfügung, um Benutzer dabei zu unterstützen Ihre Website zu navigieren, Inhalte zu finden und zu bestimmen, wo sie sich befinden. Neben den offensichtlichen Kriterien wie das Bereitstellen einer jederzeit erreichbaren Navigation können weitere Maßnahmen hilfreich sein. Das Bereitstellen einer einfachen Auflistung von Links zu allen Unterseiten Ihrer Website (Sitemap), Hinzufügen von Inhaltsverzeichnissen zu textlastigen Unterseiten als auch der Einbau einer Möglichkeit zum Überspringen von Inhalten und eine Suchfunktion. Aber auch das Hinzufügen von sinnvollen Zwischenüberschriften und Beschriftungen hilft dem Benutzer sich auf Ihrer Website zurecht zu finden.

Eingabemodalitäten: Erleichtern Sie Benutzern die Bedienung von Funktionen durch andere Eingabearten als die Tastatur. Diese Erfolgskriterien beziehen sich vor allem auf Schnittstellen-Elemente, die mittels bestimmter Gesten bedient werden müssen. Als Beispiel könnte man hier Slideshows nennen, die an mobilen Endgeräten mittels Wisch-Gesten gesteuert werden können. Zusätzlich sollte man zwischen den einzelnen Slides auch unbedingt mittels Mausklick und Tastatur wechseln können.

„Informationen und Bedienung der Benutzerschnittstelle müssen verständlich sein.“

Lesbar: Machen Sie Inhalte lesbar und verständlich. Dieser Punkt sollte selbsterklärend sein. Zusätzlich seien hier noch mehrsprachige Websites genannt. Sorgen Sie dafür, dass die verwendete Sprache auch im HTML-Code hinterlegt ist.

Vorhersehbar: Sorgen Sie dafür, dass Webseiten vorhersehbar aussehen und funktionieren. Erfinden Sie das Rad nicht neu! Halten Sie sich an etablierte Design-Elemente (z.B. globale Navigation, Verlinkung des Logos mit der Startseite). Die Hauptnavigation Ihrer Website sollte stets gleich aufgebaut sein und an der selben Stelle zu finden sein. Ebenso sollte es keine „Überraschungen“ geben, wenn ein Benutzer z.B. bei Formularen versehentlich auf die Enter-Taste drückt.

Hilfestellung bei der Eingabe: Helfen Sie Benutzern dabei, Fehler zu vermeiden und zu korrigieren. Diese Erfolgskriterien beziehen sich vor allem auf interaktive Inhalte Ihrer Website. Bei Formularen sollten Benutzer auf falsche Eingaben mittels Fehlermeldungen hingewiesen werden. Diese Fehlermeldungen beinhalten idealerweise auch gleich Korrekturvorschläge. Ein Beispiel wäre bei einer Passwortanfrage eine genaue Beschreibung der geltenden Mindestanforderungen an Passwörter. Auch sollte der Benutzer die Möglichkeit haben, seine eingegebenen Daten vor dem Absenden nochmal zu überprüfen. Dies ist besonders im Checkout-Prozess bei Onlineshops relevant, da es beim Absenden der Daten zu einem Vertragsschluss kommt.

„Inhalte müssen robust genug sein, damit sie von einer großen Auswahl an Benutzeragenten einschließlich assistierender Technik interpretiert werden können.“

Kompatibel: Maximieren Sie die Kompatibilität mit aktuellen und zukünftigen Benutzeragenten, einschließlich assistierender Techniken. Auch dieses letzte Erfolgskriterium ist selbsterklärend. Ihre Website sollte immer funktionieren – ganz egal welches Endgerät und welcher Browser der Benutzer verwendet.

Der erste Schritt ist eine Art Bestandsaufnahme des Ist-Zustands. Welche Richtlinien erfüllt Ihre Website bereits, welche nicht und in welchem Umfang. Als nächstes ermitteln wir den erforderlichen Aufwand, um Ihre Website hinsichtlich der Einhaltung des BFSG nachzurüsten und erarbeiten die für Ihre Website optimale Lösung. Kontaktieren Sie uns gerne.

Wir geben in diesem Artikel Tipps und Informationen, übernehmen jedoch keine Gewähr für Vollständigkeit oder absolute Korrektheit. Im Zweifel sollten Sie rechtlichen Rat einholen.