WCAG-Konformität: Vier Prinzipien für digitale Barrierefreiheit

Wenn Sie sich mit der Barrierefreiheit von Websites beschäftigen, haben Sie wahrscheinlich schon vom Americans with Disabilities Act (ADA)(opens in a new tab) gehört – einem US-Bundesgesetz, das Diskriminierung von Menschen mit Behinderungen durch staatliche Stellen und private Unternehmen verbietet.

Obwohl der ADA verfasst wurde, bevor die meisten Unternehmen im Internet präsent waren, ist heute allgemein anerkannt, dass er sowohl für die Zugänglichkeit physischer Standorte als auch für digitale Angebote wie Websites, Webanwendungen und mobile Apps gilt.

Das Justizministerium (DOJ) empfiehlt, Inhalte anhand der Web Content Accessibility Guidelines (WCAG)(opens in a new tab) zu testen – den internationalen Standards für digitale Barrierefreiheit. Eine aktuelle Änderung von ADA Title II legt nun fest, dass WCAG 2.1 Level AA der Standard für staatliche und lokale Behörden ist. Während Title III des ADA keine expliziten Standards für digitale Barrierefreiheit enthält, kann die Einhaltung der neuesten WCAG-Version zur Konformität beitragen.

Was bedeutet WCAG-Konformität? 

Der Begriff WCAG-Konformität wird in der Branche für digitale Barrierefreiheit häufig verwendet, aber WCAG-Konformität (engl. conformance) ist der genauere Begriff. WCAG ist eine freiwillige Richtliniensammlung, kein Gesetz, das heißt, man kann sie nicht im rechtlichen Sinne erfüllen, sondern sich an die enthaltenen Richtlinien halten.

Kurz gesagt bedeutet WCAG-Konformität, die Richtlinien so weit wie möglich zu befolgen. Es kann sinnvoll sein, sich ein Konformitätsziel zu setzen, um eine barrierefreiere Website oder App zu erstellen und die Einhaltung nationaler und internationaler Barrierefreiheitsgesetze zu verbessern.

Ist WCAG-Konformität für meine digitalen Inhalte verpflichtend?

Die kurze Antwort ist: Ja. Alle Websites, die US-Organisationen gehören und/oder von US-Bürgern genutzt werden, fallen unter den ADA. WCAG 2.1 ist der De-facto-Standard, den das US-Justizsystem zur Bewertung der ADA-Konformität nach Title II verwendet. 

Dies ist eine neue Entwicklung seit April 2024. Vor einer neuen Regelung des Justizministeriums(opens in a new tab) galt WCAG 2.0 als maßgeblicher Standard. Für die allgemeine Konformität empfiehlt es sich, stets die aktuellste Version der Richtlinien zu befolgen – derzeit WCAG 2.2.

Es ist wichtig zu erkennen, dass der ADA für alle Organisationen und alle Arten digitaler Inhalte gilt, die Organisationen verwenden. Behörden haben regelmäßig festgestellt, dass der ADA für Websites gilt, aber auch für webbasierte Dokumente (wie PDFs), Multimedia und mobile Apps.

Leider glauben viele Unternehmen, dass ihre digitalen Inhalte „nicht von Menschen mit Behinderungen genutzt werden“. Da mehr als jeder vierte Erwachsene in den USA eine Behinderung hat(opens in a new tab), ist das selten der Fall. Wenn Ihre Website keine Besucher mit Behinderungen hat, sollten Sie sich fragen, warum 25 % Ihrer potenziellen Zielgruppe Ihre Inhalte meiden.

Da WCAG häufig in Klagen zur Web-Barrierefreiheit zitiert wird, kann das Ignorieren von Barrierefreiheit teuer werden. ADA-Konformität ist für alle Unternehmen wichtig, und der prinzipienbasierte Ansatz der WCAG bietet den besten Weg nach vorn.

Was sind die vier Prinzipien der WCAG?

Die WCAG-Standards umfassen vier zentrale Prinzipien, die sogenannten POUR-Prinzipien: Inhalte müssen Wahrnehmbar (Perceivable), Bedienbar (Operable), Verständlich (Understandable) und Robust sein.

Diese Konzepte bieten eine solide Grundlage für die Erstellung von Webinhalten, die für alle zugänglich und nutzbar sind. Hier eine kurze Einführung in jedes WCAG-Prinzip.

1. Wahrnehmbar 

