Wahrnehmbar

Dieser Artikel bietet praktische Ratschläge, wie Sie Ihre Webinhalte so schreiben können, dass sie den Erfolgskriterien entsprechen, die im Wahrnehmbar-Prinzip der Web Content Accessibility Guidelines (WCAG) 2.0 und 2.1 festgelegt sind. Wahrnehmbar bedeutet, dass Benutzer in der Lage sein müssen, die Inhalte auf irgendeine Weise wahrzunehmen, unter Nutzung eines oder mehrerer ihrer Sinne.

Hinweis: Um die W3C-Definitionen für Wahrnehmbar und deren Richtlinien und Erfolgskriterien zu lesen, siehe Prinzip 1: Wahrnehmbar - Informationen und Benutzeroberflächenkomponenten müssen so präsentiert werden, dass die Benutzer sie wahrnehmen können.

Richtlinie 1.1 — Bereitstellung von Textalternativen für Nicht-Text-Inhalte

Der Schlüssel hierbei ist, dass Text in andere Formen umgewandelt werden kann, die Menschen mit Behinderungen nutzen können. Zum Beispiel kann er von einem Screenreader gesprochen, in großen Druck umgewandelt oder auf einem Braille-Display dargestellt werden. Nicht-Text-Inhalte beziehen sich auf Multimedia wie Bilder, Audio und Video.

Erfolgskriterien Wie man den Kriterien entspricht Praktische Ressource
1.1.1 Textäquivalente bereitstellen (A) Alle Bilder, die bedeutungsvolle Inhalte vermitteln, sollten mit geeigneten alternativen Texten versehen werden. Textalternativen.
Komplexe Bilder oder Diagramme sollten eine barrierefreie Alternative haben, entweder auf derselben Seite oder über einen Link. Verwenden Sie einen regulären Link anstelle eines longdesc-Attributs.

Eine Textbeschreibung kann funktionieren oder eine zugängliche Datentabelle (siehe HTML-Tabellenzugänglichkeit). Siehe W3C's Image Description Extension (longdesc) für das Argument gegen longdesc.

Multimediainhalte (d.h. Audio oder Video) sollten zumindest eine beschreibende Bezeichnung haben, wie z.B. Untertitel oder ähnliches.

Siehe Textalternativen für statische Untertiteloptionen und Audio-Transkripte, Video-Textspuren für andere Alternativen.

UI-Steuerelemente wie Formularelemente und Buttons sollten Textlabels haben, die ihren Zweck beschreiben. Buttons sind einfach — Sie sollten sicherstellen, dass der Button-Text die Funktion des Buttons beschreibt (z.B., <button>Bild hochladen</button>). Für weitere Informationen zu anderen UI-Steuerelementen, siehe UI-Steuerelemente.
Implementieren Sie dekorative (nicht-inhaltliche) Bilder, Videos usw. so, dass sie für unterstützende Technologien unsichtbar sind, damit sie die Benutzer nicht verwirren.

Dekorative Bilder sollten mit CSS-Hintergrundbildern implementiert werden (siehe Hintergründe und Rahmen). Wenn Sie ein Bild über ein <img>-Element einfügen müssen, geben Sie ihm ein leeres alt (alt=""). Andernfalls könnten Screenreader versuchen, den Dateipfad usw. vorzulesen.

Wenn Sie ein Hintergrundvideo oder Audio einfügen, das automatisch abgespielt wird, machen Sie es so unaufdringlich wie möglich. Lassen Sie es nicht wie Inhalt aussehen/klingen und bieten Sie eine Steuerung zum Ausschalten an. Idealerweise sollten Sie es gar nicht erst einbeziehen.

Hinweis: Siehe auch die WCAG-Beschreibung für Richtlinie 1.1: Textalternativen.

Richtlinie 1.2 — Bereitstellung von Textalternativen für zeitbasierte Medien

Zeitbasierte Medien beziehen sich auf Multimedia mit einer Dauer, wie Audio und Video. Beachten Sie, dass, wenn das Audio/Video als Alternative zu vorhandenen Textinhalten dient, Sie keine weitere Textalternative bereitstellen müssen.

