Wahrnehmbar

Dieser Artikel bietet praktische Ratschläge, wie Sie Ihre Webinhalte so gestalten, dass sie den Erfolgskriterien entsprechen, die im Wahrnehmbar-Prinzip der Richtlinien für Barrierefreiheit von Webinhalten (WCAG) 2.0 und 2.1 festgelegt sind. "Wahrnehmbar" bedeutet, dass Benutzer in der Lage sein müssen, die Inhalte auf irgendeine Weise mit einem oder mehreren ihrer Sinne wahrzunehmen.

Hinweis: Um die W3C-Definitionen für "Wahrnehmbar" und die zugehörigen Richtlinien und Erfolgskriterien zu lesen, siehe Prinzip 1: Wahrnehmbar - Informationen und Benutzeroberflächenkomponenten müssen den Benutzern in einer Weise präsentiert werden, die sie wahrnehmen können.

Richtlinie 1.1 — Bereitstellung von Textalternativen für nicht-textliche 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 vorgelesen, in großer Schrift gedruckt oder auf einem Braille-Display dargestellt werden. Nicht-textliche Inhalte beziehen sich auf Multimedia wie Bilder, Audio und Video.

Erfolgskriterien Wie Sie die Kriterien erfüllen Praktische Ressource
1.1.1 Bereitstellung von Textequivalenten (A) Alle Bilder, die relevante Inhalte vermitteln, sollten mit passenden Alternativtexten versehen werden. Textalternativen.
Komplexe Bilder oder Diagramme sollten eine zugängliche Alternative erhalten, entweder auf derselben Seite oder über einen Link. Verwenden Sie einen normalen Link anstelle eines longdesc-Attributes.

Eine Textbeschreibung könnte funktionieren oder auch eine zugängliche Datentabelle (siehe HTML-Tabellen erweiterte Funktionen und Barrierefreiheit). Siehe W3C's Image Description Extension (longdesc) für das Argument gegen longdesc.

Multimedia-Inhalte (d. h. Audio oder Video) sollten mindestens eine beschreibende Identifikation aufweisen, wie zum Beispiel eine Untertitelung oder Ähnliches.

Siehe Textalternativen für Optionen zu statischen Untertiteln und Audio-Transkripte, Video-Textspuren für andere Alternativen.

UI-Steuerelemente wie Formularelemente und Schaltflächen sollten Textbeschriftungen haben, die ihren Zweck beschreiben. Schaltflächen sind einfach — Sie sollten sicherstellen, dass der Schaltflächentext die Funktion der Schaltfläche beschreibt (z. B. <button>Bild hochladen</button>). Weitere Informationen zu anderen UI-Steuerelementen finden Sie unter UI-Steuerelemente.
Dekorative (nicht-inhaltliche) Bilder, Videos etc. sollten so implementiert werden, dass sie für unterstützende Technologien unsichtbar sind, um die Benutzer nicht zu verwirren.

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

Wenn Sie Hintergrundvideos oder -audios einfügen, die automatisch abspielen, sollten diese so unaufdringlich wie möglich sein. Machen Sie es nicht so, dass es wie Inhalte aussieht/klingt, und bieten Sie eine Steuerung an, um es auszuschalten. Idealerweise sollten Sie es überhaupt nicht einfügen.

Hinweis: Sehen Sie auch die WCAG-Beschreibung zur 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 Sie keine weitere Textalternative bereitstellen müssen, wenn Audio/Video als Alternative zu bestehenden Textinhalten dient.