Eine Website ist wahrnehmbar, wenn alle darin enthaltenen Informationen und ihre Benutzeroberflächenkomponenten (interaktive Links, Textfelder, Schaltflächen usw.) so präsentiert werden, dass alle Nutzer sie wahrnehmen und verstehen können. Anders ausgedrückt: Wenn irgendein nützlicher Inhalt einer Website für einen Nutzer völlig unsichtbar ist, besteht die Seite den Wahrnehmbarkeitstest nicht.

2. Bedienbar

Eine Website ist bedienbar, wenn alle Nutzer mit der Oberfläche interagieren und das Portal navigieren können. Wenn die Website interaktive Komponenten enthält, müssen alle Nutzer diese bedienen können.

3. Verständlich

Digitale Inhalte sollten auf vorhersehbare Weise funktionieren. Eine Website muss es allen Nutzern ermöglichen, die enthaltenen Informationen und Interface-Komponenten zu verstehen. Wenn ein Nutzer nicht nachvollziehen kann, wie eine Website funktioniert oder was ihre Informationen bedeuten, besteht sie den Verständlichkeitstest nicht.

4. Robust 

Die Inhalte einer Website müssen robust und widerstandsfähig genug sein, um von einer Vielzahl von Benutzeragenten interpretiert zu werden, z. B. von Standard-Webbrowsern und unterstützenden Technologien wie Screenreadern (Software, die Text in Audio oder Braille umwandelt).

Da sich Benutzeragenten und Technologien ständig weiterentwickeln, sollten die Inhalte weiterhin zugänglich bleiben. Die Verwendung von geeignetem semantischem HTML und anderen Markup-Typen kann die Kompatibilität mit verschiedenen Technologien verbessern. Die Inhalte einer Website müssen robust und widerstandsfähig genug sein, um von einer Vielzahl von Benutzeragenten interpretiert werden zu können – zum Beispiel von Standard-Webbrowsern und unterstützenden Technologien wie Screenreadern (Software, die Text in Audio oder Braille umwandelt).

Da sich Benutzeragenten und Technologien weiterentwickeln, sollten die Inhalte weiterhin zugänglich bleiben. Die Verwendung von geeignetem semantischem HTML und anderen Markup-Typen kann die Kompatibilität mit verschiedenen Technologien verbessern.

Was bedeutet Konformität mit WCAG-Standards?

Die vier Prinzipien der Barrierefreiheitsstandards klingen sinnvoll, aber wie setzt man sie praktisch um?

WCAG unterteilt jedes Prinzip in eine Reihe von untergeordneten Richtlinien zu bestimmten Themen und zerlegt jede Richtlinie weiter in Erfolgskriterien, die als Checkliste für die Konformität dienen können. Für jedes Erfolgskriterium listet WCAG zudem eine Reihe von „ausreichenden Techniken“ auf – Beispiele, wie die Vorgaben praktisch umgesetzt werden können.

Erfolgskriterien werden zudem in drei Konformitätsstufen eingeteilt: A, AA und AAA. A bietet das grundlegendste Maß an Barrierefreiheit, AAA ist am umfassendsten. Experten für Barrierefreiheit betrachten in der Regel die mittlere Stufe, AA, als Maßstab für ADA-Konformität.

Wie kann ich die WCAG-Konformitätsstandards einhalten?

Um die POUR-Prinzipien anzuwenden, sollten Sie zunächst ein Ziel festlegen. Für die meisten Organisationen ist die Konformität auf Level AA ein realistisches (und erreichbares) Ziel.

Nachfolgend finden Sie einige Beispiele für Maßnahmen, mit denen Sie die Erfolgskriterien auf jeder der drei Stufen der Richtlinie Wahrnehmbarkeit (Guideline 1.4, „Unterscheidbarkeit“) erfüllen können:

Da wir in diesem Artikel nicht alle Richtlinien und Kriterien vollständig auflisten können, schauen Sie sich den „How to Meet WCAG“-Schnellreferenzleitfaden(opens in a new tab) des World Wide Web Consortiums (W3C) an. Dort erhalten Sie eine detaillierte Aufschlüsselung der Erfolgskriterien und eine klarere Roadmap zur Konformität.

1. A: Machen Sie Ihre Website für einige Nutzer zugänglich

Die Erfolgskriterien der Stufe A konzentrieren sich in der Regel auf grundlegende Maßnahmen, um die schwerwiegendsten Barrierefreiheitsfehler zu vermeiden. Als Beispiel betrachten wir Erfolgskriterium 1.4, das sich auf Unterscheidbarkeit konzentriert – also darauf, Inhalte für Nutzer leichter wahrnehmbar zu machen.

