Wahrnehmbar

Dieser Artikel bietet praktische Ratschläge dazu, wie Sie Ihre Webinhalte so schreiben, dass sie den Erfolgsrichtlinien entsprechen, die im Wahrnehmbar-Prinzip der Web Content Accessibility Guidelines (WCAG) 2.0 und 2.1 umrissen sind. Wahrnehmbar bedeutet, dass Nutzer in der Lage sein müssen, die Inhalte mit einem oder mehreren ihrer Sinne wahrzunehmen.

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 Nutzern auf eine Weise dargestellt werden, die sie wahrnehmen können.

Richtlinie 1.1 — Bereitstellung von Textalternativen für nicht-textuellen Inhalt

Der Schlüssel hier ist, dass Text in andere Formen umgewandelt werden kann, die Menschen mit Behinderungen verwenden können. Beispielsweise kann er von einem Bildschirmleseprogramm gesprochen, in Großdruck umgewandelt oder auf einem Braille-Display dargestellt werden. Nicht-textueller Inhalt bezieht 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 bedeutungsvollen Inhalt enthalten, sollten mit geeigneten Alternativtexten versehen werden. Textalternativen.
Komplexe Bilder oder Diagramme sollten über eine zugängliche Alternative verfügen, 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 über eine beschreibende Identifikation verfügen, wie eine Untertitelung oder Ähnliches.

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

UI-Steuerelemente wie Formularelemente und Schaltflächen sollten Textlabels 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 Verwenden Sie semantische UI-Steuerelemente, wo möglich.
Implementieren Sie dekorative (nicht-inhaltliche) Bilder, Videos usw. auf eine Weise, die für unterstützende Technologien unsichtbar ist, um Verwirrung bei den Nutzern zu vermeiden.

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 versuchen Screenreader möglicherweise, den Dateipfad usw. vorzulesen.

Wenn Sie Hintergrundvideo oder -audio einfügen, das automatisch abgespielt wird, stellen Sie sicher, dass es so unauffällig wie möglich ist. Vermeiden Sie, es wie Inhalt aussehen/klingen zu lassen, und bieten Sie eine Steuerung an, es auszuschalten. Idealerweise sollten Sie es überhaupt nicht einfügen.

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 Videoinhalte. Beachten Sie, dass, wenn die Audio/Video Inhalte als Alternative zu bestehenden Textinhalten dienen, Sie keine weitere Textalternative bereitstellen müssen.

Erfolgskriterien Wie man den Kriterien entspricht Praktische Ressource
1.2.1 Alternativen für vorab aufgezeichnete Audio- und Video-Only-Inhalte bereitstellen (A) Für vorab aufgezeichnete Audio-Only-Medien sollte ein Transkript bereitgestellt werden, und für vorab aufgezeichnete Video-Only-Medien (d.h. stummes Video) sollte ein Transkript oder eine Audiobeschreibung bereitgestellt werden. Siehe Audio-Transkripte für Transkriptinformationen. Es gibt noch keine Audiobeschreibung-Tutorial.
1.2.2 Bereitstellung von Untertiteln für webbasierte Videos (A) Sie sollten Untertitel für im Web präsentierte Videos (z.B. HTML-Video) bereitstellen. Dies kommt Personen zugute, die den Audioteil des Videos nicht hören können. Siehe Video-Textspuren für HTML-Video-Untertitel. Siehe auch Hinzufügen eigener Untertitel & geschlossener Untertitel (YouTube).
1.2.3 Texttranskript oder Audiobeschreibung für webbasierte Videos bereitstellen (A) Sie sollten Texttranskripte oder Audiobeschreibungen für im Web präsentierte Videos bereitstellen (z.B. HTML-Video). Dies kommt Personen zugute, die den visuellen Teil des Videos nicht sehen können und den vollen Inhalt nicht allein aus dem Audio erhalten. Siehe Audio-Transkripte für Transkriptinformationen. Es gibt noch kein Audiobeschreibung-Tutorial.
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, wenn das vorhandene Audio nicht die volle Bedeutung des Videos vermittelt.
1.2.6 Bereitstellung einer Gebärdensprache-Äquivalenz für vorab aufgezeichnetes Audio (AAA) Ein gleichwertiges Gebärdensprachenvideo sollte für alle vorab aufgezeichneten Inhalte bereitgestellt werden, die Audio enthalten.
1.2.7 Bereitstellung eines erweiterten Videos mit Audiobeschreibungen (AAA) Wo Audiobeschreibungen nicht bereitgestellt werden können (siehe 1.2.5) aufgrund von Timing-Problemen im Video (z.B. es gibt keine geeigneten Pausen im Inhalt, um die Audiobeschreibungen einzufügen), 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 Drehbuch des Films, den Sie ansehen. Dies kommt hörgeschädigten Zuschauern zugute, die den Inhalt nicht hören können. Siehe Audio-Transkripte für Transkriptinformationen.
1.2.9 Bereitstellung eines Transkripts für Live-Audio (AAA) Für alle Live-Audi-Inhalte, die gesendet werden, sollte ein beschreibender Text bereitgestellt werden, zum Beispiel ein Drehbuch des Stücks oder Musicals, das Sie hören. Dies kommt hörgeschädigten Zuschauern zugute, die den Inhalt nicht hören können. Siehe Audio-Transkripte für Transkriptinformationen.

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 verschiedene Weise präsentiert werden können

