In dieser Artikel-Serie werden die WCAG 2.2 Erfolgskriterien übersetzt und mit Beispielen erklärt. Beachtet werden nur Stufe A und AA.

Das Original auf Englisch ist zu finden unter: https://www.w3.org/TR/WCAG22 

Teil 1: Wahrnehmbar

Informationen und Benutzeroberflächen-Komponenten müssen für Benutzer:innen in einer Weise darstellbar sein, die sie wahrnehmen können.

Richtlinie 1.1 Textalternativen

Stellen Sie Textalternativen für alle nicht-textlichen Inhalte bereit, damit diese in andere Formen umgewandelt werden können, die die Menschen benötigen, wie z.B. Großdruck, Braille, Sprache, Symbole oder einfachere Sprache.

Erfolgskriterium 1.1.1 Nicht-Text-Inhalt

(Stufe A)

Alle nicht-textlichen Inhalte, die der Benutzer:in präsentiert werden, haben eine Textalternative, die denselben Zweck erfüllt, außer in den unten aufgeführten Situationen.

Steuerelemente, Eingabe

Wenn nicht-textlicher Inhalt ein Steuerelement ist oder Benutzereingaben akzeptiert, dann hat er einen Namen, der seinen Zweck beschreibt. (Siehe Erfolgskriterium 4.1.2 für zusätzliche Anforderungen an Steuerelemente und Inhalte, die Benutzereingaben akzeptieren.)

Beispiel: Eine Schaltfläche mit einem Symbol muss einen Alternativtext wie „Suche“ haben, um ihre Funktion zu beschreiben.

Zeitbasierte Medien

Wenn nicht-textlicher Inhalt zeitbasierte Medien sind, dann liefern Textalternativen zumindest eine beschreibende Identifikation des nicht-textlichen Inhalts. (Siehe Richtlinie 1.2 für zusätzliche Anforderungen an Medien.)

Beispiel: Ein Video sollte mit Untertiteln oder einer Textbeschreibung versehen sein, die den Inhalt des Videos zusammenfasst.

Test 

Wenn nicht-textlicher Inhalt ein Test oder eine Übung ist, die ungültig wäre, wenn sie in Textform präsentiert würde, dann liefern Textalternativen zumindest eine beschreibende Identifikation des nicht-textlichen Inhalts.

Beispiel: Ein interaktives Quiz zur Musiktheorie, bei dem der Benutzer Töne identifizieren muss, sollte eine Textbeschreibung des Quiz und seiner Ziele enthalten.

Sensorisch

Wenn nicht-textlicher Inhalt hauptsächlich dazu gedacht ist, eine bestimmte sensorische Erfahrung zu schaffen, dann liefern Textalternativen zumindest eine beschreibende Identifikation des nicht-textlichen Inhalts.

Beispiel: Eine visuelle Kunstinstallation auf einer Website sollte eine Beschreibung der visuellen Effekte und ihrer beabsichtigten Wirkung enthalten.

CAPTCHA 

Wenn der Zweck von nicht-textlichem Inhalt darin besteht, zu bestätigen, dass der Inhalt von einer Person und nicht von einem Computer abgerufen wird, dann werden Textalternativen bereitgestellt, die den Zweck des nicht-textlichen Inhalts identifizieren und beschreiben, und alternative Formen von CAPTCHA, die Ausgabemodi für verschiedene Arten von Sinneswahrnehmungen verwenden, werden bereitgestellt, um unterschiedlichen Behinderungen gerecht zu werden.

Beispiel: Ein Bild-CAPTCHA sollte von einem Audio-CAPTCHA begleitet werden, das dieselbe Funktion erfüllt.

Dekoration, Formatierung, Unsichtbar

Wenn nicht-textlicher Inhalt reine Dekoration ist, nur zur visuellen Formatierung verwendet wird oder nicht den Benutzern präsentiert wird, dann wird er so implementiert, dass er von assistiven Technologien ignoriert werden kann.

Beispiel: Ein dekoratives Bild, das keinen Informationswert hat, sollte ein leeres Alt-Attribut (alt=””) haben, damit Screenreader es ignorieren.

Richtlinie 1.2 Zeitbasierte Medien