Abschnitt 1.4.1 Verwendung von Farbe(opens in a new tab) ist ein Erfolgskriterium der Stufe A und besagt, dass Websites Farbe nicht als alleiniges Mittel zur Informationsvermittlung, zur Anzeige einer Aktion, zur Aufforderung zu einer Reaktion oder zur Unterscheidung eines visuellen Elements verwenden dürfen.

Wenn beispielsweise ein Abschnitt einer Webseite grünen Text enthält und die darin enthaltenen Hyperlinks rot hervorgehoben sind, könnte es für Nutzer mit Rot-Grün-Sehschwäche oder Sehbehinderung schwierig oder unmöglich sein, die Links vom restlichen Text zu unterscheiden. Um das Erfolgskriterium zu erfüllen, wäre eine Verbesserung, den Links ein anderes visuelles Merkmal hinzuzufügen, z. B. sie zu unterstreichen oder eine andere Schriftart zu verwenden. Wichtig ist auch ein guter Farbkontrast – ein Farbkontrast-Checker wie der von AudioEye kann dabei helfen.

2. AA: Machen Sie Ihre Website für fast alle Nutzer zugänglich.

Um die WCAG-Stufe AA zu erfüllen, müssen Sie alle Erfolgskriterien der Stufe A erfüllen. Da die AA-Richtlinien auf denen der Stufe A aufbauen, sind die Anforderungen insgesamt strenger.

Im Erfolgskriterium 1.4 beispielsweise erweitert das 1.4.3 Kontrast (Minimum)(opens in a new tab)-Benchmark der Stufe AA die Empfehlungen von 1.4.1 Verwendung von Farbe. Es empfiehlt, dass jeder Text oder jedes Bild von Text auf der Seite ein Farbkontrastverhältnis von mindestens 4,5:1 aufweist (außer der Text ist groß oder das Bild von Text ist rein dekorativ oder Teil eines Logos oder Markennamens). Mehr dazu, wie Sie digitale Inhalte mit angemessenem Farbkontrast erstellen können, erfahren Sie hier.

Ein weiteres Beispiel ist 1.4.2 Audiosteuerung(opens in a new tab). Dieses Kriterium empfiehlt, dass jede automatisch abspielende zeitbasierte Medieninhalte, die länger als drei Sekunden laufen, eine „Pause“- oder „Stopp“-Option oder ein Zeitlimit haben. So können Nutzer von Screenreadern den Screenreader hören, ohne dass andere Geräusche ablenken – besonders hilfreich für Menschen mit Hörbehinderung.

Ein letztes Beispiel ist das Erfolgskriterium der Stufe AA 1.4.4 Text vergrößern(opens in a new tab), das besagt, dass Nutzer Text bis zu 200 % der Standardgröße vergrößern können sollten, ohne dafür unterstützende Technologien nutzen zu müssen.

3. AAA: Machen Sie Ihre Website für alle Nutzer zugänglich.

Wie oben erwähnt, erfordert die Erreichung der Stufe AAA die Erfüllung aller Erfolgskriterien der Stufen A und AA, bevor ein höherer Standard erreicht werden kann. Zum Beispiel hebt das Erfolgskriterium 1.4.6 Kontrast (Erweitert)(opens in a new tab) das erforderliche Farbkontrastverhältnis von 4,5:1 auf 7:1 an.

Ebenso erweitert 1.4.8 Visuelle Präsentation(opens in a new tab) 1.4.4 Text vergrößern, indem gefordert wird, dass Text bis zu 200 % vergrößert werden kann und der Nutzer trotzdem eine vollständige Zeile lesen kann, ohne das Browserfenster horizontal scrollen zu müssen.

Es werden auch weitere Verbesserungen vorgeschlagen, wie z. B. die Möglichkeit, Vorder- und Hintergrundfarben auszuwählen, Einstellungen für Zeilenabstand und Ausrichtung festzulegen und Hintergrundgeräusche vollständig auszuschalten. Jede dieser Änderungen verbessert die Nutzbarkeit für Menschen mit Behinderungen, um digitale Inhalte zu navigieren und zu verstehen. Beispielsweise profitieren Nutzer mit Legasthenie oder anderen kognitiven Einschränkungen stark von der Möglichkeit, Text zu vergrößern.

Beispiele für WCAG-Prinzipien in der Praxis

Nachdem Sie nun eine grundlegende Vorstellung davon haben, wie WCAG-Erfolgskriterien funktionieren, sehen wir uns an, wie die POUR-Prinzipien auf digitale Inhalte angewendet werden können.

