Ein vollständiger Leitfaden zu WCAG-Standards und Konformität

Weltweit leben etwa 1,3 Milliarden Menschen mit einer Behinderung(opens in a new tab) – das ist jeder sechste Mensch, der das Internet mit Hilfsmitteln, Technologien und Umgehungslösungen nutzt, die von den meisten Websites einfach nicht berücksichtigt werden. Ob Sehbehinderung, Hörverlust, kognitive Unterschiede oder motorische Einschränkungen – diese Behinderungen beeinflussen direkt, wie Menschen Ihre Inhalte erleben.

Wenn Ihre Website nicht barrierefrei ist, schaffen Sie nicht nur eine schlechte Nutzererfahrung, sondern schließen einen großen Teil Ihres Publikums aus. Die Lösung? Erstellen Sie Inhalte, die von Anfang an zugänglich sind, und testen Sie sie gegen die Barrieren, denen Menschen mit Behinderungen täglich begegnen. Das erweitert nicht nur Ihre Zielgruppe, sondern verbessert auch das SEO und verringert das Risiko rechtlicher Probleme – und schafft gleichzeitig ein inklusiveres Erlebnis.

Hier kommen die Web Content Accessibility Guidelines(opens in a new tab) (WCAG) ins Spiel. Entwickelt vom World Wide Web Consortium (W3C) bieten die WCAG globale Standards für die Entwicklung barrierefreier, inklusiver digitaler Erlebnisse.

In diesem Leitfaden führen wir Sie durch WCAG 2.2, die Prinzipien hinter den Erfolgskriterien und wie diese Richtlinien die Erstellung zugänglicher, konformer und benutzerfreundlicher Inhalte unterstützen.

Was ist WCAG?

WCAG sind international anerkannte Standards, die vom W3C entwickelt wurden, um digitale Inhalte für Menschen mit Behinderungen zugänglich zu machen. Die Richtlinien bieten klare, umsetzbare Anleitungen für die Gestaltung von Websites, Apps und digitalen Tools, die für Menschen mit Behinderungen funktionieren.

Die Richtlinien bestehen aus Erfolgskriterien, also Aussagen, die bestanden oder nicht bestanden werden können und Barrieren der Barrierefreiheit adressieren, einschließlich Fehlern, die verhindern, dass Websites mit unterstützenden Technologien gut funktionieren. Dazu gehören Probleme wie:

• Text, der nicht ausreichend Kontrast zum Hintergrund hat (Text mit geringem Kontrast).

• Fehlender oder ungenauer Alternativtext (Alt-Text) für Bilder.

• Fehlende Untertitel oder Transkripte für Videos.

• Fehlende Formularbeschriftungen für Eingabefelder.

• Falsche Verwendung von semantischem HTML.

• "Leere" und redundante Hyperlinks.

Die Einhaltung der WCAG ermöglicht es Ihnen nicht nur, die oben genannten Probleme zu beheben, sondern macht Ihre Inhalte auch für Menschen mit folgenden Einschränkungen nützlicher:

• Sehbehinderungen

• Hörbehinderungen

• Kognitive Unterschiede und Behinderungen

• Aufmerksamkeitsstörungen

• Vorübergehende und situative Einschränkungen (zum Beispiel Menschen, die das Internet ohne Ton nutzen).

WCAG 2.1 vs. 2.2

WCAG wird regelmäßig aktualisiert, um mit den Veränderungen der Technologie und den Bedürfnissen der Nutzer Schritt zu halten. Die neueste Version, WCAG 2.2, umfasst 86 Erfolgskriterien, die helfen, häufige Barrieren bei der Barrierefreiheit im Design und in der Entwicklung zu identifizieren. Diese Kriterien sind die offizielle Empfehlung des W3C. Während frühere Versionen wie WCAG 2.0 und 2.1 weiterhin gültig sind, empfiehlt das W3C Organisationen dringend, WCAG 2.2 zu befolgen, um den heutigen Anforderungen an Barrierefreiheit gerecht zu werden.

Falls Sie sich fragen, was sich in WCAG 2.2 geändert hat: Das Kernkonzept bleibt gleich. Alle Erfolgskriterien aus WCAG 2.1 und 2.0 bleiben erhalten, aber es kommen neun neue Kriterien hinzu, die sich auf die tatsächliche Nutzbarkeit konzentrieren – darunter größere Zielbereiche für Zeiger, zugänglichere Authentifizierungsmethoden und klarere Fokusindikatoren für interaktive Elemente.