Erfolgskriterien Wie man den Kriterien entspricht Praktische Ressource
1.2.1 Alternativen für vorab aufgezeichnete nur Audio- und Video-Inhalte bereitstellen (A) Für vorab aufgezeichnete rein audio-basierte Medien sollte ein Transkript bereitgestellt werden, und für vorab aufgezeichnete rein video-basierte Medien (d.h. stummes Video) sollte ein Transkript oder eine Audiobeschreibung bereitgestellt werden. Siehe Audio-Transkripte für Informationen zu Transkripten. Kein Tutorial für Audiobeschreibungen ist bislang verfügbar.
1.2.2 Untertitel für webbasierte Videos bereitstellen (A) Sie sollten Untertitel für Videos bereitstellen, die im Web präsentiert werden (z.B. HTML-Video). Dies ist zugunsten von Menschen, die den Audioteil des Videos nicht hören können. Siehe Video-Textspuren für HTML-Videountertitel. Siehe auch Fügen Sie Ihre eigenen Untertitel & geschlossene Untertitel hinzu (YouTube).
1.2.3 Textabschrift oder Audiobeschreibung für webbasierte Videos bereitstellen (A) Sie sollten Textabschriften oder Audiobeschreibungen für Videos bereitstellen, die im Web präsentiert werden (z.B. HTML-Video). Dies ist zugunsten derer, die den visuellen Teil des Videos nicht sehen können und nicht den vollen Inhalt allein durch das Audio erhalten. Siehe Audio-Transkripte für Informationen zu Transkripten. Kein Tutorial für Audiobeschreibungen ist bislang verfügbar.
1.2.4 Untertitel für Live-Audio bereitstellen (AA) Sie sollten synchronisierte Untertitel für alle Live-Multimedia, die Audio enthalten (z.B. Videokonferenzen, Live-Audioübertragungen), bereitstellen.
1.2.5 Audiobeschreibungen für vorab aufgezeichnete Videos bereitstellen (AA) Audiobeschreibungen sollten für vorab aufgezeichnete Videos bereitgestellt werden, jedoch nur, wenn das vorhandene Audio nicht die vollständige Bedeutung vermittelt, die durch das Video ausgedrückt wird.
1.2.6 Gebärdensprache-Äquivalent zu vorab aufgezeichnetem Audio bereitstellen (AAA) Ein gleichwertiges Gebärdensprachvideo sollte für jeden aufgezeichneten Inhalt mit Audio bereitgestellt werden.
1.2.7 Videos mit Audiobeschreibungen verlängern (AAA) Wo Audiobeschreibungen nicht bereitgestellt werden können (siehe 1.2.5) aufgrund von Videotimingproblemen (z.B. es gibt keine geeigneten Pausen im Inhalt, in die Audiobeschreibungen eingefügt werden können), sollte eine alternative Version des Videos bereitgestellt werden, die eingefügte Pausen (und Audiobeschreibungen) enthält.
1.2.8 Eine Alternative für vorab aufgezeichnete Medien bereitstellen (AAA) Für alle Inhalte, die Video enthalten, sollte ein beschreibendes Texttranskript bereitgestellt werden, zum Beispiel ein Drehbuch des Films, den Sie gerade ansehen. Dies ist zugunsten hörgeschädigter Zuschauer, die den Inhalt nicht hören können. Siehe Audio-Transkripte für Informationen zu Transkripten.
1.2.9 Transkript für Live-Audio bereitstellen (AAA) Für jegliche Live-Audioinhalte, die ausgestrahlt werden, sollte ein beschreibender Text bereitgestellt werden, zum Beispiel ein Drehbuch des Stücks oder Musicals, das Sie hören. Dies ist zugunsten hörgeschädigter Zuschauer, die den Inhalt nicht hören können. Siehe Audio-Transkripte für Informationen zu Transkripten.

Hinweis: Siehe auch die WCAG-Beschreibung für Richtlinie 1.2: Zeitbasierte Medien: Bereitstellung von Alternativen für zeitbasierte Medien.

Richtlinie 1.3 — Erstellen Sie Inhalte, die auf verschiedene Arten präsentiert werden können

Diese Richtlinie bezieht sich auf die Fähigkeit von Inhalten, in verschiedenen Formen konsumiert zu werden, um den unterschiedlichen Bedürfnissen der Benutzer gerecht zu werden.

Erfolgskriterien Wie man den Kriterien entspricht Praktische Ressource
1.3.1 Informationen und Beziehungen (A)

Jegliche Inhaltsstruktur oder visuelle Beziehung zwischen Inhalten kann auch programmatisch bestimmt oder aus einer Textbeschreibung abgeleitet werden. Die Hauptsituationen, in denen dies relevant ist, sind:

  • Textlabels und die Formularelemente, die sie beschreiben. Diese sind eindeutig mit dem <label>-Element verbunden, das von Screenreadern usw. aufgenommen werden kann.
  • Alt-Text für Bilder. Inhaltsbilder sollten über verfügbaren Text verfügen, der den Inhalt des Bildes klar beschreibt. Dieser kann programmatisch damit verknüpft werden (z.B. Alt-Text), oder es ist sonst einfach, ihn zuzuordnen (z.B. beschreibt das Bild und befindet sich direkt daneben). Dies sollte bedeuten, dass die volle Bedeutung immer noch abgeleitet werden kann, auch wenn man das Bild nicht sehen kann.
  • Listen. Wenn die Reihenfolge der Listenelemente wichtig ist, verwenden Sie eine geordnete Liste (<ol>).
Der gesamte

HTML: Eine gute Grundlage für Barrierefreiheit ist reich an Informationen darüber, aber Sie sollten besonders auf Gute Semantik, UI-Steuerelemente, und Textalternativen achten.

1.3.2 Sinnvolle Inhaltsreihenfolge (A) Eine vernünftige, logische Lesereihenfolge sollte für alle Inhalte leicht zu bestimmen sein, auch wenn sie visuell auf eine unübliche Weise präsentiert wird. Die Reihenfolge sollte offensichtlich durch den Einsatz korrekter semantischer Elemente gemacht werden (z.B. Überschriften, Absätze), wobei CSS verwendet wird, um unerwartete Layoutstile zu erstellen, unabhängig vom Markup. Erneut, wenden Sie sich an HTML: Eine gute Grundlage für Barrierefreiheit.
1.3.3 Sensorische Charakteristika (A)

Anweisungen zur Bedienung von Steuerelementen oder zum Verständnis von Inhalten dürfen nicht auf einem einzigen Sinn beruhen. Dies könnte für Menschen mit einer Behinderung im Zusammenhang mit diesem Sinn, oder für ein Gerät, das diesen Sinn nicht unterstützt, unzugänglich sein. Zum Beispiel:

  • "Klicken Sie auf den runden Button, um fortzufahren"
    Der Button sollte klar beschriftet sein, so dass es offensichtlich ist, dass es der Button ist, den Sie drücken müssen. Wenn es mehrere Buttons gibt, stellen Sie sicher, dass sie alle klar beschriftet sind, um ihre Funktion zu unterscheiden.
  • "Hören Sie auf die Audiounterweisung, um Anleitung zu erhalten"
    Dies ist offensichtlich problematisch — Audio wird unzugänglich für Menschen mit Hörbehinderungen sein, während Text gelesen, aber auch von einem Screenreader vorgelesen werden kann, falls erforderlich.
  • "Wischen Sie von der rechten Bildschirmseite, um das Menü zu öffnen"
    Einige Benutzer können möglicherweise nicht den Bildschirm wischen, entweder aufgrund einer Behinderung oder weil ihr Gerät keine Touch-Funktion unterstützt. Eine Alternative sollte bereitgestellt werden, z.B. eine Tastenkombination oder ein Button, der per Tastatur oder anderen Mitteln aktiviert werden kann.

Hinweis: Informationen allein durch Farbe zu vermitteln steht im Zusammenhang damit, wird jedoch in einer anderen Richtlinie behandelt — 1.4.1.

1.3.4 Orientierung (AA) hinzugefügt in 2.1 Inhalte schränken ihre Ansicht und Bedienung nicht auf eine bestimmte Anzeigeorientierung ein, wie Hoch- oder Querformat, es sei denn, eine bestimmte Anzeigeorientierung ist unerlässlich.

Orientierung verstehen

1.3.5 Eingabenzweck identifizieren (AA) hinzugefügt in 2.1

Folgen Sie der Liste der 53 Eingabefelder, um den Zweck eines Feldes programmatisch zu identifizieren.

Eingabenzweck verstehen
1.3.6 Zweck identifizieren (AAA) hinzugefügt in 2.1 In Inhalten, die mit Markup-Sprachen implementiert sind, kann der Zweck von Benutzeroberflächenkomponenten, Icons und Regionen programmatisch bestimmt werden. Zweck verstehen

Hinweis: Siehe auch die WCAG-Beschreibung für Richtlinie 1.3: Anpassbar: Inhalte erstellen, die auf verschiedene Weisen präsentiert werden können, ohne Informationen oder die Struktur zu verlieren.

Richtlinie 1.4: Machen Sie es Benutzern leichter, Inhalte zu sehen und zu hören, einschließlich der Trennung von Vordergrund und Hintergrund

Diese Richtlinie bezieht sich darauf, sicherzustellen, dass Kerninhalte leicht von Hintergründen und anderer Dekoration zu unterscheiden sind. Das klassische Beispiel ist Farbe (sowohl Farbkontrast als auch Verwendung von Farbe zur Instruktion), aber sie gilt auch in anderen Situationen.

Erfolgskriterien Wie man den Kriterien entspricht Praktische Ressource
1.4.1 Nutzung von Farbe (A)

Farbe sollte nicht allein verwendet werden, um Informationen zu übermitteln. Zum Beispiel sollten in Formularen erforderliche Felder niemals nur mit einer Farbe (wie Rot) markiert werden. Stattdessen (oder zusätzlich) wäre etwas wie ein Sternchen mit dem Etikett "erforderlich" angemessener.

Siehe Nutzung von Farbe, Farbe und Farbkontrast, und Mehrere Labels.
1.4.2 Audiosteuerung (A) Für alle Audiodaten, die länger als drei Sekunden abgespielt werden, stellen Sie zugängliche Steuerelemente zum Abspielen und Pausieren des Audios/Videos sowie zum Stummschalten/Anpassen der Lautstärke bereit. Verwenden Sie native <button>, um zugängliche Tastatursteuerungen bereitzustellen, wie gezeigt in Video-Spieler-Styling-Grundlagen.
1.4.3 Mindestkontrast (AA)

Der Farbkontrast zwischen Hintergrund- und Vordergrundinhalten sollte auf einem Mindestniveau liegen, um die Lesbarkeit zu gewährleisten:

  • Text und sein Hintergrund sollten ein Kontrastverhältnis von mindestens 4,5:1 haben.
  • Überschrift (oder nur größerer) Text sollte ein Verhältnis von mindestens 3:1 haben. Größerer Text wird definiert als mindestens 18pt oder 14pt fett.
Siehe Farbkontrast und Farbe und Farbkontrast.
1.4.4 Text vergrößern (AA) Die Seite sollte lesbar und nutzbar sein, wenn die Textgröße verdoppelt wird. Dies bedeutet, dass Designs responsiv sein sollten, sodass beim Vergrößern der Textgröße der Inhalt weiterhin zugänglich ist.
1.4.5 Bilder von Text (AA) Bilder sollten NICHT verwendet werden, um Inhalte darzustellen, wo Text die Aufgabe erledigen würde. Zum Beispiel, wenn ein Bild hauptsächlich Text enthält, könnte es mit Text ebenso gut wie Bildern dargestellt werden.
1.4.6 Erhöhter Kontrast (AAA)

