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 2: Bedienbar

Benutzeroberflächenkomponenten und Navigation müssen bedienbar sein.

Richtlinie 2.1 Tastaturbedienbarkeit

Stellen Sie sicher, dass alle Funktionen über eine Tastatur verfügbar sind.

Erfolgskriterium 2.1.1 Tastatur

(Stufe A)

Alle Funktionen des Inhalts sind über eine Tastaturschnittstelle bedienbar, ohne dass spezifische Timings für einzelne Tastenanschläge erforderlich sind, außer wenn die zugrundeliegende Funktion eine Eingabe erfordert, die von der Bewegung der Benutzer:in abhängt und nicht nur von den Endpunkten.

Beispiel: Eine Zeichenanwendung, bei der die Benutzer:innen zeichnen, indem sie den Stift auf dem Bildschirm bewegen, kann nicht vollständig über die Tastatur bedient werden, da die Eingabe von der Bewegung der Benutzer:in abhängt.

HINWEIS 1: Diese Ausnahme bezieht sich auf die zugrunde liegende Funktion, nicht auf die Eingabetechnik. Zum Beispiel, wenn Handschrift verwendet wird, um Text einzugeben, erfordert die Eingabetechnik (Handschrift) eine bewegungsabhängige Eingabe, aber die zugrunde liegende Funktion (Texteingabe) nicht.

HINWEIS 2: Dies verbietet nicht und sollte nicht davon abhalten, zusätzlich zur Tastatur auch Maus- oder andere Eingabemethoden bereitzustellen.

Erfolgskriterium 2.1.2 Keine Tastaturfalle

(Stufe A)

Wenn der Tastaturfokus auf eine Komponente der Seite mit einer Tastaturschnittstelle verschoben werden kann, kann der Fokus auch nur mit einer Tastaturschnittstelle von dieser Komponente wegbewegt werden. Wenn dies mehr als unmodifizierte Pfeil- oder Tabulatortasten oder andere Standardmethoden zum Verlassen erfordert, wird der Benutzer über die Methode zum Verschieben des Fokus informiert.

Beispiel: Ein Webformular mit einem modalen Dialogfeld, das auf der Eingabe bestimmter Felder basiert, sollte sicherstellen, dass der Benutzer den Fokus vom Dialogfeld wegbewegen kann, ohne die Maus zu verwenden.

HINWEIS: Da jeder Inhalt, der dieses Erfolgskriterium nicht erfüllt, die Fähigkeit der Benutzer:in beeinträchtigen kann, die gesamte Seite zu verwenden, muss jeder Inhalt auf der Webseite (unabhängig davon, ob er verwendet wird, um andere Erfolgskriterien zu erfüllen oder nicht) dieses Erfolgskriterium erfüllen. Siehe Konformitätsanforderung 5: Nicht-Interferenz.

Erfolgskriterium 2.1.4 Zeichen-Tastenkombinationen

(Stufe A)

Wenn eine Tastenkombination im Inhalt implementiert ist, die nur Buchstaben (einschließlich Groß- und Kleinbuchstaben), Satzzeichen, Zahlen oder Symbolzeichen verwendet, dann ist mindestens eine der folgenden Bedingungen erfüllt:

Deaktivieren

Eine Möglichkeit ist verfügbar, die Tastenkombination zu deaktivieren;

Neubelegen

Eine Möglichkeit ist verfügbar, die Tastenkombination so zu belegen, dass sie eine oder mehrere nicht druckbare Tasten (z. B. Strg, Alt) einschließt;

Nur bei Fokus aktiv

Die Tastenkombination für eine Benutzeroberflächenkomponente ist nur aktiv, wenn diese Komponente den Fokus hat.

Beispiel: Ein Online-Texteditor könnte Tastenkombinationen wie Strg+B für Fettschrift verwenden. Benutzer:innen sollten in der Lage sein, diese Kombinationen anzupassen oder zu deaktivieren, um Konflikte mit anderen Programmen oder persönlichen Vorlieben zu vermeiden.

Richtlinie 2.2 Ausreichend Zeit

Stellen Sie sicher, dass Benutzer:innen genügend Zeit haben, um Inhalte zu lesen und zu verwenden.

Erfolgskriterium 2.2.1 Zeitbegrenzungen einstellbar

(Stufe A)

Für jede Zeitbegrenzung, die durch den Inhalt festgelegt ist, gilt mindestens eine der folgenden Bedingungen:

Deaktivieren

Die Benutzer:in kann die Zeitbegrenzung deaktivieren, bevor sie ihr begegnet; oder

Anpassen

Die Benutzer:in kann die Zeitbegrenzung anpassen, bevor sie ihr begegnet, über einen weiten Bereich, der mindestens das Zehnfache der Standardlänge beträgt; oder

Verlängern