Die Einhaltung von WCAG 2.2 hilft Ihnen auch, sich auf zukünftige Versionen der Richtlinien vorzubereiten, einschließlich WCAG 3.0. Die neueste Version soll angeblich ein flexibleres, ergebnisorientiertes Modell sein, das die sich entwickelnde digitale Landschaft widerspiegelt. WCAG 3.0 befindet sich noch in der Entwicklung und ist noch kein offizieller Standard. Daher bleibt WCAG 2.2 vorerst der Maßstab für Barrierefreiheitskonformität und Best Practices.

Eine vollständige Liste aller WCAG 2.2 Erfolgskriterien finden Sie in unserer WCAG-Checkliste.

Ein Barrierefreiheitssymbol, umgeben von Symbolen, die verschiedene Arten von Behinderungen darstellen (visuell, kognitiv, motorisch und auditiv).

Was bedeutet WCAG-Konformität?

Obwohl "WCAG-Konformität" oft im Zusammenhang mit der Barrierefreiheit von Websites verwendet wird, ist "WCAG-Konformitätserfüllung" der genauere Begriff. Denn WCAG ist ein freiwilliger Standard – kein Gesetz.

WCAG-Konformität bedeutet, die Richtlinien freiwillig zu befolgen. Das Setzen eines Konformitätsziels ermöglicht Ihnen den ersten Schritt zu einer barrierefreieren Website oder App und verbessert die Einhaltung verschiedener Antidiskriminierungsgesetze.

Um der WCAG-Konformität näher zu kommen, müssen Sie mehr darüber wissen, wie die WCAG-Richtlinien organisiert sind.

Die vier Schlüsselprinzipien der WCAG

WCAG beschreibt vier Leitprinzipien für digitale Barrierefreiheit: wahrnehmbar, bedienbar, verständlich und robust. Zusammen helfen diese Prinzipien Unternehmen, Inhalte zu erstellen, die für alle zugänglich sind.

Machen Sie es sich zur Gewohnheit, die POUR-Prinzipien bei der Inhaltserstellung zu nutzen. Das ist ein guter Weg, um die WCAG-Standards einzuhalten und hilft Ihnen, Probleme vorherzusehen, die Ihre Nutzer betreffen könnten.

Wahrnehmbar

Wahrnehmbar bedeutet, dass alle Informationen und Benutzeroberflächen (UI) für alle Nutzer präsentierbar und wahrnehmbar sein müssen. Nichts sollte für irgendeinen Sinn "unsichtbar" sein, und Sie sollten sich nicht auf eine bestimmte Sinneswahrnehmung verlassen.

Hier sind einige Möglichkeiten, Inhalte wahrnehmbar zu machen:

• Textalternativen für nicht-textuelle Inhalte bereitstellen: Dazu gehört eine Textbeschreibung für Bilder, Grafiken oder Videos, damit Nutzer, die diese Elemente nicht sehen können, dennoch auf die gleichen Informationen zugreifen können. Das erhöht auch die Kompatibilität mit Screenreadern.

• Untertitel zu Videoinhalten hinzufügen: Fügen Sie Untertitel zu voraufgezeichneten und Live-Videos hinzu. Das hilft Menschen, die gehörlos oder schwerhörig sind, indem eine textliche Darstellung des Audios bereitgestellt wird.

• Voraufgezeichnete Audiodeskriptionen für Videoinhalte hinzufügen: Für nicht-live Videos fügen Sie Audiodeskriptionen hinzu. Diese Beschreibungen erklären visuelle Elemente und helfen blinden oder sehbehinderten Nutzern.

• Für ausreichenden Farbkontrast sorgen: Stellen Sie sicher, dass ausreichend Farbkontrast zwischen Text und Hintergrund besteht, z. B. mit dem kostenlosen Farbkontrast-Checker von AudioEye. Das ist wichtig für die Lesbarkeit, besonders für Nutzer mit Farbsehschwäche (CVD) und anderen Sehbehinderungen. Achten Sie darauf, barrierefreie Farben in all Ihren Designs zu verwenden.

Bedienbar