Erfolgskriterien Wie Sie die Kriterien erfüllen Praktische Ressource
1.2.1 Alternativen für vorab aufgezeichnete Audio- und Video-Inhalte bereitstellen (A) Ein Transkript sollte für vorab aufgezeichnete Audio-Inhalte bereitgestellt werden, und ein Transkript oder eine Audiobeschreibung sollte für vorab aufgezeichnete Video-Inhalte (d. h. stumme Videos) bereitgestellt werden. Siehe Audio-Transkripte für Informationen zu Transkripten. Es ist noch kein Tutorial zur Audiobeschreibung verfügbar.
1.2.2 Untertitel für webbasierte Videos bereitstellen (A) Sie sollten Untertitel für Videos bereitstellen, die im Internet präsentiert werden (z. B. HTML-Video). Dies kommt Menschen zugute, die den Audioteil des Videos nicht hören können. Siehe Video-Textspuren für HTML-Video-Untertitel. Siehe auch Fügen Sie Ihre eigenen Untertitel und geschlossenen Untertitel hinzu (YouTube).
1.2.3 Texttranskript oder Audiobeschreibung für webbasierte Videos bereitstellen (A) Sie sollten Texttranskripte oder Audiobeschreibungen für Videos bereitstellen, die im Internet präsentiert werden (z. B. HTML-Video). Dies kommt Menschen zugute, die den visuellen Teil des Videos nicht sehen können und nicht den vollständigen Inhalt nur durch das Audio erhalten. Siehe Audio-Transkripte für Informationen zu Transkripten. Es ist noch kein Tutorial zur Audiobeschreibung verfügbar.
1.2.4 Untertitel für Live-Audio bereitstellen (AA) Sie sollten synchronisierte Untertitel für alle Live-Multimedia bereitstellen, die Audio enthalten (z. B. Videokonferenzen, Live-Audioübertragungen).
1.2.5 Audiobeschreibungen für vorab aufgezeichnete Videos bereitstellen (AA) Für vorab aufgezeichnete Videos sollten Audiobeschreibungen bereitgestellt werden, jedoch nur, wenn das vorhandene Audio nicht die gesamte Bedeutung vermittelt, die das Video ausdrückt.
1.2.6 Gebärdensprach-Äquivalent zu vorab aufgezeichnetem Audio bereitstellen (AAA) Ein entsprechendes Video in Gebärdensprache sollte für alle vorab aufgezeichneten Inhalte bereitgestellt werden, die Audio enthalten.
1.2.7 Erweiterte Videos mit Audiobeschreibungen bereitstellen (AAA) Wo Audiobeschreibungen nicht bereitgestellt werden können (siehe 1.2.5) aufgrund von Videozeitproblemen (z. B. es gibt keine geeigneten Pausen im Inhalt, um die Audiobeschreibungen einzufügen), sollte eine alternative Version des Videos bereitgestellt werden, das 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, z. B. ein Skript des Films, den Sie gerade ansehen. Dies ist für hörgeschädigte Zuschauer gedacht, 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 alle Live-Audio-Inhalte, die gesendet werden, sollte ein beschreibender Text bereitgestellt werden, z. B. ein Skript des Stücks oder Musicals, das Sie gerade hören. Dies ist für hörgeschädigte Zuschauer gedacht, die den Inhalt nicht hören können. Siehe Audio-Transkripte für Informationen zu Transkripten.

Hinweis: Sehen Sie auch die WCAG-Beschreibung zur Richtlinie 1.2: Zeitbasierte Medien: Alternativen für zeitbasierte Medien bereitstellen.

Richtlinie 1.3 — Erstellen von Inhalten, die in unterschiedlichen Weisen präsentiert werden können

Diese Richtlinie bezieht sich darauf, dass Inhalte für Benutzer auf unterschiedliche Weise konsumiert werden können, um ihren unterschiedlichen Bedürfnissen gerecht zu werden.

Erfolgskriterien Wie Sie die Kriterien erfüllen Praktische Ressource
1.3.1 Info und Beziehungen (A)

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

  • Textbeschriftungen und die Formularelemente, die sie beschreiben. Diese werden eindeutig mit dem <label>-Element verknüpft, das von Screenreadern usw. erkannt werden kann.
  • Bild-Alt-Text. Inhaltliche Bilder sollten einen Text haben, der den Inhalt des Bildes eindeutig beschreibt und programmatisch damit verknüpft werden kann (z. B. Alt-Text) oder anderweitig leicht zuzuordnen ist (z. B. beschreibt es und befindet sich direkt daneben). Dies sollte bedeuten, dass die volle Bedeutung immer noch abgeleitet werden kann, auch wenn Sie das Bild nicht sehen können.
  • Listen. Wenn die Reihenfolge der Listenelemente wichtig ist, verwenden Sie eine geordnete Liste (<ol>).
 Der gesamte Inhalt von

HTML: Eine gute Grundlage für Barrierefreiheit ist voll mit Informationen darüber, aber Sie sollten insbesondere auf Gute Semantik, UI-Steuerelemente und Textalternativen verweisen.