Stellen Sie Alternativen für zeitbasierte Medien bereit.

Erfolgskriterium 1.2.1 Nur-Audio und Nur-Video (Vorab aufgezeichnet)

(Stufe A)

Für vorab aufgezeichnete Nur-Audio- und Nur-Video-Medien gilt Folgendes, außer wenn das Audio oder Video eine Medienalternative für Text ist und als solche eindeutig gekennzeichnet ist:

Nur-Audio (Vorab aufgezeichnet)

Eine Alternative für zeitbasierte Medien wird bereitgestellt, die gleichwertige Informationen für vorab aufgezeichnete Nur-Audio-Inhalte bietet.

Beispiel: Ein transkribiertes Skript für einen vorab aufgezeichneten Podcast.

Nur-Video (Vorab aufgezeichnet)

Entweder wird eine Alternative für zeitbasierte Medien oder eine Tonspur bereitgestellt, die gleichwertige Informationen für vorab aufgezeichnete Nur-Video-Inhalte bietet.

Beispiel: Ein schriftliches Skript oder eine Audiobeschreibung eines vorab aufgezeichneten stummen Videos.

Erfolgskriterium 1.2.2 Untertitel (Vorab aufgezeichnet)

(Stufe A) 

Untertitel werden für alle vorab aufgezeichneten Audioinhalte in synchronisierten Medien bereitgestellt, außer wenn das Medium eine Medienalternative für Text ist und als solche eindeutig gekennzeichnet ist.

Beispiel: Untertitel für ein vorab aufgezeichnetes Video-Webinar.

Erfolgskriterium 1.2.3 Audiobeschreibung oder Medienalternative (Vorab aufgezeichnet)

(Stufe A)

Eine Alternative für zeitbasierte Medien oder eine Audiobeschreibung des vorab aufgezeichneten Videoinhalts wird für synchronisierte Medien bereitgestellt, außer wenn das Medium eine Medienalternative für Text ist und als solche eindeutig gekennzeichnet ist.

Beispiel: Eine Audiobeschreibung, die wichtige visuelle Informationen in einem vorab aufgezeichneten Video beschreibt.

Erfolgskriterium 1.2.4 Untertitel (Live)

(Stufe AA)

Untertitel werden für alle Live-Audioinhalte in synchronisierten Medien bereitgestellt.

Beispiel: Live-Untertitelung eines gestreamten Sportereignisses.

Erfolgskriterium 1.2.5 Audiobeschreibung (Vorab aufgezeichnet)

(Stufe AA) 

Für alle vorab aufgezeichneten Videoinhalte in synchronisierten Medien wird eine Audiobeschreibung bereitgestellt.

Beispiel: Ein Film mit Audiobeschreibung für Sehbehinderte.

Richtlinie 1.3 Anpassungsfähig

Erstellen Sie Inhalte, die auf verschiedene Weisen präsentiert werden können (z. B. einfacheres Layout), ohne Informationen oder Struktur zu verlieren.

Erfolgskriterium 1.3.1 Informationen und Beziehungen

(Stufe A) 

Informationen, Struktur und Beziehungen, die durch die Präsentation vermittelt werden, können programmgesteuert bestimmt oder in Textform verfügbar gemacht werden.

Beispiel: Eine Tabelle, die mit HTML-Markup korrekt strukturiert ist, sodass Screenreader die Beziehungen zwischen Zellen erkennen können.

Erfolgskriterium 1.3.2 Sinnvolle Reihenfolge

(Stufe A) 

Wenn die Reihenfolge, in der Inhalte präsentiert werden, deren Bedeutung beeinflusst, kann eine korrekte Lesereihenfolge programmgesteuert bestimmt werden.

Beispiel: Eine nummerierte Liste von Schritten in einem Rezept, die sicherstellt, dass die Reihenfolge der Schritte erhalten bleibt.

Erfolgskriterium 1.3.3 Sensorische Eigenschaften

(Stufe A)

Anweisungen zum Verstehen und Bedienen von Inhalten stützen sich nicht ausschließlich auf sensorische Eigenschaften von Komponenten wie Form, Farbe, Größe, visuelle Position, Ausrichtung oder Ton.