Die Benutzer:in wird vor Ablauf der Zeit gewarnt und erhält mindestens 20 Sekunden, um die Zeitbegrenzung mit einer einfachen Aktion (z. B. “Leertaste drücken”) zu verlängern, und die Benutzer:in kann die Zeitbegrenzung mindestens zehnmal verlängern; oder

Echtzeitausnahme

Die Zeitbegrenzung ist ein erforderlicher Teil eines Echtzeitereignisses (z. B. einer Auktion), und es ist keine Alternative zur Zeitbegrenzung möglich; oder

Wesentliche Ausnahme

Die Zeitbegrenzung ist wesentlich und deren Verlängerung würde die Aktivität ungültig machen; oder

20-Stunden-Ausnahme

Die Zeitbegrenzung beträgt länger als 20 Stunden.

Beispiel: Eine Online-Banking-Sitzung, die nach 5 Minuten Inaktivität abläuft, sollte den Benutzer:innen die Möglichkeit geben, eine Warnung zu erhalten und die Sitzung bei Bedarf zu verlängern.

HINWEIS: Dieses Erfolgskriterium hilft sicherzustellen, dass Benutzer:innen Aufgaben ohne unerwartete Änderungen des Inhalts oder Kontexts aufgrund einer Zeitbegrenzung abschließen können. Dieses Erfolgskriterium sollte zusammen mit Erfolgskriterium 3.2.1 betrachtet werden, das Grenzen für Änderungen von Inhalt oder Kontext aufgrund von Benutzeraktionen festlegt.

Erfolgskriterium 2.2.2 Anhalten, Beenden, Ausblenden

(Stufe A)

Für bewegte, blinkende, scrollende oder sich automatisch aktualisierende Informationen gelten alle folgenden Bedingungen:

Bewegung, Blinken, Scrollen

Für alle bewegten, blinkenden oder scrollenden Informationen, die (1) automatisch starten, (2) länger als fünf Sekunden dauern und (3) parallel zu anderen Inhalten präsentiert werden, gibt es eine Möglichkeit für die Benutzer:in, sie anzuhalten, zu beenden oder auszublenden, es sei denn, die Bewegung, das Blinken oder das Scrollen ist Teil einer Aktivität, bei der sie wesentlich ist; und

Automatische Aktualisierung

Für alle sich automatisch aktualisierenden Informationen, die (1) automatisch starten und (2) parallel zu anderen Inhalten präsentiert werden, gibt es eine Möglichkeit für die Benutzer:in, sie anzuhalten, zu beenden oder auszublenden oder die Häufigkeit der Aktualisierung zu kontrollieren, es sei denn, die automatische Aktualisierung ist Teil einer Aktivität, bei der sie wesentlich ist.

Beispiel: Ein Nachrichten-Ticker auf einer Webseite sollte eine Schaltfläche “Anhalten” enthalten, damit Benutzer:innen den Ticker stoppen können, wenn er sie ablenkt.

HINWEIS 1: Für Anforderungen in Bezug auf flackernde oder blinkende Inhalte siehe Richtlinie 2.3.

HINWEIS 2: Da jeder Inhalt, der dieses Erfolgskriterium nicht erfüllt, die Fähigkeit der Benutzer:in beeinträchtigen kann, die gesamte Seite zu verwenden, muss jeder Inhalt auf der Webseite (unabhängig davon, ob er verwendet wird, um andere Erfolgskriterien zu erfüllen oder nicht) dieses Erfolgskriterium erfüllen. Siehe Konformitätsanforderung 5: Nicht-Interferenz.

HINWEIS 3: Inhalte, die periodisch durch Software aktualisiert werden oder die an den Benutzeragenten gestreamt werden, sind nicht verpflichtet, Informationen zu erhalten oder darzustellen, die zwischen dem Start der Pause und der Wiederaufnahme der Präsentation generiert oder empfangen wurden, da dies technisch möglicherweise nicht möglich ist und in vielen Situationen irreführend sein könnte.

HINWEIS 4: Eine Animation, die Teil einer Ladephase oder einer ähnlichen Situation ist, kann als wesentlich betrachtet werden, wenn während dieser Phase keine Interaktion stattfinden kann und das Fehlen eines Fortschrittsanzeigers Benutzer verwirren oder sie glauben lassen könnte, dass der Inhalt eingefroren oder defekt ist.

Richtlinie 2.3 Anfälle und physische Reaktionen

Gestalten Sie Inhalte so, dass bekannte Ursachen für Anfälle und körperliche Reaktionen vermieden werden.

Erfolgskriterium 2.3.1 Dreifaches Blitzen oder unter Schwellenwert

(Stufe A)

Webseiteninhalte blitzen nicht häufiger als dreimal in einem beliebigen 1-Sekunden-Zeitraum oder liegen unterhalb der allgemeinen Schwellenwerte für Blitzen und Rotblitzen.

