Wahrnehmbar

Dieser Artikel bietet praktische Ratschläge, wie Sie Ihre Webinhalte so schreiben, dass sie den Erfolgskriterien des Wahrnehmbar-Prinzips der Web Content Accessibility Guidelines (WCAG) 2.0 und 2.1 entsprechen. Wahrnehmbar bedeutet, dass Benutzer in der Lage sein müssen, es in irgendeiner Weise zu erfassen, indem sie einen oder mehrere ihrer Sinne verwenden.

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

Richtlinie 1.1 — Bereitstellung von Textalternativen für nicht-textliche Inhalte

Hierbei ist der entscheidende Punkt, dass Text in andere Formen umgewandelt werden kann, die Menschen mit Behinderungen nutzen können. Beispielsweise kann er von einem Bildschirmlesegerät gesprochen, in Großdruck umgewandelt oder auf einer Braille-Anzeige dargestellt werden. Nicht-textliche Inhalte beziehen sich auf Multimedia wie Bilder, Audio und Video.

Erfolgskriterien Wie den Kriterien entsprechen Praktische Ressource
1.1.1 Bereitstellung von Textequivalenten (A) Allen Bildern, die bedeutungsvolle Inhalte vermitteln, sollte geeigneter alternativer Text zugeordnet werden. 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-Attributes.

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 Identifizierung haben, wie etwa eine Bildunterschrift oder Ähnliches.

Siehe Textalternativen für statische Beschriftungsoptionen, 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.
Implementieren Sie dekorative (nicht inhaltsrelevante) Bilder, Videos usw. derart, dass sie für assistive 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 einen leeren alt-Text (alt=""). Andernfalls könnten Bildschirmlesegeräte versuchen, den Dateipfad usw. vorzulesen.

Wenn Sie Hintergrundvideo oder -audio einfügen, das automatisch abgespielt wird, gestalten Sie es so unauffällig wie möglich. Lassen Sie es nicht wie Inhalt aussehen/klingen und bieten Sie eine Steuerung zum Ausschalten an. Idealerweise sollte es gar nicht erst eingefügt werden.

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 Sie, wenn das Audio/Video als Alternative zu bereits vorhandenem Textinhalt dient, keine weitere Textalternative bereitstellen müssen.