Beispiel: Anstatt nur „Klicken Sie auf den roten Knopf“ zu sagen, sollte die Anweisung lauten: „Klicken Sie auf den roten Knopf mit dem Text ‘Abschicken’.“

HINWEIS

Für Anforderungen im Zusammenhang mit Farbe siehe Richtlinie 1.4.

Erfolgskriterium 1.3.4 Orientierung

(Stufe AA) 

Inhalte beschränken ihre Ansicht und Bedienung nicht auf eine einzige Display-Ausrichtung, wie Hochformat oder Querformat, es sei denn, eine spezifische Display-Ausrichtung ist wesentlich.

HINWEIS

Beispiele, in denen eine bestimmte Display-Ausrichtung wesentlich sein kann, sind ein Bankscheck, eine Klavieranwendung, Folien für einen Projektor oder Fernseher oder virtuelle Inhalte, bei denen Inhalte nicht unbedingt auf Querformat oder Hochformat beschränkt sind.

Beispiel: Eine Fotoanwendung sollte sowohl im Hoch- als auch im Querformat funktionieren, es sei denn, eine spezifische Orientierung ist notwendig, wie bei einem virtuellen Klavier, das im Querformat verwendet werden muss.

Erfolgskriterium 1.3.5 Eingabezweck identifizieren

(Stufe AA) 

Der Zweck jedes Eingabefeldes, das Informationen über die Benutzer:in sammelt, kann programmgesteuert bestimmt werden, wenn:

Das Eingabefeld dient einem in der Abschnitt „Eingabezwecke für Benutzeroberflächenkomponenten“ identifizierten Zweck; und

Der Inhalt wird mit Technologien implementiert, die die Identifizierung der erwarteten Bedeutung für Formulareingabedaten unterstützen.

Beispiel: Ein Eingabefeld für die E-Mail-Adresse eines Benutzers sollte mit dem Attribut autocomplete=”email” markiert sein, sodass Assistenztechnologien den Zweck des Feldes erkennen können.

Richtlinie 1.4 Unterscheidbar

Machen Sie es den Benutzer:innen leichter, Inhalte zu sehen und zu hören, indem Sie den Vordergrund vom Hintergrund trennen.

Erfolgskriterium 1.4.1 Verwendung von Farbe

(Stufe A)

Farbe wird nicht als einziges visuelles Mittel verwendet, um Informationen zu vermitteln, eine Aktion anzuzeigen, eine Reaktion auszulösen oder ein visuelles Element zu unterscheiden.

HINWEIS

Dieses Erfolgskriterium bezieht sich speziell auf die Farbwahrnehmung. Andere Formen der Wahrnehmung werden in Richtlinie 1.3 behandelt, einschließlich programmgesteuertem Zugang zu Farbe und anderer visueller Präsentationskodierung.

Beispiel: Ein Formularfeld mit einer Fehlermeldung sollte nicht nur durch eine rote Umrandung, sondern auch durch eine Textmeldung wie „Fehler: Ungültige Eingabe“ gekennzeichnet sein.

Erfolgskriterium 1.4.2 Audiosteuerung

(Stufe A)

Wenn auf einer Webseite irgendein Audio automatisch länger als 3 Sekunden abgespielt wird, muss entweder eine Möglichkeit vorhanden sein, das Audio zu pausieren oder zu stoppen, oder eine Möglichkeit, die Lautstärke unabhängig von der Gesamtlautstärke des Systems zu steuern.

HINWEIS

Da jeder Inhalt, der dieses Erfolgskriterium nicht erfüllt, die Fähigkeit eines Benutzers beeinträchtigen kann, die gesamte Seite zu nutzen, muss der gesamte Inhalt auf der Webseite (unabhängig davon, ob er zur Erfüllung anderer Erfolgskriterien verwendet wird oder nicht) dieses Erfolgskriterium erfüllen. Siehe Konformitätsanforderung 5: Nicht-Interferenz.

Beispiel: Eine Webseite mit einem Hintergrundvideo, das automatisch abgespielt wird, sollte eine Schaltfläche „Stummschalten“ oder „Pause“ bieten.

