Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Entscheidungsschema für Alternativtexte veröffentlicht in 2017zuletzt bearbeitet in 2022

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.1 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 anderen komplexen 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 assoziiert ist. Lange Beschreibungen werden nicht wie ein Alternativtext automatisch von einem Screenreader ausgegeben, sondern erfordern eine Nutzeraktion, um sie anzuzeigen.

  1. Eine Grafik kann 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.
  2. Eine Grafik kann mit einem SUMMARY-Element innerhalb eines DETAILS-Elements zusammen mit der langen Beschreibung gruppiert werden.

    <details>
        <summary><img src="die-welt-kann-eine-scheibe-sein.png" alt="Plattenspieler P3"></summary>
        … lange Beschreibung …
    </details>

  3. 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.

Das in HTML 4.01 spezifizierte Extern, englischsprachig: longdesc-Attribut für das IMG-Element wird inzwischen nicht mehr empfohlen. Das Attribut wird nur vereinzelt von Browsern und Screenreadern unterstützt.

Lese-Tipps

Zur Pflichtlektüre über Textalternativen gehören: