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 in irgendeiner Weise wahrzunehmen, indem sie einen oder mehrere ihrer Sinne nutzen.

Hinweis: Um die W3C-Definitionen für Wahrnehmbar sowie die entsprechenden Richtlinien und Erfolgskriterien zu lesen, besuchen Sie Prinzip 1: Wahrnehmbar - Informationen und Benutzeroberflächenkomponenten müssen in einer Weise bereitgestellt werden, die für Benutzer wahrnehmbar ist.

Leitfaden 1.1 — Bereitstellen von Textalternativen für Nicht-Text-Inhalte

Der Schlüssel hier ist, dass Text in andere Formen umgewandelt werden kann, die Menschen mit Behinderungen nutzen können. Beispielsweise kann er von einem Screenreader gesprochen, in Großdruck umgewandelt oder auf einem Brailledisplay dargestellt werden. Nicht-Text-Inhalte bezieht sich auf Multimedia wie Bilder, Audio und Video.

Erfolgskriterien Wie man den Kriterien entspricht Praktische Ressource
1.1.1 Bereitstellen von Textequivalenten (A) Alle Bilder, die inhaltlich bedeutsam sind, sollten geeignete alternative Texte haben. Textalternativen.
Komplexe Bilder oder Diagramme sollten eine zugängliche Alternative haben, entweder auf derselben Seite oder über einen Link. Verwenden Sie einen regulären Link anstelle eines longdesc-Attributs.

Eine Textbeschreibung kann hilfreich sein, oder eine zugängliche Datentabelle (siehe HTML-Tabelle: Barrierefreiheit). Siehe W3Cs Image Description Extension (longdesc) für das Argument gegen longdesc.

Multimedia-Inhalte (z. B. Audio oder Video) sollten zumindest eine beschreibende Kennzeichnung haben, wie z. B. eine Untertitel oder Ähnliches.

Siehe Textalternativen für statische Untertitel-Optionen, 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>). Für weitere Informationen zu anderen UI-Steuerelementen, siehe UI-Steuerelemente.
Dekorative (nicht inhaltliche) Bilder, Videos usw. sollten so implementiert werden, dass sie von unterstützenden Technologien unsichtbar sind, damit sie 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 versuchen Screenreader möglicherweise, den Dateipfad auszugeben usw.

Wenn Sie Hintergrundvideo oder -audio, das automatisch abgespielt wird, einschließen, machen Sie es so unauffällig wie möglich. Es sollte nicht wie Inhalt aussehen/klingen, und ein Steuerungselement zur Deaktivierung bereitstellen. Idealerweise gar nicht einfügen.

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

Leitfaden 1.2 — Bereitstellen 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 vorhandenem Textinhalt dient, Sie keine weitere Textalternative bereitstellen müssen.