Erfolgskriterium 1.4.3 Kontrast (Minimum)

(Stufe AA) 

Die visuelle Darstellung von Text und Bildern von Text hat ein Kontrastverhältnis von mindestens 4,5:1, außer in den folgenden Fällen:

Großer Text

Großflächiger Text und Bilder von großflächigem Text haben ein Kontrastverhältnis von mindestens 3:1;

Unwesentlich

Text oder Bilder von Text, die Teil einer inaktiven Benutzeroberflächenkomponente sind, reine Dekoration, für niemanden sichtbar oder Teil eines Bildes sind, das bedeutende andere visuelle Inhalte enthält, haben keine Kontrastanforderung.

Logotypen

Text, der Teil eines Logos oder Markennamens ist, hat keine Kontrastanforderung.

Beispiel: Ein Fließtext auf einer Webseite sollte ein ausreichendes Kontrastverhältnis zum Hintergrund haben, um lesbar zu sein.

Erfolgskriterium 1.4.4 Text vergrößern

(Stufe AA)

Mit Ausnahme von Untertiteln und Bildern von Text kann Text ohne unterstützende Technologie bis zu 200 Prozent vergrößert werden, ohne dass Inhalte oder Funktionen verloren gehen.

Beispiel: Ein Benutzer sollte in der Lage sein, den Text auf einer Webseite auf das Doppelte seiner ursprünglichen Größe zu vergrößern, ohne dass der Text abgeschnitten wird oder Bedienelemente unzugänglich werden.

Erfolgskriterium 1.4.5 Bilder von Text

(Stufe AA) 

Wenn die verwendeten Technologien die visuelle Darstellung ermöglichen, wird Text verwendet, um Informationen zu vermitteln, anstatt Bilder von Text, außer in den folgenden Fällen:

Anpassbar

Das Bild von Text kann visuell an die Anforderungen der Benutzer:in angepasst werden;

Wesentlich

Eine bestimmte Darstellung von Text ist wesentlich für die zu übermittelnden Informationen.

HINWEIS

Logotypen (Text, der Teil eines Logos oder Markennamens ist) werden als wesentlich betrachtet.

Beispiel: Anstelle eines Bildes mit Text sollte echter Text verwendet werden, damit er skalierbar und anpassbar ist.

Erfolgskriterium 1.4.10 Umfluss

(Stufe AA)

Inhalte können dargestellt werden, ohne dass Informationen oder Funktionen verloren gehen und ohne dass in zwei Dimensionen gescrollt werden muss für:

• Vertikal scrollende Inhalte bei einer Breite von 320 CSS-Pixeln;
• Horizontal scrollende Inhalte bei einer Höhe von 256 CSS-Pixeln.

Ausnahme: Teile des Inhalts, die für die Nutzung oder Bedeutung eine zweidimensionale Anordnung erfordern.

HINWEIS 1

320 CSS-Pixel entsprechen einer Anfangsansichtsfensterbreite von 1280 CSS-Pixeln bei 400% Zoom. Für Webinhalte, die horizontal scrollen (z. B. mit vertikalem Text), entsprechen 256 CSS-Pixel einer Anfangsansichtshöhe von 1024 CSS-Pixeln bei 400% Zoom.

HINWEIS 2

Beispiele für Inhalte, die eine zweidimensionale Anordnung erfordern, sind Bilder, die zum Verständnis notwendig sind (wie Karten und Diagramme), Videos, Spiele, Präsentationen, Datentabellen (nicht einzelne Zellen) und Schnittstellen, bei denen es notwendig ist, Werkzeugleisten im Blick zu behalten, während Inhalte manipuliert werden. Es ist akzeptabel, zweidimensionales Scrollen für solche Teile des Inhalts bereitzustellen.

Erfolgskriterium 1.4.11 Nicht-Text-Kontrast

(Stufe AA)

Die visuelle Darstellung der folgenden Elemente hat ein Kontrastverhältnis von mindestens 3:1 gegenüber angrenzenden Farben:

Benutzeroberfläche Komponenten