Diese Richtlinie bezieht sich auf die Fähigkeit der Inhalte, von Nutzern auf vielfältige Weise konsumiert zu werden, um ihren unterschiedlichen Bedürfnissen entgegenzukommen.

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 werden, oder aus der Textbeschreibung abgeleitet werden. Die Hauptsituationen, in denen dies relevant ist, sind:

  • Text Labels und die Formular-Elemente, die sie beschreiben. Diese sind eindeutig mit dem <label>-Element verbunden, welches von Screenreadern, usw. erkannt werden kann.
  • Bild-alt-Text. Inhaltsbilder sollten über Text verfügen, der den Bildinhalt deutlich beschreibt und programmatisch damit verbunden werden kann (z.B. alt-Text) oder anderweitig leicht zuzuordnen ist (z.B. es beschreibt das Bild und befindet sich direkt daneben). Dies sollte bedeuten, dass die vollständige Bedeutung auch dann noch verstanden werden kann, 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 mit Informationen darüber gefüllt, aber Sie sollten besonders darauf achten Gute Semantik, Verwenden Sie semantische UI-Steuerelemente, wo möglich, und Textalternativen.

1.3.2 Sinnvolle Inhaltsreihenfolge (A) Eine sinnvolle, logische Lesereihenfolge sollte für alle Inhalte leicht erkennbar sein, auch wenn sie auf ungewöhnliche Weise visuell dargestellt werden. Die Reihenfolge sollte durch die Verwendung der richtigen semantischen Elemente (z.B. Überschriften, Absätze) deutlich gemacht werden, wobei CSS verwendet wird, um ungewöhnliche Layoutstile zu erstellen, unabhängig von der Markup-Sprache. Auch hier, beachten Sie 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 kann sich als unzugänglich für Menschen erweisen, die eine Behinderung im Zusammenhang mit diesem Sinn haben, oder für Geräte, die diesen Sinn nicht unterstützen. 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 Sie drücken müssen. Wenn es mehrere Schaltflächen gibt, stellen Sie sicher, dass alle klar beschriftet sind, um deren Funktion zu unterscheiden.
  • "Hören Sie sich die Audioanweisungen zur Orientierung an"
    Das ist offensichtlich problematisch—Audio wird für Menschen mit Hörbeeinträchtigungen unzugänglich, während Text gelesen werden kann und, falls erforderlich, auch von einem Screenreader gesprochen werden kann.
  • "Wischen Sie von der rechten Seite des Bildschirms, um das Menü anzuzeigen"
    Einige Nutzer können möglicherweise nicht über den 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 über eine Tastatur oder andere Mittel aktiviert werden kann.

Hinweis: Übermittlung von Anweisungen allein durch Farbe ist damit verwandt, jedoch in einer anderen Richtlinie behandelt — 1.4.1.

1.3.4 Orientierung (AA) Inhalt beschränkt seine Ansicht und Bedienung nicht auf eine einzelne Anzeigeorientierung, wie Hoch- oder Querformat, es sei denn, eine spezifische Anzeigeorientierung ist wesentlich.

Verständnis der Orientierung

1.3.5 Eingabefunktion identifizieren (AA)

Folgen Sie der Liste von 53 Eingabefeldern zur programmatischen Identifizierung des Zwecks eines Feldes.

Verständnis der Identifizierung des Eingabezwecks
1.3.6 Zweck identifizieren (AAA) In Inhalten, die mit Auszeichnungssprachen implementiert sind, kann der Zweck von Benutzeroberflächenkomponenten, Symbolen und Bereichen programmatisch bestimmt werden. Verständnis des Identifizierens des Zwecks

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

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