Erfolgskriterien Wie man den Kriterien entspricht Praktische Ressource
1.2.1 Bereitstellen von Alternativen für vorab aufgezeichnete Audio- und Video-Inhalte (A) Für vorab aufgezeichnete reine Audio-Medien sollte ein Transkript bereitgestellt werden, und für vorab aufgezeichnete reine Video-Medien (d. h. stummes Video) sollte ein Transkript oder eine Audiobeschreibung bereitgestellt werden. Siehe Audio-Transkripte für Transkriptinformationen. Es ist noch kein Tutorial zur Audiobeschreibung verfügbar.
1.2.2 Bereitstellen von Untertiteln für webbasierte Videos (A) Sie sollten Untertitel für auf dem Web präsentierte Videos bereitstellen (z. B. HTML-Video). Dies dient dem Nutzen von Menschen, die den Audio-Teil des Videos nicht hören können. Siehe Video-Textspuren für HTML-Video-Untertitel. Siehe auch Eigene Untertitel & geschlossene Untertitel hinzufügen (YouTube).
1.2.3 Bereitstellen von Texttranskripten oder Audiobeschreibungen für webbasierte Videos (A) Sie sollten Texttranskripte oder Audiobeschreibungen für auf dem Web präsentierte Videos bereitstellen (z. B. HTML-Video). Dies dient dem Nutzen von Menschen, die den visuellen Teil des Videos nicht sehen können und den gesamten Inhalt nicht nur aus dem Audio entnehmen. Siehe Audio-Transkripte für Transkriptinformationen. Es ist noch kein Tutorial zur Audiobeschreibung verfügbar.
1.2.4 Bereitstellen von Untertiteln für Live-Audio (AA) Sie sollten synchronisierte Untertitel für alle Live-Multimedia-Inhalte bereitstellen, die Audio enthalten (z. B. Videokonferenzen, Live-Audio-Übertragungen).
1.2.5 Bereitstellen von Audiobeschreibungen für vorab aufgezeichnete Videos (AA) Audiobeschreibungen sollten für vorab aufgezeichnete Videos bereitgestellt werden, jedoch nur, wenn das bestehende Audio nicht die volle Bedeutung des Videos vermittelt.
1.2.6 Bereitstellen eines Gebärdensprachäquivalents zu vorab aufgezeichnetem Audio (AAA) Ein äquivalentes Gebärdensprachvideo sollte für jegliche vorab aufgezeichnete Inhalte bereitgestellt werden, die Audio enthalten.
1.2.7 Bereitstellen eines erweiterten Videos mit Audiobeschreibungen (AAA) Wo aufgrund von Videotiming-Problemen keine Audiobeschreibungen bereitgestellt werden können (siehe 1.2.5), sollte eine alternative Version des Videos bereitgestellt werden, die Pausen beinhaltet, in die Audiobeschreibungen eingefügt werden können.
1.2.8 Bereitstellen einer Alternative für vorab aufgezeichnete Medien (AAA) Für alle Inhalte, die Video enthalten, sollte ein beschreibendes Texttranskript bereitgestellt werden, zum Beispiel ein Skript des Filmes, den Sie ansehen. Dies dient dem Nutzen der hörgeschädigten Zuschauer, die den Inhalt nicht hören können. Siehe Audio-Transkripte für Transkriptinformationen.
1.2.9 Bereitstellen eines Transkripts für Live-Audio (AAA) Für jegliche Live-Audioinhalte, die übertragen werden, sollte ein beschreibender Text bereitgestellt werden, zum Beispiel ein Skript des Stücks oder Musicals, das Sie hören. Dies dient dem Nutzen der hörgeschädigten Zuschauer, die den Inhalt nicht hören können. Siehe Audio-Transkripte für Transkriptinformationen.

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

Leitfaden 1.3 — Erstellen von Inhalten, die auf unterschiedliche Weise präsentiert werden können

Dieser Leitfaden bezieht sich auf die Fähigkeit von Inhalten, von Benutzern auf verschiedene Weisen konsumiert zu werden, um ihren unterschiedlichen Bedürfnissen gerecht zu werden.

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

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

  • Textbeschriftungen und die Formularelemente, die sie beschreiben. Diese sind unmissverständlich mit dem <label> verbunden, welches von Screenreadern usw. erkannt wird.
  • Alt-Text für Bilder. Inhaltliche Bilder sollten über einen Text verfügen, der den Inhalt des Bildes klar beschreibt und programmgesteuert ihm zugeordnet werden kann (z. B. alt-Text), oder der anderweitig leicht zuzuordnen ist (z. B. es beschreibt und befindet sich direkt daneben). Dies sollte bedeuten, dass die vollständige Bedeutung auch dann abgeleitet werden kann, wenn Sie das Bild nicht sehen können.
  • Listen. Wenn die Reihenfolge der Listenelemente wichtig ist, verwenden Sie eine geordnete Liste (<ol>).
Der gesamte

HTML: Eine gute Grundlage für Barrierefreiheit ist voll mit Informationen zu diesem Thema, aber Sie sollten insbesondere auf Gute Semantik, UI-Steuerelemente, und Textalternativen achten.

1.3.2 Sinnvolle Inhaltsfolge (A) Eine sinnvolle, logische Leseabfolge sollte für jeden Inhalt einfach zu bestimmen sein, auch wenn dieser visuell in ungewöhnlicher Weise präsentiert wird. Die Reihenfolge sollte durch die Verwendung korrekter semantischer Elemente (z. B. Überschriften, Absätze) deutlich gemacht werden, wobei CSS verwendet wird, um jede ungewöhnliche Layout-Stilart zu erstellen, unabhängig vom Markup. Auch hier referenzieren Sie HTML: Eine gute Grundlage für Barrierefreiheit.
1.3.3 Sensorische Merkmale (A)

