Der Sommer nähert sich dem Ende - das bedeutet, dass die neue Version der W3C Web Content Accessibility Guidelines, WCAG 2.1, vor knapp zwei Monaten veröffentlicht wurde. In diesem Zusammenhang fragen Sie sich bestimmt:

  • Was ist WCAG 2.1?
  • Wie unterscheidet sich WCAG 2.1 von WCAG 2.0?
  • Was ist der Grund für WCAG 2.1?

Die WCAG 2.1 ersetzt die WCAG 2.0 nicht, sondern erweitert sie um 17 neue Erfolgskriterien. Einer der größten, wenn nicht sogar bemerkenswertesten Unterscheidungsmerkmale ist, dass viele der WCAG 2.0-Kriterien mit automatisierter Software überprüft werden konnten, die neuen WCAG 2.1-Kriterien jedoch manuelle Tests erfordern. Dieses zusätzliche Kriterium soll Menschen mit Sehbehinderung, Lernschwierigkeiten und kognitiven Behinderungen weiterhelfen. Um den Bedürfnissen verschiedener Gruppen und unterschiedlicher Situationen gerecht zu werden sind laut WCAG drei Konformitätsstufen definiert: A (niedrigste), AA und AAA (höchste). Weitere Informationen zu WCAG findet man unter Understanding Levels of Conformance.

Im Folgenden untersuchen wir die neuen A- und AA-Kriterien und was diese für Ihre digitale Präsenz bedeuten.

Web Barrierefreiheit - Bleiben Sie up to date: Bleiben Sie bezüglich der digitalen Barrierefreiheit immer auf dem neusten Stand und melden Sie sich jetzt zu unserem Newsletter an. Mit diesem erhalten Sie alle aktuellen Informationen zur WCAG 2.1, wie neue Barrierefreiheitskriterien in die Web Accessibility Richtlinien der EU aufgenommen werden und andere wichtige Entwicklungen in der digitalen Barrierefreiheit.

 

WCAG 2.1 Erfolgskriterien und ihre Bedeutung

1. Orientierung (AA)

In einfachen Worten, bezieht sich „Orientierung“ darauf, wie Ihre Website auf einem mobilen Gerät angezeigt wird und darauf zugegriffen werden kann. Websites und andere digitale Anwendungen sollten sowohl die Querformat- als auch die Hochformatausrichtung unterstützen. Dies hilft Usern mit Behinderungen, eine Website einwandfrei zu lesen, sollten Geräte auf einer Erhöhung oder auf eine andere Art und Weise montiert sein.

A phone and then an arrow toward a laptop, indicating the difference in orientation

2. Identifizieren Sie den Verwendungszweck (AA)

Wenn Sie mit AutoComplete vertraut sind, bringt dieses Kriterium nichts unerwartetes mit sich! Stellen Sie sicher, dass AutoComplete wie erwartet funktioniert, um die erforderliche Anzahl an Schreibvorgängen zu reduzieren. W3C verwendet den Begriff "programmgesteuert", was bedeutet, dass eine Software das Tippen für User übernimmt. Dazu gehört die automatische Eingabe von z.B. Namen der User, Adressen, Telefonnummern oder Geburtstagen.

3. Vergrößerungen (AA)

Kennen Sie den Moment, wenn Sie eine Website auf Ihrem mobilen Endgerät aufrufen und der Text nicht an den Bildschirm angepasst ist? In diesem Fall müssen Sie nicht nur vertikal, sondern auch horizontal scrollen. Das ist nervig! Diese Frustration ist für User mit Sehbehinderung üblich, wenn sie die Schriftgröße einer Seite auf jedem Gerät auf 400% erhöhen. Nutzen Sie bei der Gestaltung Ihrer Website am besten Vorlagen oder Designs, die horizontales Scrollen erfordern - User aller physischen und kognitiven Fähigkeiten werden es Ihnen danken.

4. Grafikkontraste (AA)