Bedienbar bedeutet, dass Menschen Ihre Inhalte nutzen können. Sie können Formulare ausfüllen, Produkte bestellen und mit den Technologien navigieren, die sie täglich verwenden. Web- oder Geräteoberflächen und Navigation, wie Steuerelemente und Schaltflächen, sollten auf verschiedene Weise bedienbar sein, damit Menschen mit unterschiedlichen Fähigkeiten sie nutzen können.

Wenn Ihre Website wirklich bedienbar ist, funktioniert sie mit all diesen Technologien und verlangt von den Nutzern nichts, was sie nicht tun können.

Hier sind einige Möglichkeiten, Inhalte bedienbar zu machen:

• Alle Funktionen per Tastatur zugänglich machen: Ihre Nutzer sollten Ihre digitalen Inhalte allein mit der Tastatur bedienen können (ohne Maus). Testen Sie dies, indem Sie grundlegende Tastaturbefehle lernen und Ihre Inhalte navigieren.

• Blinkende Inhalte vermeiden: Vermeiden Sie Inhalte, die mehr als dreimal pro Sekunde blinken, oder halten Sie das Blinken unterhalb der WCAG-Grenzwerte. Das reduziert das Risiko von Anfällen für bestimmte Nutzer und macht Inhalte für Menschen mit Sehbehinderungen und neurokognitiven Störungen bedienbarer.

• Zeitlimits vermeiden: Geben Sie den Nutzern ausreichend Zeit, um Inhalte zu lesen und zu nutzen. Wenn Sie Zeitlimits verwenden müssen, informieren Sie die Nutzer – überraschen Sie sie nicht, indem Sie sie ohne Vorwarnung abmelden oder einen Prozess beenden.

Verständlich

Verständlich bedeutet, den besten Praktiken des User Experience (UX) Designs zu folgen: Menschen aller Fähigkeiten können herausfinden, wie Ihre Website funktioniert, ohne großen Aufwand.

Mit anderen Worten: Inhalte und Benutzeroberfläche sollten leicht verständlich sein. Hier sind einige Möglichkeiten, Inhalte verständlich zu machen:

• Sprach-Tags verwenden: Die Angabe der Sprache (z. B. Deutsch) auf einer Seite ermöglicht Screenreadern die korrekte Aussprache. Visuelle Browser können auch passende Zeichen anzeigen.

• Konsistente Navigation verwenden: Stellen Sie sicher, dass wiederkehrende Navigationselemente auf jeder Seite in der gleichen Reihenfolge erscheinen. Das hilft Menschen, dorthin zu gelangen, wo sie hinwollen – und ist besonders für einige Nutzer mit kognitiven Einschränkungen nützlich, aber für alle hilfreich.

• Anweisungen und Beschriftungen bereitstellen: Schreiben Sie relevante, klare und einfache Anweisungen, wenn Nutzereingaben erforderlich sind. Verwenden Sie passende Beschriftungen, damit Felder für unterstützende Technologien verständlich sind.

Robust

Robust bedeutet, dass Inhalte gut funktionieren und zugänglich bleiben, auch wenn sich Technologien und Benutzeragenten (wie Webbrowser) weiterentwickeln.

Hier sind einige Möglichkeiten, Inhalte robuster zu gestalten:

• Name, Rolle und Wert jedes Elements festlegen: Stellen Sie sicher, dass Name und Rolle jedes UI-Elements programmatisch bestimmt werden können (maschinell lesbar). Andernfalls können einige Technologien (wie Screenreader) die Inhalte nicht präsentieren.

• Barrierefreie Statusmeldungen erstellen: Statusmeldungen müssen programmatisch bestimmbar sein, damit sie dem Nutzer ohne Fokus angezeigt werden können.

Drei Boxen, die jeweils eine WCAG-Konformitätsstufe zeigen

WCAG-Konformitätsstufen

Zusätzlich zu den vier Prinzipien sind die WCAG-Erfolgskriterien in drei Konformitätsstufen: Stufe A, Stufe AA und Stufe AAA organisiert:

• Stufe A ist die am wenigsten strenge Konformitätsstufe. Sie behandelt grundlegende Probleme, die viele Nutzer betreffen. Beispiele für Stufe-A-Kriterien sind Anforderungen an Alt-Text und beschreibende Seitentitel.

• Stufe AA ist umfassender als Stufe A und behandelt zusätzliche Themen wie angemessenen Farbkontrast, die richtige Verwendung von Überschriften und die gleichbleibende Reihenfolge von Navigationselementen auf allen Seiten.

• Stufe AAA ist die strengste WCAG-Stufe und enthält Kriterien, die für manche schwer zu erfüllen sind. Zum Beispiel verlangt Stufe AAA Gebärdensprachdolmetscher für alle voraufgezeichneten Multimedia-Inhalte.

Jede Konformitätsstufe enthält alle Erfolgskriterien der vorherigen Stufe. Das heißt, Stufe AA umfasst alle Stufe-A-Kriterien, während Stufe AAA alle Kriterien von AA und A enthält.

Mindestens sollten Website-Betreiber die Anforderungen der WCAG 2.2 Stufe AA erfüllen. Die meisten Gesetze zur digitalen Barrierefreiheit geben diese Version als wesentlich für die Konformität an, und Websites, die alle WCAG 2.2 Stufe AA Kriterien erfüllen, gelten im Allgemeinen als für die meisten Menschen mit Behinderungen zugänglich.

Wie beeinflusst WCAG die Barrierefreiheitsgesetze?

Wie oben erwähnt, ist WCAG kein Gesetz, sondern ein freiwilliger Standard.

Obwohl WCAG nicht rechtlich bindend ist, dient es als Grundlage für viele Antidiskriminierungsgesetze. Einige davon übernehmen WCAG direkt – das heißt, die Erfolgskriterien aus WCAG erscheinen wortwörtlich im Gesetzestext.

Andere Gesetze, wie der Americans with Disabilities Act(opens in a new tab), enthalten keine spezifischen technischen Standards. Es gibt jedoch zahlreiche Präzedenzfälle, die die WCAG-Stufe AA als angemessenes Barrierefreiheitsniveau festlegen.

Im Folgenden erklären wir, wie sich die WCAG-Konformität auf die Einhaltung von drei wichtigen Gesetzen zur digitalen Barrierefreiheit auswirkt. Weitere Beispiele finden Sie in unserem Internationalen Gesetzesarchiv zur Barrierefreiheit.

Der Americans with Disabilities Act (ADA)

Der ADA ist ein US-amerikanisches Bürgerrechtsgesetz, das Diskriminierung von Menschen mit Behinderungen in Bereichen wie Beschäftigung, staatlichen Dienstleistungen, Transport und öffentlichen Einrichtungen – einschließlich des Internets – verbietet. Das bedeutet, dass Websites, Apps und Online-Dienste für Menschen mit Behinderungen zugänglich sein müssen.

Titel III des ADA gilt speziell für öffentliche Einrichtungen und betrifft:

• Private Unternehmen

• Gemeinnützige Organisationen

• Andere Einrichtungen, die als "öffentliche Einrichtungen" gelten.

Der ADA selbst enthält keine spezifischen Standards für die Konformität. Stattdessen werden die Richtlinien aus WCAG 2.2 Stufe AA durchgesetzt. Einfach gesagt: Um ADA-konform zu sein, muss Ihr digitaler Inhalt die in WCAG festgelegten Standards erfüllen.

Mehr zum ADA erfahren →

Der European Accessibility Act (EAA)

Der EAA ist das zentrale Barrierefreiheitsgesetz der EU und verpflichtet Organisationen, die Produkte und Dienstleistungen in EU-Mitgliedstaaten anbieten, zur Einhaltung definierter Barrierefreiheitsstandards. Er gilt für eine Vielzahl digitaler Produkte und Dienstleistungen, darunter E-Commerce-Plattformen, Bankdienstleistungen, Transport und audiovisuelle Medien, und ist ab dem 28. Juni 2025 vollständig in Kraft. Während der EAA keine technischen Standards direkt vorgibt, ist EN 301 549 der harmonisierte Standard zum Nachweis der Konformität und beinhaltet WCAG 2.1 Stufe AA für Web- und mobile Inhalte.

Mehr zum EAA erfahren →

EN 301 549