Anweisungen zum Bedienen von Steuerelementen oder zum Verstehen von Inhalten hängen nicht von einem einzigen Sinn ab. Dies kann für Menschen mit einer Behinderung in Bezug auf diesen Sinn oder ein Gerät, das diesen Sinn nicht unterstützt, unzugänglich sein. So zum Beispiel:

  • "Klicken Sie auf die runde Schaltfläche, um fortzufahren"
    Die Schaltfläche sollte klar beschriftet sein, sodass offensichtlich ist, dass es sich um die Schaltfläche handelt, die gedrückt werden muss. Wenn es mehrere Schaltflächen gibt, stellen Sie sicher, dass sie alle deutlich beschriftet sind, um ihre Funktion zu unterscheiden.
  • "Hören Sie sich die Audioanweisungen an, um Anleitung zu bekommen"
    Dies ist offensichtlich problematisch—Audio wird für Menschen mit Hörbehinderungen unzugänglich sein, während Text gelesen, aber auch von einem Screenreader gesprochen werden kann, falls erforderlich.
  • "Wischen Sie vom rechten Bildschirmrand, um das Menü anzuzeigen"
    Einige Benutzer können möglicherweise nicht den Bildschirm wischen, entweder aufgrund einer Behinderung oder weil ihr Gerät keine Berührung unterstützt. Es sollte eine Alternative bereitgestellt werden, wie z. B. eine Tastaturverknüpfung oder eine Schaltfläche, die per Tastatur oder auf andere Weise aktiviert werden kann.

Hinweis: Eine Zuweisung von Anweisungen ausschließlich über Farben ist verwandt, wird jedoch in einem anderen Leitfaden behandelt — 1.4.1.

1.3.4 Orientierung (AA) hinzugefügt in 2.1 Inhalte schränken ihre Ansicht und Bedienung nicht auf eine einzige Ausrichtung ein, wie z. B. Hoch- oder Querformat, es sei denn, eine bestimmte Anzeigeausrichtung ist unabdingbar.

Verständnis der Orientierung

1.3.5 Eingabebedeutung identifizieren (AA) hinzugefügt in 2.1

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

Verständnis der Eingabebedeutung
1.3.6 Zweck identifizieren (AAA) hinzugefügt in 2.1 In Inhalten, die mit Auszeichnungssprachen implementiert wurden, kann der Zweck von Benutzeroberflächenkomponenten, Symbolen und Regionen programmgesteuert bestimmt werden. Verständnis des Zwecks

Hinweis: Siehe auch die WCAG-Beschreibung für Leitfaden 1.3: Anpassen: Erstellen von Inhalten, die auf unterschiedliche Weise präsentiert werden können, ohne Informationen oder Struktur zu verlieren.

Leitfaden 1.4: Erleichtern Sie es den Benutzern, Inhalte zu sehen und zu hören, indem Sie den Vordergrund vom Hintergrund trennen

Dieser Leitfaden bezieht sich auf die Sicherstellung, dass der Kerninhalt leicht vom Hintergrund und anderen Dekorationen zu unterscheiden ist. Das klassische Beispiel ist Farbe (sowohl Farbkontrast als auch Verwendung von Farbe zur Vermittlung von Anweisungen), aber es gilt auch in anderen Situationen.

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

Farbe sollte nicht ausschließlich verwendet werden, um Informationen zu vermitteln. Zum Beispiel sollten in Formularen erforderliche Felder niemals nur mit einer Farbe (wie Rot) markiert werden. Stattdessen wären (oder zusätzlich) etwas wie ein Sternchen mit einer Beschriftung "erforderlich" angemessen.

Siehe Verwendung von Farbe, Farbe und Farbkontrast, und Mehrere Beschriftungen.
1.4.2 Audiosteuerung (A) Für jede Audioausgabe, die länger als drei Sekunden abgespielt wird, stellen Sie zugängliche Steuerungen zum Abspielen und Pausieren von Audio/Video sowie zum Stummschalten/Anpassen der Lautstärke bereit. Verwenden Sie native <button>s, um zugängliche Tastatursteuerungen bereitzustellen, wie in Grundlagen der Videoplayer-Gestaltung.
1.4.3 Minimalkontrast (AA)