Eines der komplexesten WCAG-Erfolgskriterien befasst sich mit Farbkontrasten. Text und Hintergrund müssen ein Verhältnis von 3: 1 oder 4,5: 1 aufweisen, abhängig von der Größe des Textes. WCAG 2.1 geht sogar einen Schritt weiter und legt fest, dass "Benutzeroberflächenkomponenten" (wie Schaltflächen, Formularsteuerelemente und Verknüpfungen) sowie einige Grafiken ein Verhältnis von 3: 1 aufweisen müssen. Bisher nutzen Fachleute der Barrierefreiheit die Farbkontrastanforderungen der WCAG 2.0 als allgemeinen Richtwert. Das neue Kriterium garantiert nun eine einheitliche Anwendung.

Nehmen Sie das Beispiel eines "X" -Symbols, das anzeigt, dass ein modales Fenster geschlossen werden kann, und stellen Sie sich dieses weiße Symbol auf dem Bild eines wolkenlosen Himmels vor. Das weiße Symbol vor einem hellblauen Hintergrund hält das Verhältnis von 3: 1 möglicherweise nicht ein, was bedeutet, dass User mit geringer Sehschärfe es nicht finden können.

Wenn es um Grafiken geht, muss nicht jedes Bild dem Verhältnis 3: 1 entsprechen, sondern nur diese Teile der Grafiken, die zum Verständnis des Inhalts essentiell sind. Denken Sie an Diagramme, Symbole und andere Grafiken, die ohne Kontrast schwer zu identifizieren wären.

Two images: one displays 2.2:1 contrast and one displays 5.7:1 contrast

5. Textanpassungen (AA)

Textanpassungen können den Inhalt Ihrer Website beschädigen und besonders schwer lesbar für User mit Lernschwierigkeiten machen. WCAG 2.1 soll sicherstellen, dass User die Möglichkeit haben, den Absatz-, Buchstaben- und Wortabstand sowie die Zeilenhöhe zu überschreiben, damit sie den Text entsprechend anpassen können, ohne die Funktionalität der Website zu verlieren.

6. Inhalte von Mauszeiger oder Tastaturfokus (AA)

Im Internet ist es üblich zusätzliche Informationen anzuzeigen, sollte wenn man den Mauszeiger über eine Grafik bewegt. Für einen User mit eingeschränkter Sehfähigkeit oder einer Lernbehinderung (einschließlich Legasthenie) kann diese Interaktion störend sein und sich negativ auf das Gesamterlebnis des Users auswirken. Unter WCAG 2.1 muss der User in der Lage sein, den zusätzlichen Inhalt zu schließen und mit der zusätzlichen Information zu interagieren, ohne dass diese verschwindet. Außerdem muss der Inhalt so lange angezeigt werden bis der User das Pop-up-Fenster aktiv schließt.

7. Tastaturbefehle (A)

Wenn Sie Tastaturbefehle von Google Mail zum Archivieren, Löschen oder Beantworten von Nachrichten verwenden, sind Sie mit Kurzbefehlen für eine einzelne Buchstaben vertraut. Stellen Sie sich nun folgendes Problem vor: Jemand nutzt eine Diktiersoftware, um seinen Computer zu steuern (z. B. Dragon Naturally Speaking). Nun kommt ein Kollege in sein/ihr Büro und sagt laut "Hi, Sean", während das Mikrofon aktiv ist. Folgendes könnte ausgelöst werden: Google Mail markiert die erste Nachricht und archiviert sie. Anschließend wird bei der nächsten E-Mail eine Nachricht "Alle Antworten" geöffnet und der Buchstabe "n" wird in den Nachrichtentext eingefügt..

Unter WCAG 2.1 können solche Szenarien vermieden werden, da der User in der Lage wäre:

  • Die Kurzbefehle für einzelne Buchstaben zu deaktivieren
  • Verknüpfung neu zu zuweisen, um eine oder mehrere Zusatztasten zu verwenden (z. B. Strg oder Alt).
  • Tastenkombination nur aktivieren, wenn eine bestimmte Komponente eingestellt ist

8. Pointer-Gesten (A)