EN 301 549 ist der harmonisierte europäische Standard für Barrierefreiheit von IKT, entwickelt von ETSI in Zusammenarbeit mit CEN und CENELEC. Im Gegensatz zu WCAG, das sich speziell auf Web- und mobile Inhalte konzentriert, deckt EN 301 549 das gesamte IKT-Ökosystem ab, einschließlich Hardware, Software, nicht-webbasierter Dokumente und Telekommunikationsdienste. Er übernimmt WCAG 2.1 Stufe AA vollständig für Webinhalte und ist der technische Standard, auf den sich der EAA, die EU-Web Accessibility Directive und die britischen Accessibility Regulations 2018 beziehen. Die Einhaltung von EN 301 549 ist der umfassendste und rechtlich sicherste Weg, um Barrierefreiheitsanforderungen in der EU und im Vereinigten Königreich zu erfüllen.

Mehr zu EN 301 549 erfahren →

Häufige Barrieren, die WCAG adressiert

WCAG adressiert eine Vielzahl von Problemen, die beeinflussen, wie Menschen mit Behinderungen mit Websites, Apps und digitalen Inhalten interagieren. Über die oben genannten Barrieren hinaus (z. B. schlechter Farbkontrast oder fehlender Alt-Text) behandelt WCAG auch weitere Probleme, die die Nutzbarkeit und den Zugang direkt beeinflussen. Dazu gehören:

• Inkonsistente oder unlogische Navigation, wie unklare Überschriften, unvorhersehbare Layouts und eine unstrukturierte Gliederung, erschweren das Folgen von Inhalten.

• Tastatur- und Fokusprobleme die es Tastaturnutzern erschweren, mit Inhalten zu interagieren, z. B. Fokusfallen, fehlende Fokusindikatoren oder nicht zugängliche interaktive Elemente.

• Kleine oder schwer zu treffende Touch-Ziele die für Touch- oder motorisch eingeschränkte Nutzer zu klein oder zu eng beieinander liegen.

• Animationen, Bewegungen und sich automatisch aktualisierende Inhalte die Nutzer überfordern oder desorientieren können.

• Timeouts und zeitlich begrenzte Interaktionen die zu schnell ablaufen, ohne ausreichende Warnung oder Möglichkeit zur Verlängerung.

• Mehrdeutige oder unbeschriftete Symbole, Schaltflächen oder UI-Elemente, die ihren Zweck nicht klar vermitteln oder keine Rückmeldung geben.

• Inhalte, die sich nicht anpassen oder umfließen und beim Zoomen brechen, kein Reflow auf kleinen Bildschirmen unterstützen oder bei responsiven Layouts versagen.

• Unklare oder nicht hilfreiche Fehlermeldungen die nicht erklären, was schiefgelaufen ist oder wie Nutzer Probleme beheben können.

Eine stilisierte Webseite mit einer Lupe über einem Barrierefreiheitssymbol.

Ihr Weg zur WCAG-Konformität beginnt mit AudioEye

Um die Anforderungen von WCAG 2.2 zu erfüllen, müssen Sie Ihre Inhalte regelmäßig testen, Probleme korrekt beheben und sicherstellen, dass jede Aktualisierung die Barrierefreiheit tatsächlich verbessert. Ohne einen Prozess – und Expertenunterstützung – werden Probleme leicht übersehen oder neue Barrieren eingeführt, die echte Nutzer betreffen.

AudioEye macht die WCAG-Konformität einfach und zuverlässig mit unserer Accessibility Platform. Unsere Lösung kombiniert leistungsstarke Automatisierung mit KI-gestützter menschlicher Unterstützung und bietet Ihnen volle Transparenz über Barrierefreiheitsprobleme und die Sicherheit, dass Ihre digitalen Inhalte sowohl konform als auch zugänglich sind.

Mit AudioEye profitieren Sie von:

• Aktives Monitoring das Ihre Website kontinuierlich auf Barrierefreiheitsprobleme überwacht.

• Automatische Korrekturen die häufige Barrierefreiheitsprobleme automatisch beheben.

• Juristische Expertenunterstützung, individuelle Korrekturen, Experten-Schulungen und mehr.

Ob Start-up, wachsendes Unternehmen oder Enterprise-Brand – AudioEye bietet die Tools und das Know-how, um Barrierefreiheit zu gewährleisten, rechtliche Risiken zu reduzieren und Ihre digitalen Inhalte an die neuesten Standards anzupassen.