WCAG 2.0, 1.1.1, A

Nicht-Text-Inhalt

  • WCAG: 2.0
  • Stufe: A
  • Thema: Grafische Elemente

Informative grafische Elemente müssen mit einem möglichst gleichwertigen Alternativtext beschrieben sein. Dies ermöglicht Menschen mit Sehbehinderungen, jene grafischen Elemente ebenfalls verarbeiten zu können.

Verstehen

Formulieren Sie Beschreibungen hilfreich, kurz und prägnant; vermeiden Sie Redundanz. Sprengt die Beschreibung den vorgesehenen Rahmen (etwa die Länge des alt-Attributs beim Beschreiben eines Organigramms), so kann auf den umgebenden Text oder verlinkte Inhalte (z.B. das longdesc-Attribut) ausgewichen und darauf hingewiesen werden.

Ausnahmen: Die folgenden Fälle können nicht gleichwertig in Text verfasst werden. Beschreiben Sie trotzdem so gut wie möglich deren Sinn:

- Tests und Übungen, wenn es dieselben ungültig macht (bei Farbfehlsichtigkeitstafeln wäre dies z.B. "Testtafel zur Erkennung von Farbfehlsichtigkeit").

- Inhalte, die eine bestimmte Sinneserfahrung schaffen (bei einem Stereogramm wäre dies z.B. "Stereogramm zweier Delfine").

- Bei CAPTCHAs werden Textalternativen bereitgestellt, die den Zweck desselben identifizieren, etwa "Visuelles CAPTCHA, Alternativen siehe unten". Ausserdem werden alternative Formen von CAPTCHAs bereitgestellt, etwa eine auditive Variante.

Folgende grafische Elemente sollen so implementiert werden, dass sie von assistierender Technik ignoriert werden können, etwa mittels leerem alt-Attribut oder display: none:

- Der Inhalt ist reine Dekoration (z.B. ein Stimmungsbild bei einer Werbung) oder redundant (z.B. ein Warenkorbsymbol in einem mit «Warenkorb» beschrifteten Link).

- Der Inhalt wird nur für visuelle Formatierung benutzt (z.B. Abstandhalter).

- Der Inhalt ist für alle Benutzer unsichtbar.

Wichtig: Informative Bilder müssen so umgesetzt sein, dass sie auch bei geändertem oder entferntem CSS (z.B. angewandten Nutzerstyles) sichtbar bleiben: background: url(...) ist entsprechend keine Option, <img src="..."> hingegen schon.

Andere Nicht-Text-Inhalte:

- Für Video oder Audio fügen Sie eine kurze Beschreibung des Themas hinzu, so dass deren Zweck bereits vor dem Abspielen erkennbar ist (z.B. "Interview mit der Bundesrätin"). (Beachten Sie zudem Richtlinie 1.2)

- Für Steuerelemente (Formulare, JavaScript-Widgets) stellen Sie ein aussagekräftiges Label zur Verfügung (z.B. "Vorname"). (Beachten Sie zudem Richtlinie 4.1.2)

Verantwortlichkeiten

  • Das Entwicklungsteam schafft die notwendigen technischen Voraussetzungen, etwa ein Feld für das Erfassen eines Alternativtexts beim Hochladen eines Bildes.
  • Die Inhaltsverantwortlichen erstellen und warten die entsprechenden Inhalte anforderungsgemäss.
  • Auftraggebende sollten sich bewusst sein, dass das Beschreiben von komplexen grafischen Inhalten einen gewissen Zusatzaufwand mit sich bringt.

WCAG-Text

Alle Nicht-Text-Inhalte, die dem Benutzer präsentiert werden, haben eine Textalternative, die einem äquivalenten Zweck dient, mit Ausnahme der unten aufgelisteten Situationen. (Stufe A)

- Steuerelemente, Eingabe: Wenn es sich bei dem Nicht-Text-Inhalt um ein Steuerelement handelt oder Eingaben durch den Benutzer akzeptiert, dann hat dieser einen Namen, der seinen Zweck beschreibt. (Beachten Sie Richtlinie 4.1.2 für zusätzliche Anforderungen an Steuerelemente und Inhalte, die Eingaben durch den Benutzer akzeptieren.)

- Zeitbasierte Medien: Wenn es sich bei den Nicht-Text-Inhalten um zeitbasierte Medien handelt, dann stellen Textalternativen zumindest eine deskriptive Identifizierung des Nicht-Text-Inhalts bereit. (Beachten Sie Richtlinie 1.2 für zusätzliche Anforderungen an Medien.)

- Test: Wenn es sich bei dem Nicht-Text-Inhalt um einen Test oder eine Übung handelt, die nichtig wäre, wenn sie als Text dargestellt würde, dann stellen Textalternativen zumindest eine deskriptive Identifizierung des Nicht-Text-Inhalts bereit.

- Sensorisch: Wenn Nicht-Text-Inhalt hauptsächlich dafür gedacht ist, eine bestimmte Sinneserfahrung zu schaffen, dann stellen Textalternativen zumindest eine deskriptive Identifizierung des Nicht-Text-Inhalts bereit.

- CAPTCHA: Wenn der Zweck des Nicht-Text-Inhalts der ist zu bestätigen, dass eine Person und nicht ein Computer auf den Inhalt zugreift, dann werden Textalternativen bereitgestellt, die den Zweck des Nicht-Text-Inhalts identifizieren. Außerdem werden alternative Formen von CAPTCHAs bereitgestellt, die Ausgabeformen für verschiedene Arten der sensorischen Wahrnehmung nutzen, um verschiedenen Behinderungen Rechnung zu tragen.

- Dekoration, Formatierung, unsichtbar: Wenn der Nicht-Text-Inhalt reine Dekoration ist, nur für visuelle Formatierung benutzt wird oder dem Benutzer gar nicht präsentiert wird, dann wird der Inhalt so implementiert, dass er von assistierender Technik ignoriert werden kann.

Code-Beispiel

<!-- Porträt in Liste von Angestellten -->
<img src="maria.jpg" alt="Porträt Maria Bernasconi, Verwaltungsrätin" />

<!-- Komplexes Organigramm -->
<img src="organigramm.jpg" alt="Organigramm der Verwaltung. Erläuterung nachfolgend." />
<p>Kopf der Verwaltung ist Hans Huber. Ihm unterstehen...</p>

<!-- Firmenlogo -->
<img src="logo.png" alt="Logo ACME Inc." />

<!-- Firmenlogo verlinkt zur Startseite -->
<a href="/">
  <img src="logo.png" alt="Logo ACME Inc., zur Startseite" />
</a>

<!-- Bild von Text -->
<img src="willkommen.jpg" alt="Willkommen auf unserer Website!">

<!-- Allein stehendes Symbol -->
<a href=""...">
  <img src="warenkorb.png" alt="Warenkorb" />
</a>

<!-- Redundantes Symbol -->
<a href="...">
  <img src="warenkorb.png" alt="" />
  Warenkorb
</a>