Diese Richtlinie bezieht sich darauf, sicherzustellen, dass Kerninhalte von Hintergründen und anderen Verzierungen deutlich zu unterscheiden sind. Das klassische Beispiel ist Farbe (sowohl Farbkontrast als auch Verwendung von Farbe zur Übermittlung von Anweisungen), aber sie 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 übermitteln. Zum Beispiel sollten in Formularen Pflichtfelder niemals nur mit einer Farbe markiert werden (wie Rot). Stattdessen (oder auch) wäre etwas wie ein Sternchen mit einem "erforderlich"-Label angemessener.

Siehe Verwendung von Farbe, Farbe und Farbkontrast, und Mehrfache Labels.
1.4.2 Audio-Steuerelemente (A) Für jedes Audio, das länger als drei Sekunden spielt, bieten Sie zugängliche Steuerelemente zum Abspielen und Anhalten des Audios/Videos sowie zum Stummschalten/Anpassen der Lautstärke. Verwenden Sie native <button>s, um zugängliche Tastatursteuerungen bereitzustellen, wie in Grundlagen des Videoplayer-Stylings gezeigt.
1.4.3 Mindestkontrast (AA)

Der Farbkontrast zwischen Hintergrund und Vordergrundinhalt sollte mindestens ein bestimmtes Minimum erreichen, um die Lesbarkeit zu gewährleisten:

  • Text und sein Hintergrund sollten ein Kontrastverhältnis von mindestens 4.5:1 haben.
  • Überschriften- (oder einfach größere) Texte sollten 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 benutzbar sein, wenn die Textgröße verdoppelt wird. Dies bedeutet, dass Designs responsiv sein sollten, sodass bei erhöhter Schriftgröß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. Wenn ein Bild überwiegend textuell ist, könnte es auch mit Text zusammen mit Bildern dargestellt werden.
1.4.6 Verstärkter 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.
  • Überschriften- (oder einfach größere) Texte sollten 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 Niedriger oder kein Hintergrundaudio (AAA) Voraufgezeichnete Audiodaten, die hauptsächlich Sprachinhalte enthalten, sollten minimale Hintergrundgeräusche haben, damit der Inhalt leicht verständlich ist.
1.4.8 Visuelle Darstellung (AAA)

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

  • Vordergrund- und Hintergrundfarben sollten vom Benutzer wählbar sein.
  • Textblöcke sollten nicht breiter als 80 Zeichen (oder Glyphen) sein, um maximale Lesbarkeit zu gewährleisten.
  • Text sollte nicht vollständig gerechtfertigt sein (z.B. text-align: justify;).
  • Der Zeilenabstand sollte mindestens 1,5-mal so groß sein wie die Textgröße innerhalb von Absätzen (z.B. line-height: 1.5;), und mindestens 2,25-mal so groß zwischen den Absätzen (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 ist rein dekorativ (d.h. es vermittelt keinen Inhalt) oder kann in keiner anderen Weise präsentiert werden.
1.4.10 Umfluss (AA)
  • Kein horizontales Scrollen für Links-nach-Rechts-Sprachen (wie Englisch) oder Rechts-nach-Links-Sprachen (wie Arabisch)
  • Kein vertikales Scrollen für Oben-nach-Unten-Sprachen (wie Japanisch)
  • Ausgenommen für Teile des Inhalts, die für die Nutzung oder Bedeutung eine zweidimensionale Anordnung erfordern (wie eine große Datentabelle)
Verständnis des Umflusses
1.4.11 Nicht-Text-Kontrast (AA) Mindestfarbe Kontrastverhältnis von 3:1 für Benutzeroberflächenkomponenten und grafische Objekte. Verständnis des Nicht-Text-Kontrasts
1.4.12 Textabstand (AA)

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

  • Zeilenhöhe (Zeilenabstand) mindestens 1,5-mal so groß wie die Schriftgröße
  • Abstand nach Absätzen mindestens 2-mal so groß wie die Schriftgröße
  • Buchstabenabstand mindestens 0,12-mal so groß wie die Schriftgröße
  • Wortabstand mindestens 0,16-mal so groß wie die Schriftgröße
 Verständnis des Textabstands
1.4.13 Inhalt bei Hover oder Fokus (AA)

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:

  • entfernbar (kann geschlossen/entfernt werden)
  • hoverfähig (der zusätzliche Inhalt verschwindet nicht, wenn der Zeiger darüber ist)
  • beständig (der zusätzliche Inhalt verschwindet nicht ohne Nutzeraktion)
Verständnis von Inhalt bei Hover oder Fokus

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 Vorder- und Hintergrund.

Siehe auch