Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Entscheidungsschema für Alternativtexte veröffentlicht in 2017

Grafiken als informative Bilder

Informative Bilder benötigen einen beschreibenden Alternativtext. Falls die empfohlenen 80 Zeichen für den Alternativtext nicht ausreichen, um ein Bild zu beschreiben, kommen folgende ergänzende Techniken in Frage:

Es wird davon ausgegangen, dass informative Bilder für das Verständnis der Inhalte absolut notwendig sind. Die folgenden Angaben beziehen sich ausschließlich auf nicht-verlinkte Bilder mit informativen Charakter, d.h. solche Bilder mit Informationsgehalt, die im Kontext nicht beschrieben werden. Wenn informative Bilder verlinkt sind, dann handelt es sich um aktive Elemente, die funktionale Textalternativen benötigen.

Anforderungen

Zunächst sehen die Web Content Accessibility Guidelines (WCAG) 2.0 bzw. die Barrierefreie Informationstechnik-Verordnung – BITV 2.0 einige Ausnahmen für beschreibende Textalternativen vor. Für folgende Grafiktypen sind identifizierende Alternativtexte ausreichend (auch wenn damit die Inhalte der Seite in Hilfsmitteln wie Screenreadern nicht vollständig wahrgenommen werden können):

Da es unendlich viele Bilder gibt, können hier nur einige Kriterien für beschreibende Alternativtexte vorgestellt werden. Für beschreibende Textalternativen gelten grundsätzlich ähnliche Kriterien wie für identifizierende Textalternativen:

Fotos

Für Fotos sollten folgende Fragen bei der Formulierung von Alternativtexten berücksichtigt werden:

Info- und andere komplexe Grafiken

Bei Info-Grafiken, Screenshots oder andere komplexe Grafiken sollten folgende Fragen besonders berücksichtigt werden:

Schriftgrafiken

Die Alternativtexte für Schriftgrafiken, aber auch für Plakate, Buchcover oder andere Grafiken mit Text sollten Folgendes berücksichtigen:

Lange Beschreibungen

Für lange Beschreibungen gibt es verschiedene HTML-Techniken. Wesentlicher Merkmal einer langen Beschreibung ist, dass sie mit der Grafik verknüpft ist. Lange Beschreibungen werden nicht wie ein Alternativtext automatisch von einem Screenreader ausgegeben, sondern erfordern eine Nutzeraktion, um sie anzuzeigen.

  1. Das Extern, englischsprachig: longdesc-Attribut für das IMG-Element ermöglicht es, eine andere Seite oder eine andere Stelle auf der selben Seite mit der Grafik zu verknüpfen. Screenreader bieten Mechanismen an, zu der langen Beschreibung zu wechseln.
  2. Wenn eine Grafik statt mit einem IMG mit einem OBJECT-Element in die Seite eingebunden wird, kann die lange Beschreibung Extern, englischsprachig: zwischen dem öffnenden und schließenden Tag stehen.
  3. Wenn die Grafik in einem FIGURE-Element steht:
    1. kann die Grafik Extern, englischsprachig: mit einem Link ergänzt werden, der zu der langen Beschreibung auf einer anderen Seite oder einer anderen Stelle der gleichen Seite führt. Im Gegensatz zum longdesc-Attribut ist der Link für alle Nutzer zugänglich.
    2. kann ein DETAILS-Element innerhalb des FIGURE-Elements die lange Beschreibung enthalten (allerdings wird diese Technik Extern, englischsprachig: noch nicht von allen Browsern unterstützt).

Lese-Tipps

Zur Pflichtlektüre über Textalternativen gehören: