Wahrnehmbar
Dieser Artikel liefert praktische Ratschläge, wie Sie Ihre Webinhalte so gestalten können, dass sie den Erfolgskriterien des Prinzips Wahrnehmbar der Web Content Accessibility Guidelines (WCAG) 2.0 und 2.1 entsprechen. Wahrnehmbar bedeutet, dass Nutzer in der Lage sein müssen, die Inhalte auf irgendeine Weise wahrzunehmen, wobei mindestens ein ihrer Sinne genutzt werden kann.
Hinweis: Um die W3C-Definitionen für Wahrnehmbar und seine Leitlinien und Erfolgskriterien zu lesen, siehe Prinzip 1: Wahrnehmbar – Informationen und Benutzerschnittstellenelemente müssen in einer Weise dargestellt werden, die Nutzer wahrnehmen können.
Leitlinie 1.1 — Bereitstellung von Textalternativen für nicht-textuelle Inhalte
Der Schlüssel hier 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ßdruck umgewandelt oder auf einem Brailledisplay dargestellt werden. Nicht-textuelle Inhalte beziehen sich auf Multimedia wie Bilder, Audio und Video.
| Erfolgskriterien | Konformität mit den Kriterien | Praktische Ressource |
|---|---|---|
| 1.1.1 Bereitstellung von Textäquivalenten (A) | Alle Bilder, die bedeutungsvolle Inhalte vermitteln, sollten mit geeigneten alternativen Texten versehen 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-Attributs.
|
Eine Textbeschreibung kann funktionieren, oder eine zugängliche
Datentabelle (siehe
HTML-Tabellen-Zugänglichkeit). Siehe W3C's
Image Description Extension (longdesc)
für das Argument gegen |
|
| Multimediainhalte (z. B. Audio oder Video) sollten mindestens eine beschreibende Kennzeichnung wie Bilduntertitel oder Ähnliches haben. |
Siehe Textalternativen für statische Untertiteloptionen und Audio-Transkripte, Video-Textspuren für andere Alternativen. |
|
| UI-Kontrollen wie Formularelemente und Schaltflächen sollten Beschriftungen haben, die ihren Zweck beschreiben. |
Bei Schaltflächen sollte sichergestellt sein, dass der Schaltflächentext
die Funktion der Schaltfläche beschreibt (z. B. <button>Bild hochladen</button>). Für weitere Informationen zu anderen UI-Kontrollen siehe
Verwenden Sie semantische UI-Kontrollen, wo möglich.
|
|
| Dekorative (nicht-inhaltliche) Bilder, Videos usw. sollten so implementiert werden, dass sie für unterstützende Technologien unsichtbar sind, um die Benutzer nicht zu verwirren. |
Dekorative Bilder sollten mit CSS-Hintergrundbildern implementiert
werden (siehe
Hintergründe und Rahmen). Wenn Sie ein Bild über ein
Wenn Sie Hintergrundvideos oder -audios einfügen, die automatisch wiedergegeben werden, machen Sie sie so unaufdringlich wie möglich. Gestalten Sie sie nicht so, dass sie wie Inhalte aussehen/klingen, und bieten Sie eine Steuerung zur Deaktivierung an. Ideal wäre, sie gar nicht einzubinden. |
Hinweis: Siehe auch die WCAG-Beschreibung für Leitlinie 1.1: Textalternativen.
Leitlinie 1.2 — Bereitstellung von Textalternativen für zeitbasierte Medien
Zeitbasierte Medien beziehen sich auf Multimedia mit einer Dauer, etwa Audio und Video. Beachten Sie, dass, wenn Audio/Video als Alternative zu bereits vorhandenem Textinhalt dient, Sie keine weitere Textalternative bereitstellen müssen.
| Erfolgskriterien | Konformität mit den Kriterien | Praktische Ressource |
|---|---|---|
| 1.2.1 Bereitstellung von Alternativen für vorab aufgezeichnete Audio- und Videoinhalte (A) | Für vorab aufgezeichnete Audioinhalte sollte ein Transkript bereitgestellt werden, und für vorab aufgezeichnete Videoinhalte (z. B. stummes Video) ein Transkript oder eine Audiobeschreibung. | Siehe Audio-Transkripte für Informationen zu Transkripten. Noch kein Tutorial für Audiobeschreibungen verfügbar. |
| 1.2.2 Bereitstellung von Untertiteln für webbasierte Videos (A) | Sie sollten Untertitel für auf dem Web präsentierte Videos (z. B. HTML-Videos) bereitstellen. Dies kommt Menschen zugute, die den Audioteil des Videos nicht hören können. | Siehe Video-Textspuren für HTML-Video-Untertitel. Siehe auch Eigene Untertitel hinzufügen (YouTube). |
| 1.2.3 Bereitstellung eines Texttranskripts oder einer Audiobeschreibung für webbasierte Videos (A) | Sie sollten Texttranskripte oder Audiobeschreibungen für im Web präsentierte Videos bereitstellen (z. B. HTML-Video). Dies kommt Menschen zugute, die den visuellen Teil des Videos nicht sehen können und den vollständigen Inhalt nicht nur durch Audio erhalten. | Siehe Audio-Transkripte für Informationen zu Transkripten. Noch kein Tutorial für Audiobeschreibungen verfügbar. |
| 1.2.4 Bereitstellung von Untertiteln für Live-Audio (AA) | Sie sollten synchronisierte Untertitel für alle Live-Multimedia, die Audio enthält (z. B. Videokonferenzen, Live-Audiobroadcasts), bereitstellen. | |
| 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 die im Video ausgedrückte vollständige Bedeutung nicht vermittelt. | |
| 1.2.6 Bereitstellung eines Gebärdensprachäquivalents für vorab aufgenommenes Audio (AAA) | Ein äquivalentes Gebärdensprachvideo sollte für alle vorab aufgezeichneten Inhalte, die Audio enthalten, bereitgestellt werden. | |
| 1.2.7 Bereitstellung eines erweiterten Videos mit Audiobeschreibungen (AAA) | Wenn Audiobeschreibungen aufgrund von Videotimingproblemen (z. B. es gibt keine geeigneten Pausen in den Inhalten, um die Audiobeschreibungen einzufügen) nicht bereitgestellt werden können (siehe 1.2.5), 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 Videos enthalten, sollte ein beschreibendes Texttranskript bereitgestellt werden, z. B. ein Drehbuch des Films, den Sie sich ansehen. Dies ist zum Vorteil von hörgeschädigten Zuschauern, 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-Audioinhalte, die ausgestrahlt werden, sollte ein beschreibender Text bereitgestellt werden, z. B. ein Drehbuch des Stücks oder Musicals, das Sie hören. Dies ist zum Vorteil von hörgeschädigten Zuschauern, die den Inhalt nicht hören können. | Siehe Audio-Transkripte für Transkriptinformationen. |
Leitlinie 1.3 — Erstellen von Inhalten, die auf unterschiedliche Weise präsentiert werden können
Diese Leitlinie bezieht sich auf die Fähigkeit, Inhalte auf verschiedene Weisen zu konsumieren, um den unterschiedlichen Bedürfnissen der Benutzer gerecht zu werden.
| Erfolgskriterien | Konformität mit den Kriterien | Praktische Ressource |
|---|---|---|
| 1.3.1 Informationen und Beziehungen (A) |
Jede Inhaltsstruktur oder visuelle Beziehung zwischen Inhalten kann auch programmgesteuert bestimmt oder aus der Textbeschreibung abgeleitet werden. Die Hauptsituationen, in denen dies relevant ist, sind:
|
Das gesamte
HTML: Eine gute Grundlage für Zugänglichkeit ist voll von Informationen darüber, aber Sie sollten insbesondere auf Gute Semantik, Verwendung von semantischen UI-Kontrollen, wo möglich und Textalternativen verweisen. |
| 1.3.2 Sinnvolle Inhaltsreihenfolge (A) | Eine sinnvolle, logische Lesereihenfolge sollte für jeden Inhalt leicht zu bestimmen sein, selbst 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 ungewöhnliche Layoutstile zu erstellen, unabhängig vom Markup. | Beziehen Sie sich erneut auf HTML: Eine gute Grundlage für Zugänglichkeit. |
| 1.3.3 Sensorische Merkmale (A) |
Anweisungen zum Bedienen von Kontrollen oder zum Verständnis von Inhalten verlassen sich nicht auf einen einzigen Sinn. Dies könnte für Menschen mit einer Behinderung in Bezug auf diesen Sinn oder ein Gerät, das diesen Sinn nicht unterstützt, unzugänglich sein. Zum Beispiel:
Hinweis: Anweisungen nur durch Farbe zu vermitteln, hängt zusammen, wird aber in einer anderen Leitlinie behandelt — 1.4.1. |
|
| 1.3.4 Ausrichtung (AA) | Inhalte schränken ihre Ansicht und Bedienung nicht auf eine einzige Darstellungsrichtung, wie z. B. Hoch- oder Querformat, ein, es sei denn, eine spezifische Darstellungsrichtung ist unerlässlich. | |
| 1.3.5 Eingabezweck identifizieren (AA) |
Folgen Sie der Liste der 53 Eingabefelder, um den Zweck eines Feldes programmgesteuert zu identifizieren. |
Verständnis des Eingabezwecks |
| 1.3.6 Zweck identifizieren (AAA) | In Inhalten, die mit Markup-Sprachen implementiert sind, kann der Zweck von Benutzeroberflächenkomponenten, Symbolen und Regionen programmgesteuert bestimmt werden. | Verständnis des Zwecks |
Hinweis: Siehe auch die WCAG-Beschreibung für Leitlinie 1.3: Anpassbar – Erstellen Sie Inhalte, die auf unterschiedliche Weise präsentiert werden können, ohne Informationen oder Struktur zu verlieren.
Leitlinie 1.4: Machen Sie es Nutzern leichter, Inhalte zu sehen und zu hören, indem Sie Vordergrund von Hintergrund trennen
Diese Leitlinie bezieht sich darauf, sicherzustellen, dass die Kerninhalte leicht von Hintergründen und anderen Dekorationen zu unterscheiden sind. Das klassische Beispiel ist die Farbe (sowohl Farbkontrast als auch Einsatz von Farbe zur Vermittlung von Anweisungen), aber es gilt auch in anderen Situationen.
| Erfolgskriterien | Konformität mit den Kriterien | Praktische Ressource |
|---|---|---|
| 1.4.1 Farbnutzung (A) |
Es sollte nicht allein auf Farbe vertraut werden, um Informationen zu vermitteln. 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 der Bezeichnung "erforderlich" angemessen. |
Siehe Einsatz von Farbe, Farbe und Farbkontrast und Mehrfachbeschriftungen. |
| 1.4.2 Audiosteuerungen (A) | Für jedes Audio, das länger als drei Sekunden gespielt wird, sollten zugängliche Steuerungen bereitgestellt werden, um das Audio/Video abzuspielen und zu pausieren sowie die Lautstärke stummzuschalten/anzupassen. |
Verwenden Sie native <button>, um zugängliche
Tastatursteuerungen bereitzustellen, wie in
Grundlagen der Videoplayer-Gestaltung gezeigt.
|
| 1.4.3 Minimaler Kontrast (AA) |
Der Farbkontrast zwischen Hintergrund und Vordergrundinhalt sollte auf einem Mindestniveau gehalten werden, um die Lesbarkeit sicherzustellen:
|
Siehe Farbkontrast und Farbe und Farbkontrast. |
| 1.4.4 Textvergrößerung (AA) | Die Seite sollte lesbar und nutzbar sein, wenn die Textgröße verdoppelt wird. Dies bedeutet, dass Designs responsiv sein sollten, sodass der Inhalt bei vergrößerter Textgröße weiterhin zugänglich ist. | |
| 1.4.5 Bilder von Text (AA) | Bilder sollten NICHT verwendet werden, um Inhalte darzustellen, wenn Text die Aufgabe erledigen würde. Wenn ein Bild hauptsächlich textuell ist, könnte es sowohl durch Text als auch durch Bilder dargestellt werden. | |
| 1.4.6 Erhöhter Kontrast (AAA) |
Dies folgt auf und baut auf Kriterium 1.4.3 auf.
|
Siehe Farbe und Farbkontrast. |
| 1.4.7 Geringer oder kein Hintergrundaudio (AAA) | Vorab aufgezeichnete Audiowiedergaben, die hauptsächlich Sprache enthalten, sollten minimalen Hintergrundrauschen haben, damit der Inhalt leicht verständlich ist. | |
| 1.4.8 Visuelle Präsentation (AAA) |
Für die Präsentation von Textinhalten sollten folgende Punkte zutreffen:
|
|
| 1.4.9 Bilder von Text (Keine Ausnahme) (AAA) | Text sollte nicht als Teil eines Bildes präsentiert werden, es sei denn, es dient lediglich der Dekoration (d.h. vermittelt keinen Inhalt) oder kann nicht auf andere Weise präsentiert werden. | |
| 1.4.10 Umfluss (AA) |
|
Verständnis von Umfluss |
| 1.4.11 Nicht-Text-Kontrast (AA) | 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) |
Es tritt kein Verlust von Inhalten oder Funktionalität auf, wenn folgende Stile angewendet werden:
|
Verständnis von Textabständen |
| 1.4.13 Inhalt bei Hover oder Fokus (AA) |
Während zusätzlicher Inhalt in Koordination mit Hover und Tastaturfokus erscheinen und verschwinden kann, legt dieses Erfolgskriterium drei Bedingungen fest, die erfüllt sein müssen:
|
Verständnis von Inhalt bei Hover oder Fokus |
Hinweis: Siehe auch die WCAG-Beschreibung für Leitlinie 1.4: Unterscheidbar – Machen Sie es den Nutzern einfacher, Inhalte zu sehen und zu hören, indem Sie Vordergrund von Hintergrund trennen.
Siehe auch
- WCAG
- Wahrnehmbar
- Bedienbar
- Verständlich
- Robust