Dies folgt dem Kriterium 1.4.3 und baut darauf auf.

  • Text und sein Hintergrund sollten ein Kontrastverhältnis von mindestens 7:1 haben.
  • Überschrift (oder nur größerer) Text sollte ein Verhältnis von mindestens 4,5:1 haben. Größerer Text wird definiert als mindestens 18pt oder 14pt fett.
Siehe Farbe und Farbkontrast.
1.4.7 Wenig oder kein Hintergrundaudio (AAA) Vorab aufgezeichnete Audioaufnahmen, die hauptsächlich Sprache enthalten, sollten wenig Hintergrundgeräusche haben, sodass der Inhalt leicht verstanden werden kann.
1.4.8 Visuelle Darstellung (AAA)

Für die Präsentation von Textinhalten sollte Folgendes zutreffen:

  • Vordergrund- und Hintergrundfarben sollten vom Benutzer auswählbar sein.
  • Textblöcke sollten für maximale Lesbarkeit nicht breiter als 80 Zeichen (oder Glyphen) sein.
  • Text sollte nicht vollständig ausgerichtet sein (z.B. text-align: justify;).
  • Der Zeilenabstand sollte innerhalb von Absätzen mindestens 1,5-mal die Textgröße betragen (z.B. line-height: 1.5;), und zwischen Absätzen mindestens 2,25-mal die Textgröße (z.B. padding: 2.25rem;).
  • Wenn die Textgröße verdoppelt wird, sollte der Inhalt nicht gescrollt werden müssen.
1.4.9 Bilder von Text (Keine Ausnahme) (AAA) Text sollte nicht als Teil eines Bildes präsentiert werden, es sei denn, es dient rein dekorativen Zwecken (d.h. es vermittelt keine Inhalte) oder kann auf keine andere Weise dargestellt werden.
1.4.10 Umfließen (AA) hinzugefügt in 2.1
  • Kein horizontales Scrollen für von links nach rechts lesbare Sprachen (wie Englisch) oder von rechts nach links lesbare Sprachen (wie Arabisch)
  • Kein vertikales Scrollen für von oben nach unten lesbare Sprachen (wie Japanisch)
  • Außer für Teile des Inhalts, die eine zweidimensionale Darstellung für die Nutzung oder Bedeutung erfordern (wie eine große Datentabelle)
Umfließen verstehen
1.4.11 Nicht-Text-Kontrast (AA) hinzugefügt in 2.1 Minimales Farbkontrastverhältnis von 3:1 für Benutzeroberflächenkomponenten und grafische Objekte. Nicht-Text-Kontrast verstehen
1.4.12 Textabstand (AA) hinzugefügt in 2.1

Es tritt kein Verlust von Inhalten oder Funktionalität auf, wenn die folgenden Stile angewendet werden:

  • Zeilenhöhe (Zeilenabstand) auf mindestens 1,5-mal die Schriftgröße
  • Abstand nach Absätzen auf mindestens 2-mal die Schriftgröße
  • Buchstabenabstand (Tracking) auf mindestens 0,12-mal die Schriftgröße
  • Wortabstand auf mindestens 0,16-mal die Schriftgröße
 Textabstand verstehen
1.4.13 Inhalte bei Hover oder Fokus (AA) hinzugefügt in 2.1

Während zusätzliche Inhalte in Koordination mit Hover und Tastaturfokus erscheinen und verschwinden können, gibt dieses Erfolgskriterium drei Bedingungen vor, die erfüllt werden müssen:

  • verwerfbar (kann geschlossen/entfernt werden)
  • hoverbar (die zusätzlichen Inhalte verschwinden nicht, wenn der Zeiger darüber bewegt wird)
  • persistent (die zusätzlichen Inhalte verschwinden nicht ohne Benutzeraktion)
Inhalte bei Hover oder Fokus verstehen

Hinweis: Siehe auch die WCAG-Beschreibung für Richtlinie 1.4: Unterscheidbar: Machen Sie es Benutzern leichter, Inhalte zu sehen und zu hören, einschließlich der Trennung von Vordergrund und Hintergrund.

Siehe auch