1.3.2 Sinnvolle Inhaltssequenz (A) Eine sinnvolle, logische Leserichtung sollte für alle Inhalte leicht zu bestimmen sein, auch wenn sie visuell auf ungewöhnliche Weise präsentiert werden. Die Reihenfolge sollte durch die Verwendung korrekter semantischer Elemente (z. B. Überschriften, Absätze) offensichtlich gemacht werden, wobei CSS verwendet wird, um alle ungewöhnlichen Layoutstile zu erstellen, unabhängig von der Markierung. Wiederum beziehen Sie sich auf HTML: Eine gute Grundlage für Barrierefreiheit.
1.3.3 Sensorische Merkmale (A)

Anweisungen zur Bedienung von Steuerelementen oder zum Verständnis von Inhalten beruhen nicht auf einem einzigen Sinn. Dies könnte sich für Menschen mit einer Behinderung, die mit diesem Sinn verbunden ist, oder ein Gerät, das diesen Sinn nicht unterstützt, als unzugänglich erweisen. Beispiele hierfür sind:

  • "Klicken Sie auf den runden Knopf, um fortzufahren"
    Der Knopf sollte deutlich beschriftet sein, damit klar ersichtlich ist, dass es der Knopf ist, den Sie drücken müssen. Wenn es mehrere Knöpfe gibt, stellen Sie sicher, dass alle deutlich beschriftet sind, um ihre Funktion zu unterscheiden.
  • "Hören Sie sich die Audioanweisungen zur Orientierung an"
    Dies ist offensichtlich problematisch – Audio wird für Menschen mit Hörbehinderungen unzugänglich sein, während Text gelesen werden kann, aber auch von einem Screenreader vorgelesen werden kann, wenn erforderlich.
  • "Wischen Sie vom rechten Rand des Bildschirms, um das Menü zu öffnen"
    Einige Benutzer sind möglicherweise nicht in der Lage, den Bildschirm zu wischen, sei es aufgrund einer Behinderung oder weil ihr Gerät keinen Touch unterstützt. Es sollte eine Alternative bereitgestellt werden, wie ein Tastaturkürzel oder eine Schaltfläche, die mit der Tastatur oder anderen Mitteln aktiviert werden kann.

Hinweis: Anweisungen ausschließlich durch Farbe zu übermitteln, ist ein verwandtes Thema, wird jedoch in einer anderen Richtlinie behandelt — 1.4.1.
1.3.4 Orientierung (AA) hinzugefügt in 2.1 Inhalte beschränken sich nicht auf eine einzige Anzeigeausrichtung, wie Hoch- oder Querformat, es sei denn, eine spezifische Anzeigeausrichtung ist wesentlich.

Verstehen der Orientierung
1.3.5 Eingabezweck identifizieren (AA) hinzugefügt in 2.1

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

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

Hinweis: Siehe auch die WCAG-Beschreibung zur Richtlinie 1.3: Anpassungsfähig: Erstellen von Inhalten, die in unterschiedlicher Weise präsentiert werden können, ohne Informationen zu verlieren oder die Struktur zu verändern.

Richtlinie 1.4: Es den Benutzern erleichtern, Inhalte zu sehen und zu hören, indem Vordergrund und Hintergrund getrennt werden

Diese Richtlinie bezieht sich darauf, sicherzustellen, dass der Kerninhalt leicht von Hintergründen und anderen Dekorationen zu unterscheiden ist. Das klassische Beispiel ist Farbe (sowohl Farbkontrast als auch Farbverwendung, um Anweisungen zu vermitteln), aber sie gilt auch in anderen Situationen.

Erfolgskriterien Wie Sie die Kriterien erfüllen Praktische Ressource
1.4.1 Farbgebrauch (A)

Farbe sollte nicht ausschließlich verwendet werden, um Informationen zu übermitteln. In Formularen sollten Sie beispielsweise niemals erforderliche Felder nur anhand einer Farbe kennzeichnen (z. B. Rot). Stattdessen wäre etwas wie ein Sternchen mit der Beschriftung "erforderlich" angemessener.

 Siehe Farbgebrauch, Farbe und Farbkontrast, und Mehrere Beschriftungen.
1.4.2 Audio-Steuerungen (A) Für alle Audios, die länger als drei Sekunden spielen, bieten Sie zugängliche Steuerungen zum Abspielen und Anhalten des Audios/Videos sowie zum Stummschalten/Anpassen der Lautstärke. Verwenden Sie native <button>, um zugängliche Tastatursteuerungen bereitzustellen, wie in Video Player Styling Basics gezeigt.
1.4.3 Mindestkontrast (AA)