Der Farbkontrast zwischen Hintergrund und Vordergrundinhalten sollte ein Mindestniveau erreichen, um die Lesbarkeit zu gewährleisten:

  • Text und Hintergrund sollten ein Kontrastverhältnis von mindestens 4,5:1 haben.
  • Überschriftstext (oder nur 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 Textgröße ändern (AA) Die Seite sollte lesbar und nutzbar sein, wenn sich die Textgröße verdoppelt. Das bedeutet, dass das Design reaktionsfähig sein sollte, sodass bei einer erhöhten Textgröße der Inhalt dennoch zugänglich ist.
1.4.5 Bilder von Text (AA) Bilder sollten NICHT verwendet werden, um Inhalte zu präsentieren, wenn Text die Aufgabe erledigen würde. Zum Beispiel, wenn ein Bild hauptsächlich aus Text besteht, könnte es mit Text sowie Bildern dargestellt werden.
1.4.6 Verbesserter Kontrast (AAA)

Dies folgt und baut auf Kriterium 1.4.3 auf.

  • Text und Hintergrund sollten ein Kontrastverhältnis von mindestens 7:1 haben.
  • Überschriftstext (oder nur 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 Geringes oder kein Hintergrundaudio (AAA) Vorab aufgezeichnete Audioaufnahmen, die hauptsächlich Sprache beinhalten, sollten minimiertes Hintergrundrauschen haben, damit der Inhalt leicht verständlich ist.
1.4.8 Visuelle Präsentation (AAA)

Die folgende Darstellung von Textinhalten sollte zutreffen:

  • Vorder- und Hintergrundfarben sollten benutzerauswählbar sein.
  • Textblöcke sollten maximal 80 Zeichen (oder Glyphen) breit sein, um maximale Lesbarkeit zu erzielen.
  • Text sollte nicht vollständig gerechtfertigt sein (z. B. text-align: justify;).
  • Der Zeilenabstand sollte innerhalb von Absätzen mindestens das 1,5-fache der Textgröße betragen (z. B. line-height: 1.5;), und zwischen Absätzen mindestens das 2,25-fache der 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 dargestellt werden, es sei denn, es ist rein dekorativ (d. h. es vermittelt keinen Inhalt) oder kann auf keine andere Weise dargestellt werden.
1.4.10 Umbruch (AA) hinzugefügt in 2.1
  • Kein horizontales Scrollen für von links nach rechts lesende Sprachen (wie Englisch) oder von rechts nach links lesende Sprachen (wie Arabisch)
  • Kein vertikales Scrollen für von oben nach unten lesende Sprachen (wie Japanisch)
  • Außer für Teile des Inhalts, die ein zweidimensionales Layout zur Nutzung oder Bedeutung erfordern (wie eine große Datentabelle)
 Verständnis des Umbruchs
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. Verständnis von Nicht-Text-Kontrast
1.4.12 Textabstand (AA) hinzugefügt in 2.1

Kein Informationsverlust oder Funktionsverlust tritt auf, wenn die folgenden Stile angewendet werden:

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

Während zusätzlicher Inhalt in Abstimmung mit Hover und Keyboard-Fokus angezeigt und ausgeblendet werden kann, spezifiziert dieses Erfolgskriterium drei Bedingungen, die erfüllt werden müssen:

  • entfernbar (kann geschlossen/entfernt werden)
  • hoverbar (der zusätzliche Inhalt verschwindet nicht, wenn das Zeigegerät darüber ist)
  • persistent (der zusätzliche Inhalt verschwindet nicht ohne Benutzeraktion)
 Verständnis von Inhalt bei Hover oder Fokus

Hinweis: Siehe auch die WCAG-Beschreibung für Leitfaden 1.4: Unterscheidbar: Erleichtern Sie es den Benutzern, Inhalte zu sehen und zu hören, indem Sie den Vordergrund vom Hintergrund trennen.

Siehe auch