Wahrscheinlich können Sie sich an eine Zeit erinnern, in der Sie eine akrobatische Bewegung mit Ihren Fingern ausführen mussten, um eine Website auf Ihrem mobilen Gerät zu nutzen (z. B. Zwei-Finger-Zoom oder Pinch). Die Wahrheit ist, eine Aktion wie diese ist für einige User unmöglich. Nach WCAG 2.1, muss es eine Option für die Single-Finger-Operation geben, es sei denn, eine Zwei-Finger-Pinch Aktion ist unerlässlich (z.B. in einer App, die freihändiges Zeichnen anbietet).

A finger pointing on a phone

9. Pointer-Eingaben (A)

Das beste Beispiel dafür ist ein Touchscreen-Gerät. Mittlerweile wissen wir alle, wie man auf einer Seite scrollt: Sie legen Ihren Finger auf den Bildschirm und ziehen nach oben oder unten - ohne den Finger zu entfernen. Stellen Sie sich vor, der Touchscreen erkennt nur ein Tippen als tatsächliches Anklicken. Für User mit eingeschränkter Geschicklichkeit könnte so versehentlich eine Aktion auf der Website ausgelöst werden. Die Point Cancellation (=Zeigerunterdrückung) soll dies vermeiden, indem bestimmte Ereignisse nur dann ausgelöst werden, wenn der User seinen Zeiger [Finger, Maus oder Tastatur] entfernt oder leicht wieder zur ursprünglichen Einstellung zurückkehren kann.

10. Sichtbare Beschriftungen (A)

Sichtbare Beschriftungen erstellen ist eines der einfachsten neuen Kriterien. Wenn Beschriftungen Texte oder Bildtexte enthalten, muss der Name den Inhalt visuell darstellen. Verweist ein Link beispielsweise auf eine Suchleiste und ist mit „Suche“ gekennzeichnet, sollten Sie die Schaltfläche nicht mit dem ALT Text "Produkt finden" beschriften. Warum nicht? Weil Benutzer einer Diktiersoftware nicht korrekt erkennen können, das mit „Klicke Link Suche“ gemeint ist, dass sie auf die Schaltfläche "Produkte finden" klicken sollen. Oftmals sind die größte Nutzergruppe von Screenreader sehende Menschen mit Lernschwierigkeiten, die sich darauf verlassen, dass der Screenreader-Ton mit dem Text auf dem Bildschirm übereinstimmen. In der Tat helfen diese vielfältigen Informationsflüsse Menschen mit Lernbehinderungen kognitiv zu verstehen, was sie sehen. Wenn ein Fehler auftritt führt dies zu Verwirrung.

11. Bewegungsbetätigung (A)

Viele mobile Apps und Websites erfordern neben dem Berühren oder Klicken zusätzliche Aktivitäten wie Schütteln oder Neigen. Das kann für Besucher mit verschiedenen Behinderungen ein Hindernis darstellen. Das Design sollte dementsprechend ermöglichen, dass die Funktion mit Komponenten der Benutzeroberfläche, anstelle von physischen Aktionen ausgeführt werden kann. Auf einem iPad können Sie nach Eingabe von Text das Telefon schütteln, um diese Eingabe rückgängig zu machen. Darüber hinaus finden Sie über der iPad-Tastatur eine Schaltfläche, die die gleiche Aktion ausführt, und User können das "Schütteln zum Rückgängigmachen" in den Einstellungen deaktivieren.

12. Statusmeldungen (AA)

Eine Statusmeldung, wie sie beim Absenden eines Formulars oder bei einer Umfrage angezeigt wird, ist oft so subtil, dass es schwierig erkennbar ist, für User mit einer Sehschwäche oder kognitiven Verarbeitungsstörung, dass etwas abgeschlossen wurde. Dementsprechend sollten Statusnachrichten so programmiert werden, dass sie von der unterstützenden Technologie eines Users angesagt werden. So kann garantiert werden, dass eine ausgeführte Aktion abgeschlossen ist.

One mobile phone showing no status message and one showing a status message.

Fazit

Nachdem wir nun die neuen A- und AA-Kriterien des W3C erklärt haben, sollten Sie die Richtung, in die sich die Barrierefreiheit im Web in den nächsten Jahren entwickelt, besser verstehen können.