Richtlinie 2.4 Navigierbar

Stellen Sie sicher, dass Benutzer:innen navigieren können, Inhalte finden und wissen, wo sie sich befinden.

Erfolgskriterium 2.4.1 Navigationsmöglichkeiten

(Stufe A)

Es gibt mehr als einen Weg, eine Webseite innerhalb einer Gruppe von Webseiten zu finden, außer wenn die Webseite das Ergebnis eines Schritts oder eines Prozesses ist.

Beispiel: Eine Unternehmenswebsite könnte sowohl eine Suchfunktion als auch ein hierarchisches Navigationsmenü anbieten, um Benutzer:innen mehrere Möglichkeiten zur Navigation zu bieten.

Erfolgskriterium 2.4.2 Titelseiten

(Stufe A)

Webseiten haben Titel, die ihren Zweck oder ihr Thema beschreiben.

Beispiel: Die Titelseite eines Online-Shops könnte “Produkte – Online-Shop” lauten, um den Benutzer:innen klar zu machen, dass sie auf der Seite mit den Produkten des Shops sind.

Erfolgskriterium 2.4.3 Fokusreihenfolge

(Stufe A)

Wenn eine Webseite so gestaltet ist, dass sie mit einer Tastaturschnittstelle navigierbar ist, erhalten Benutzeroberflächenkomponenten den Fokus in einer Reihenfolge, die die Bedeutung und die Funktionalität bewahrt.

Beispiel: In einem Formular sollte die Fokusreihenfolge der natürlichen Lesereihenfolge folgen, sodass Benutzer:innen von einem Feld zum nächsten wechseln können, ohne verwirrt zu werden.

Erfolgskriterium 2.4.4 Linkzweck (im Kontext)

(Stufe A)

Der Zweck jedes Links kann aus dem Linktext allein oder aus dem Linktext zusammen mit seinem Programmkontext bestimmt werden, außer wenn der Zweck mehrdeutig für Benutzer:innen im Allgemeinen ist.

Beispiel: Ein Link mit dem Text “Hier klicken” sollte vermieden werden. Stattdessen sollte der Linktext den Zweck des Links klar angeben, z. B. “Weitere Informationen über unsere Dienstleistungen”.

Erfolgskriterium 2.4.5 Mehrere Wege

(Stufe AA)

Es gibt mehr als einen Weg, eine Webseite innerhalb einer Gruppe von Webseiten zu finden, außer wenn die Webseite das Ergebnis eines Schritts oder eines Prozesses ist.

Beispiel: Eine Unternehmenswebsite könnte sowohl eine Suchfunktion als auch ein hierarchisches Navigationsmenü anbieten, um Benutzer:innen mehrere Möglichkeiten zur Navigation zu bieten.

Erfolgskriterium 2.4.6 Überschriften und Beschriftungen

(Stufe AA)

Überschriften und Beschriftungen beschreiben das Thema oder den Zweck.

Beispiel: Eine Kontaktformularseite sollte eine Überschrift wie “Kontaktformular” haben, und die Beschriftungen der Felder sollten eindeutig sein, z. B. “Name”, “E-Mail-Adresse” und “Nachricht”.

Erfolgskriterium 2.4.7 Fokus sichtbar

(Stufe AA)

Jede Benutzerschnittstellenkomponente hat einen sichtbaren Fokusindikator, wenn sie den Fokus erhält.

Beispiel: Ein Formularfeld sollte eine klare visuelle Markierung aufweisen, z. B. einen farbigen Rand oder eine Hintergrundfarbe, wenn es den Fokus hat, damit Benutzer leicht erkennen können, welches Feld aktiv ist.

Erfolgskriterium 2.4.11 Fokus nicht verdeckt (Minimum)

(Stufe AA)

Wenn eine Benutzeroberflächenkomponente den Tastaturfokus erhält, ist die Komponente aufgrund vom Autor erstellten Inhalts nicht vollständig ausgeblendet.

Hinweis 1: Wenn Inhalte in einer konfigurierbaren Benutzeroberfläche vom Benutzer neu positioniert werden können, werden für die Prüfung und Konformität dieses Erfolgskriteriums nur die Anfangspositionen der vom Benutzer verschiebbaren Inhalte berücksichtigt.

Hinweis 2: Vom Benutzer geöffnete Inhalte können die Komponente verdecken, die den Fokus erhält. Wenn der Benutzer die fokussierte Komponente anzeigen kann, ohne den Tastaturfokus zu verschieben, gilt die Komponente mit Fokus nicht als aufgrund vom Autor erstellten Inhalts ausgeblendet.

Richtlinie 2.5 Eingabearten

Stellen Sie sicher, dass Benutzer:innen verschiedene Eingabearten verwenden können, über die traditionelle Tastatur- und Mausnutzung hinaus.