Visuelle Informationen, die erforderlich sind, um Benutzeroberflächenkomponenten und Zustände zu identifizieren, außer für inaktive Komponenten oder wenn das Aussehen der Komponente vom Benutzeragenten bestimmt und nicht vom Autor geändert wird;

Grafische Objekte

Teile von Grafiken, die zum Verständnis des Inhalts erforderlich sind, außer wenn eine bestimmte Darstellung der Grafiken für die übermittelten Informationen wesentlich ist.

Erfolgskriterium 1.4.12 Textabstand

(Stufe AA)

In Inhalten, die mit Auszeichnungssprachen implementiert sind, die die folgenden Textstil-Eigenschaften unterstützen, gehen keine Inhalte oder Funktionen verloren, wenn alle folgenden Eigenschaften gesetzt werden und keine anderen Stileigenschaften geändert werden:

• Zeilenhöhe (Zeilenabstand) auf mindestens 1,5-fache der Schriftgröße;
• Abstand nach Absätzen auf mindestens 2-fache der Schriftgröße;
• Buchstabenabstand (Tracking) auf mindestens 0,12-fache der Schriftgröße;
• Wortabstand auf mindestens 0,16-fache der Schriftgröße.

Ausnahme: Menschliche Sprachen und Schriften, die eine oder mehrere dieser Textstileigenschaften in geschriebenem Text nicht verwenden, können nur mit den Eigenschaften konform gehen, die für diese Kombination aus Sprache und Schrift existieren.

HINWEIS 1

Inhalte müssen diese Textabstandswerte nicht verwenden. Die Anforderung besteht darin, sicherzustellen, dass, wenn eine Benutzer:in den von der Autor:in festgelegten Textabstand überschreibt, keine Inhalte oder Funktionen verloren gehen.

HINWEIS 2

Schriftsysteme für einige Sprachen verwenden unterschiedliche Textabstandseinstellungen, wie z. B. Absatzeinzüge. Autor:innen werden ermutigt, den lokal verfügbaren Leitlinien zur Verbesserung der Lesbarkeit und Lesefreundlichkeit von Text in ihrem Schriftsystem zu folgen.

Erfolgskriterium 1.4.13 Inhalt bei Hover oder Fokus

(Stufe AA)

Wenn das Empfangen und dann Entfernen von Zeiger-Hover oder Tastaturfokus dazu führt, dass zusätzlicher Inhalt sichtbar und dann verborgen wird, gilt Folgendes:

Abweisbar

Eine Möglichkeit ist verfügbar, um den zusätzlichen Inhalt zu schließen, ohne den Zeiger-Hover oder Tastaturfokus zu bewegen, es sei denn, der zusätzliche Inhalt kommuniziert einen Eingabefehler oder verdeckt oder ersetzt keinen anderen Inhalt;

Hoverbar

Wenn der Zeiger-Hover den zusätzlichen Inhalt auslösen kann, kann der Zeiger über den zusätzlichen Inhalt bewegt werden, ohne dass dieser verschwindet;

Beständig

Der zusätzliche Inhalt bleibt sichtbar, bis der Hover- oder Fokusauslöser entfernt wird, der Benutzer ihn schließt oder seine Informationen nicht mehr gültig sind.

Ausnahme: Die visuelle Darstellung des zusätzlichen Inhalts wird vom Benutzeragenten gesteuert und nicht von der Autor:in geändert.

HINWEIS 1

Beispiele für zusätzlichen Inhalt, der vom Benutzeragenten gesteuert wird, sind Browser-Tooltips, die durch die Verwendung des HTML-Titelattributs erstellt wurden.

HINWEIS 2

Benutzerdefinierte Tooltips, Untermenüs und andere nicht modale Pop-ups, die bei Hover und Fokus angezeigt werden, sind Beispiele für zusätzlichen Inhalt, der unter dieses Kriterium fällt.

HINWEIS 3

Dieses Kriterium gilt für Inhalte, die zusätzlich zur auslösenden Komponente selbst erscheinen. Da versteckte Komponenten, die bei Tastaturfokus sichtbar gemacht werden (wie Links, die verwendet werden, um zu einem anderen Teil einer Seite zu springen), keinen zusätzlichen Inhalt darstellen, fallen sie nicht unter dieses Kriterium.