Wahrnehmbarkeit: Farbkontrast

Denken Sie daran: Damit Inhalte wahrnehmbar sind, müssen sie so präsentiert werden, dass alle Nutzer sie verstehen können. Beim Design digitaler Inhalte sollten Sie die Wahrnehmbarkeit stets im Blick behalten und sicherstellen, dass nichts für Nutzer mit Behinderungen „unsichtbar“ oder unzugänglich ist.

Zum Beispiel verlangt das Erfolgskriterium 1.2.2 Untertitel(opens in a new tab) von digitalen Erstellern, Untertitel für alle vorab aufgezeichneten Audioinhalte oder nicht-textuelle Inhalte wie Videos oder Audioclips bereitzustellen. So können auch gehörlose oder schwerhörige Menschen mit Audioinhalten interagieren.

Bedienbarkeit: Tastatur-Navigation

Manche Menschen bedienen Ihre Website ausschließlich mit der Tastatur. Wenn Sie diese Nutzer bei der Planung Ihrer Inhalte nicht berücksichtigen, könnten sie Ihre digitalen Inhalte nur schwer nutzen können.

Deshalb enthält WCAG das Erfolgskriterium 2.1.1 Tastatur(opens in a new tab), das verlangt, dass Websites vollständig mit der Tastatur bedienbar sind. Sie sollten auch andere Eingabemodalitäten (wie Touchscreens, Sprachsteuerung und Blicksteuerung) berücksichtigen. Jede dieser Maßnahmen macht Ihre Website tastaturfreundlicher.

Verständlichkeit: Klare Überschriften und Beschriftungen

Wenn Sie sich fragen, ob Ihre Website verständlich ist, können Sie Wege finden, wie Nutzer leichter finden, was sie suchen, und Ihre Inhalte bedienen können.

Zum Beispiel verlangt das Erfolgskriterium 3.3.2: Beschriftungen oder Anweisungen(opens in a new tab) von Websites, schriftliche Anweisungen (oder Audiobeschreibungen) für Benutzeroberflächenkomponenten (wie Formularfelder) bereitzustellen. Wenn Sie sich ein paar Sekunden Zeit nehmen, um kurze, klare Anweisungen zu schreiben, machen Sie Ihre Inhalte verständlicher.

Robust: Statusmeldungen

Nutzer müssen informiert werden, wenn sich der Inhalt einer Seite ändert, und diese Benachrichtigungen müssen robust sein. Sie müssen für alle Nutzer zugänglich sein – egal ob sie einen Screenreader, einen Touchscreen oder ein anderes Gerät verwenden.

WCAG behandelt dies mit dem Erfolgskriterium 4.1.3: Statusmeldungen(opens in a new tab), das verlangt, dass Statusmeldungen korrekt ausgezeichnet sind. Dies ist eine Art von Barrierefreiheitsproblem, das automatisch erkannt (und ggf. behoben) werden kann – aber wenn Sie beim Schreiben Ihres Markups verschiedene Benutzeragenten berücksichtigen, können Sie das Problem von vornherein vermeiden.

Mit den vier Prinzipien der Barrierefreiheit bessere Inhalte erstellen

Wir haben einige Anwendungsbeispiele der POUR-Prinzipien besprochen, aber die WCAG-Richtlinien decken Dutzende weiterer Szenarien ab – sie alle adressieren häufige Barrieren, die Nutzer mit Behinderungen betreffen könnten.

Die gute Nachricht: Die Arbeit zahlt sich aus. Barrierefreie digitale Inhalte mit klarer, unkomplizierter Funktionalität verbessern das Nutzererlebnis, steigern das Suchmaschinenranking und können mehr Besucher anziehen. Konformität ist hilfreich – aber inklusives Design kann ein mächtiges Werkzeug für das Wachstum Ihres Unternehmens sein.

Hier kommt AudioEye ins Spiel. Unsere Plattform prüft Ihre Inhalte auf häufige WCAG-Konformitätsprobleme und behebt typische Barrierefreiheitsprobleme, die das Nutzererlebnis beeinträchtigen. Wir beginnen mit einem kostenlosen Barrierefreiheits-Scan , der häufige Barrierefreiheitsprobleme identifiziert. Unser Team aus menschlichen Experten testet anschließend Ihre digitalen Inhalte auf komplexere Barrierefreiheitsprobleme und empfiehlt Maßnahmen zur Behebung. Das Ergebnis: barrierefreie, inklusive digitale Inhalte, die für alle funktionieren.