Erfolgskriterium 2.5.1 Zeigergesten

(Stufe A)

Für Funktionen, die durch Multipunkt- oder Pfad-basierte Gesten (z. B. Pinch-Zoom, Wischgesten) bedient werden können, gibt es eine alternative Möglichkeit für eine Einpunktaktivierung, außer wenn eine Multipunkt- oder Pfad-basierte Geste wesentlich ist.

Beispiel: Eine Galerie-App, die eine Wischgeste zum Wechseln von Bildern verwendet, sollte auch Schaltflächen anbieten, mit denen Benutzer:innen zum nächsten oder vorherigen Bild wechseln können.

Erfolgskriterium 2.5.2 Zeigerabbruch

(Stufe A)

Für Funktionen, die durch eine Up-Ereignis-Aktivierung ausgelöst werden, gibt es mindestens eine der folgenden Bedingungen:

Umkehrbar

Die Aktivierung ist umkehrbar;

Datenüberprüfung

Die abgeschlossene Aktion wird von der Benutzer:in überprüft;

Keine Aktivierung

Das Up-Ereignis löst keine Aktivierung aus.

Beispiel: Ein Schaltflächenklick sollte erst beim Loslassen der Schaltfläche (Up-Ereignis) ausgeführt werden, und nicht beim Drücken (Down-Ereignis), um versehentliche Aktionen zu vermeiden.

Erfolgskriterium 2.5.3 Beschriftung im Namen

(Stufe A) 

Bei Benutzeroberflächenkomponenten mit Beschriftungen, die Text oder Textbilder enthalten, enthält der Name den Text, der visuell dargestellt wird.

Erfolgskriterium 2.5.4 Bewegung aktiviert

(Stufe A)

Funktionen, die durch Bewegungen des Geräts oder durch Benutzergesten aktiviert werden, können auch durch Benutzeroberflächenkomponenten bedient werden, und die Reaktion auf diese Bewegungen kann deaktiviert werden, um versehentliche Aktivierungen zu vermeiden.

Beispiel: Eine App, die durch Schütteln des Geräts eine Aktion ausführt, sollte auch eine Schaltfläche anbieten, um dieselbe Aktion auszuführen, und die Schüttelgeste sollte deaktivierbar sein.

Erfolgskriterium 2.5.7 Ziehbewegungen

(Stufe AA)

Alle Funktionen, die eine Ziehbewegung zur Bedienung verwenden, können mit einem einzelnen Zeiger ohne Ziehen erreicht werden, es sei denn, das Ziehen ist unbedingt erforderlich oder die Funktion wird vom Benutzeragenten bestimmt und nicht von der Autor:in geändert.

Hinweis: Diese Anforderung gilt für Webinhalte, die Zeigeraktionen interpretieren (d. h. dies gilt nicht für Aktionen, die zum Bedienen des Benutzeragenten oder der unterstützenden Technologie erforderlich sind).

Erfolgskriterium 2.5.8 Zielgröße (Minimum)

(Stufe AA)

Die Größe des Ziels für Zeigereingaben beträgt mindestens 24 x 24 CSS-Pixel, außer in folgenden Fällen:

Abstand: 

Untergroße Ziele (solche mit weniger als 24 x 24 CSS-Pixeln) werden so positioniert, dass, wenn ein Kreis mit 24 CSS-Pixeln Durchmesser auf dem Begrenzungsrahmen jedes Ziels zentriert ist, die Kreise kein anderes Ziel oder den Kreis für ein anderes untergroßes Ziel schneiden;

Äquivalent: 

Die Funktion kann durch ein anderes Steuerelement auf derselben Seite erreicht werden, das dieses Kriterium erfüllt;

Inline: 

Das Ziel befindet sich in einem Satz oder seine Größe wird anderweitig durch die Zeilenhöhe von Nicht-Zieltext eingeschränkt;

Benutzeragentensteuerung: 

Die Größe des Ziels wird vom Benutzeragenten bestimmt und nicht von der Autor:in geändert;

Unverzichtbar: 

Eine bestimmte Darstellung des Ziels ist für die übermittelten Informationen unverzichtbar oder gesetzlich vorgeschrieben.

Hinweis 1: Ziele, die eine räumliche Auswahl von Werten basierend auf der Position innerhalb des Ziels ermöglichen, werden im Sinne des Erfolgskriteriums als ein Ziel betrachtet. Beispiele hierfür sind Schieberegler, Farbwähler, die einen Farbverlauf anzeigen, oder bearbeitbare Bereiche, in denen Sie den Cursor positionieren.

Hinweis 2: Bei Inline-Zielen sollte die Zeilenhöhe als senkrecht zum Textfluss interpretiert werden. In einer vertikal angezeigten Sprache wäre die Zeilenhöhe beispielsweise horizontal.