Erfolgskriterien Wie den Kriterien entsprechen Praktische Ressource
1.2.1 Bereitstellung von Alternativen für vorab aufgezeichnete Audio- und Video-Inhalte (A) Ein Transkript sollte für vorab aufgezeichnete nur-Audio-Medien bereitgestellt werden, und ein Transkript oder eine Audiobeschreibung sollten für vorab aufgezeichnete nur-Video-Medien (d.h. stumme Videos) bereitgestellt werden. Siehe Audio-Transkripte für Informationen zu Transkripten. Es steht noch kein Tutorial zur Audiobeschreibung zur Verfügung.
1.2.2 Bereitstellung von Untertiteln für webbasierte Videos (A) Sie sollten Untertitel für Videos bereitstellen, die im Web präsentiert werden (z. B. HTML-Video). Dies ist zum Vorteil von Menschen, die den Audio-Teil des Videos nicht hören können. Siehe Video-Textspuren für HTML-Video-Untertitel. Siehe auch Hinzufügen Ihrer eigenen Untertitel & geschlossenen Untertitel (YouTube).
1.2.3 Bereitstellung von Texttranskripten oder Audiobeschreibungen für webbasierte Videos (A) Sie sollten Texttranskripte oder Audiobeschreibungen für im Web vorgestellte Videos bereitstellen (z. B. HTML-Video). Dies ist zum Vorteil von Personen, die den visuellen Teil des Videos nicht sehen können und den vollständigen Inhalt nicht allein aus dem Audio erhalten. Siehe Audio-Transkripte für Informationen zu Transkripten. Es steht noch kein Tutorial zur Audiobeschreibung zur Verfügung.
1.2.4 Bereitstellung von Untertiteln für Live-Audio (AA) Sie sollten synchronisierte Untertitel für alle Live-Multimedia bereitstellen, die Audio enthalten (z. B. Videokonferenzen, Live-Audioübertragungen).
1.2.5 Bereitstellung von Audiobeschreibungen für vorab aufgezeichnete Videos (AA) Audiobeschreibungen sollten für vorab aufgezeichnete Videos bereitgestellt werden, jedoch nur dort, wo das vorhandene Audio nicht die volle Bedeutung ausdrückt, die durch das Video vermittelt wird.
1.2.6 Bereitstellung eines Gebärdensprachäquivalents für vorab aufgezeichnete Audios (AAA) Für alle vorab aufgezeichneten Inhalte mit Audio sollte ein entsprechendes Gebärdensprachvideo bereitgestellt werden.
1.2.7 Bereitstellung erweiterter Videos mit Audiobeschreibungen (AAA) Wo Audiobeschreibungen nicht bereitgestellt werden können (siehe 1.2.5) aufgrund von Videotimingproblemen (z. B. gibt es keine geeigneten Pausen im Inhalt, in denen 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 Bereitstellung 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 Films, den Sie sehen. Dies ist zum Vorteil für hörgeschädigte Zuschauer, die den Inhalt nicht hören können. Siehe Audio-Transkripte für Informationen zu Transkripten.
1.2.9 Bereitstellung eines Transkripts für Live-Audio (AAA) Für alle Live-Audio-Inhalte, die übertragen werden, sollte ein beschreibender Text bereitgestellt werden, zum Beispiel ein Skript des Stücks oder der Musik, die Sie hören. Dies ist zum Vorteil für hörgeschädigte 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: Alternativen für zeitbasierte Medien bereitstellen.

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

Diese Richtlinie bezieht sich auf die Fähigkeit, dass Inhalte von Benutzern auf verschiedene Weise konsumiert werden können, um ihren unterschiedlichen Bedürfnissen gerecht zu werden.

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

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

  • Textbeschriftungen und die Formularelemente, die sie beschreiben. Diese sind eindeutig mit dem <label>-Element verknüpft, das von Bildschirmlesegeräten usw. erkannt werden kann.
  • Bild-alt-Text. Inhaltsbilder sollten Text zur Verfügung haben, der die Inhalte des Bildes klar beschreibt und der programmgesteuert damit verknüpft werden kann (z. B. als alt-Text) oder ansonsten leicht zuzuordnen ist (z. B. beschreibt es und steht direkt daneben). Dies sollte bedeuten, dass die volle Bedeutung auch dann noch erfasst 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 mit Informationen darüber vollgepackt, aber Sie sollten sich insbesondere auf Gute Semantik, UI-Steuerelemente, und Textalternativen beziehen.

1.3.2 Bedeutende Inhaltsreihenfolge (A) Eine nachvollziehbare, logische Lesereihenfolge sollte für jeden Inhalt leicht zu bestimmen sein, auch wenn er visuell auf ungewöhnliche Weise präsentiert wird. Die Reihenfolge sollte durch die Verwendung korrekter semantischer Elemente (z. B. Überschriften, Absätze) offensichtlich gemacht werden, wobei CSS verwendet wird, um jegliche ungewöhnlichen Layoutstile zu erstellen, unabhängig von der Auszeichnung. Wiederum verweisen Sie 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 verlassen sich nicht auf einen einzigen Sinn. Dies kann für Menschen mit einer Behinderung im Zusammenhang mit diesem Sinn oder einem Gerät, das diesen Sinn nicht unterstützt, unzugänglich sein. Zum Beispiel:

  • "Klicken Sie auf die runde Schaltfläche zum Fortfahren"
    Die Schaltfläche sollte klar beschriftet sein, sodass offensichtlich ist, dass es die Schaltfläche ist, die Sie drücken müssen. Wenn es mehrere Schaltflächen gibt, stellen Sie sicher, dass alle klar beschriftet sind, um ihre Funktion zu unterscheiden.
  • "Hören Sie sich die Audio-Anweisungen zur Anleitung an"
    Dies ist offensichtlich problematisch – Audio wird für Menschen mit Hörbehinderungen unzugänglich sein, während Text gelesen, aber auch bei Bedarf von einem Bildschirmlesegerät gesprochen werden kann.
  • "Wischen Sie vom rechten Bildschirmrand, um das Menü anzuzeigen"
    Einige Benutzer können möglicherweise nicht vom Bildschirm wischen, entweder aufgrund einer Behinderung oder weil ihr Gerät keine Berührung unterstützt. Eine Alternative sollte bereitgestellt werden, wie eine Tastenkombination oder eine Schaltfläche, die mit der Tastatur oder auf andere Weise aktiviert werden kann.

Hinweis: Anweisungen ausschließlich durch Farben zu vermitteln, ist damit verwandt, wird aber in einer anderen Richtlinie behandelt — 1.4.1.

1.3.4 Ausrichtung (AA) hinzugefügt in 2.1 Inhalte beschränken ihre Ansicht und Bedienung nicht auf eine einzelne Anzeigeausrichtung wie Hoch- oder Querformat, es sei denn, eine bestimmte Anzeigeausrichtung ist wesentlich.

Verständnis zur Ausrichtung

1.3.5 Eingabezweck identifizieren (AA) hinzugefügt in 2.1

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

Verständnis zur Identifikation des Eingabezwecks
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 Bereichen programmgesteuert bestimmt werden. Verständnis zur Identifikation des Zwecks

Hinweis: Siehe auch die WCAG-Beschreibung für Richtlinie 1.3: Anpassungsfähig: Erstellen Sie Inhalte, die auf unterschiedliche Weise präsentiert werden können, ohne Informationen oder Struktur zu verlieren.

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

Diese Richtlinie bezieht sich darauf, sicherzustellen, dass Hauptinhalte leicht von Hintergründen und anderen Dekorationen unterscheidbar sind. Ein klassisches Beispiel sind Farben (sowohl Farbkontrast als auch Verwendung von Farben, um Anweisungen zu vermitteln), aber es gilt auch in anderen Situationen.

Erfolgskriterien Wie den Kriterien entsprechen Praktische Ressource
1.4.1 Verwendung von Farben (A)

Auf Farbe sollte nicht ausschließlich vertraut werden, um Informationen zu vermitteln. Beispielsweise sollten Sie in Formularen niemals erforderliche Felder nur mit einer Farbe (wie Rot) kennzeichnen. Stattdessen (oder zusätzlich) wäre etwas wie ein Sternchen mit einem Label "erforderlich" angemessener.

Siehe Verwendung von Farben, Farbe und Farbkontrast, und Mehrere Labels.
1.4.2 Audiokontrollen (A) Für alle Audioinhalte, die länger als drei Sekunden abspielen, stellen Sie zugängliche Steuerelemente bereit, um das Audio/Video abzuspielen und anzuhalten sowie die Lautstärke stumm zu schalten/anzupassen. Verwenden Sie native <button>, um zugängliche Tastatursteuerungen bereitzustellen, wie gezeigt in Grundlagen zur Videoplayer-Stilierung.
1.4.3 Mindestkontrast (AA)

Der Farbkontrast zwischen Hintergrund und Vordergrundinhalten sollte ein Mindestmaß haben, um Lesbarkeit sicherzustellen:

  • Text und sein Hintergrund sollten einen Kontrastverhältnis von mindestens 4,5:1 haben.
  • Überschriftstext (oder einfach größerer Text) sollte ein Verhältnis von mindestens 3:1 haben. Größerer Text ist als mindestens 18pt oder 14pt fett definiert.
Siehe Farbkontrast und Farbe und Farbkontrast.
1.4.4 Text vergrößerbar (AA) Die Seite sollte lesbar und nutzbar sein, wenn die Textgröße verdoppelt wird. Das bedeutet, dass Designs reaktionsfähig sein sollten, sodass der Inhalt, auch wenn die Textgröße vergrößert wird, weiterhin zugänglich ist.
1.4.5 Bilder von Text (AA) Bilder sollten NICHT verwendet werden, um Inhalte darzustellen, wenn Text die Aufgabe erfüllen würde. Zum Beispiel, wenn ein Bild hauptsächlich textuell ist, könnte es mit Text sowie Bildern dargestellt werden.
1.4.6 Erweiterter Kontrast (AAA)

Dies folgt und baut auf Kriterium 1.4.3 auf.

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

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

  • Vordergrund- und Hintergrundfarben sollten vom Benutzer auswählbar sein.
  • Textblöcke sollten nicht breiter als 80 Zeichen (oder Glyphen) sein, für maximale Lesbarkeit.
  • Text sollte nicht vollständig ausgerichtet sein (z. B. text-align: justify;).
  • Zeilenhöhe sollte mindestens das 1,5-fache der Textgröße innerhalb von Absätzen sein (z. B. line-height: 1.5;), und mindestens das 2,25-fache der Textgröße zwischen Absätzen (z. B. padding: 2.25rem;).
  • Wenn die Textgröße verdoppelt wird, sollte der Inhalt nicht scrollen müssen.
1.4.9 Bilder von Text (Keine Ausnahme) (AAA) Text sollte nicht als Teil eines Bildes präsentiert werden, es sei denn, er ist rein dekorativ (d.h. er vermittelt keine Inhalte) oder kann nicht auf andere Weise dargestellt werden.
1.4.10 Umbruch (AA) hinzugefügt in 2.1
  • Kein horizontales Scrollen für von links nach rechts geschriebene Sprachen (wie Englisch) oder von rechts nach links geschriebene Sprachen (wie Arabisch)
  • Kein vertikales Scrollen für von oben nach unten geschriebene Sprachen (wie Japanisch)
  • Ausgenommen sind Teile des Inhalts, die ein zweidimensionales Layout für die Nutzung oder Bedeutung erfordern (wie eine große Datentabelle)
Verständnis von Umbruch
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 Textabstände (AA) hinzugefügt in 2.1

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

  • Zeilenhöhe (Zeilenabstand) auf mindestens 1,5-fache der Schriftgröße
  • Abstand nach Absätzen auf mindestens 2-fache der Schriftgröße
  • Zeichenabstand (Laufweite) auf mindestens 0,12-fache der Schriftgröße
  • Wortabstand auf mindestens 0,16-fache der Schriftgröße
Verständnis von Textabständen
1.4.13 Inhalt bei Fokus oder Hover (AA) hinzugefügt in 2.1

Während zusätzlicher Inhalt in Koordination mit Hover und Tastaturfokus erscheinen und verschwinden kann, spezifiziert dieses Erfolgskriterium drei Bedingungen, die erfüllt werden müssen:

  • ausblendbar (kann geschlossen/entfernt werden)
  • hovering-fähig (der zusätzliche Inhalt verschwindet nicht, wenn der Zeiger darüber ist)
  • persistent (der zusätzliche Inhalt verschwindet nicht ohne Benutzereingriff)
Verständnis von Inhalt bei Fokus oder Hover

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

Siehe auch