Der Farbkontrast zwischen Hintergrund und Vordergrundinhalten sollte auf einem Mindestniveau liegen, um Lesbarkeit sicherzustellen:

  • Text und sein Hintergrund sollten ein Kontrastverhältnis von mindestens 4,5:1 haben.
  • Überschrift oder einfach größerer Text sollte ein Verhältnis von mindestens 3:1 haben. Größerer Text ist 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. Das bedeutet, dass Designs ansprechend sein sollten, sodass beim Vergrößern der Textgröße der Inhalt immer noch zugänglich ist.
1.4.5 Textbilder (AA) Bilder sollten NICHT verwendet werden, um Inhalte darzustellen, wo Text die Aufgabe erledigen könnte. Wenn ein Bild hauptsächlich aus Text besteht, könnte es sowohl mit Text als auch mit Bildern dargestellt werden.
1.4.6 Erhöhter Kontrast (AAA)

Dies folgt auf und baut auf Kriterium 1.4.3 auf.

  • Text und sein Hintergrund sollten ein Kontrastverhältnis von mindestens 7:1 haben.
  • Überschrift oder einfach größerer Text sollte ein Verhältnis von mindestens 4,5:1 haben. Größerer Text ist definiert als mindestens 18pt oder 14pt fett.
 Siehe Farbe und Farbkontrast.
1.4.7 Wenig oder kein Hintergrundaudio (AAA) Vorab aufgezeichnete Audiodateien, die hauptsächlich Sprache enthalten, sollten minimale Hintergrundgeräusche haben, damit der Inhalt leicht verständlich ist.
1.4.8 Visuelle Präsentation (AAA)

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

  • Vordergrund- und Hintergrundfarben sollten benutzerdefinierbar sein.
  • Textblöcke sollten aus maximal 80 Zeichen (oder Glyphen) bestehen, um maximale Lesbarkeit zu gewährleisten.
  • Text sollte nicht vollständig ausgerichtet sein (z. B. text-align: justify;).
  • Der Zeilenabstand sollte mindestens 1,5-mal so groß wie die Textgröße innerhalb von Absätzen sein (z. B. line-height: 1.5;), und mindestens 2,25-mal so groß wie die Textgröße zwischen Absätzen (z. B. padding: 2.25rem;).
  • Beim Verdoppeln der Textgröße sollte der Inhalt nicht gescrollt werden müssen.
1.4.9 Textbilder (Keine Ausnahme) (AAA) Text sollte nicht als Teil eines Bildes präsentiert werden, es sei denn, es handelt sich ausschließlich um Dekoration (d. h. er vermittelt keinen Inhalt) oder kann auf keine andere Weise präsentiert werden.
1.4.10 Umbruch (AA) hinzugefügt in 2.1
  • Kein horizontales Scrollen für von links-nach-rechts-Sprachen (wie Englisch) oder von rechts-nach-links-Sprachen (wie Arabisch)
  • Kein vertikales Scrollen für von oben-nach-unten-Sprachen (wie Japanisch)
  • Ausgenommen Teile des Inhalts, die ein zweidimensionales Layout für Nutzung oder Bedeutung erfordern (wie eine große Datentabelle)
 Umbruch 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 erfolgt kein Verlust an Inhalt oder Funktionalität, wenn die folgenden Stile angewendet werden:

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

Während zusätzlicher Inhalt erscheinen und verschwinden kann, wenn Hovern und Tastaturfokus verwendet wird, spezifiziert dieses Erfolgskriterium drei Bedingungen, die erfüllt werden müssen:

  • entfernen lassen (kann geschlossen/entfernt werden)
  • hoverbar (der zusätzliche Inhalt verschwindet nicht, wenn der Zeiger darüber ist)
  • beständig (der zusätzliche Inhalt verschwindet nicht ohne Benutzeraktion)
 Inhalt bei Hover oder Fokus verstehen

Hinweis: Siehe auch die WCAG-Beschreibung zur Richtlinie 1.4: Unterscheidbar: Es den Benutzern erleichtern, Inhalte zu sehen und zu hören, indem Vordergrund und Hintergrund getrennt werden.

Siehe auch