Infos zur Barrierefreiheit für:

Ausführliche Bildbeschreibungen mit dem longdesc-Attribut

Wenn der Redakteur aus irgendeinem Grund nicht in der Lage ist, den informativen Inhalt eines Bildes in den Fließtext zu integrieren, müssen Sie diese Informationen anderweitig bereitstellen. Zu diesem Zweck gibt es das longdesc-Attribut. Dieses Attribut gibt den Link zu einer Beschreibungsseite an, auf der die Informationen beschrieben werden, die das Bild übermittelt.

Leider ist bisher die Unterstützung für dieses Attribut in den Browsern mangelhaft. Einige Browser weisen darauf hin, wenn man einen Rechtsklick auf das Bild macht und „Eigenschaften“ auswählt. Es ist für den unerfahrenen Nutzer daher oft nicht ersichtlich, dass für das Bild eine ausführliche Bildbeschreibung hinterlegt wurde.

<img src="/img/beispiel.gif" alt="Kurzbeschreibung" height="180" width="250" longdesc="bildbeschreibung.html">

Hinweis auf die Bildbeschreibung durch einen zusätzlichen Link

Eine Möglichkeit den Nutzer doch auf die Bildbeschreibung aufmerksam zu machen, ist ein zusätzlicher Link unmittelbar nach dem Bild. Diesen Link kann man mit CSS aus dem sichtbaren Monitorbereich verschieben, so dass er nur den Nutzern von Screenreadern vorgelesen wird (nicht jedes Vorleseprogramm weist automatisch auf das Vorhandensein des longdesc-Attributs hin).

CSS-Beispiel:

.aussen {
    position: absolute;
    left: -3000px;
    top: -3000px;
    width: 0;
    height: 0;
    overflow: hidden;
    display: inline;
}

HTML-Beispiel:

<a href="bildbeschreibung.html" class="aussen">Bildbeschreibung</a>

Es stellt sich hierbei aber die Frage, ob diese Bildbeschreibung möglicherweise auch für andere Nutzer interessant ist. Wenn durch eine Grafik komplexe Zusammenhänge dargestellt werden, ist nicht jede Person in der Lage diese auch sofort zu erkennen. Es ist es daher manchmal sinnvoll, die Beschreibung nicht vor den anderen Nutzern zu verstecken, sondern sie allen Besuchern anzubieten.

Eine logische Verbindung zwischen Bild und Bildbeschreibung erstellen

Damit zwischen Bild und Bildbeschreibung ein logischer Zusammenhang entsteht, kann man sie zum Beispiel in einer Definitionsliste unterbringen. Es ist jedoch wichtig, dass das Bild in diesem Fall einen kurzen Alternativtext enthält, da ein Screenreader sonst gar nicht darauf hinweist, dass sich an der Stelle ein Bild befindet (vielen Dank an Petra Ritter für den Hinweis im XHTML-Forum).

CSS-Beispiel:

dl.photo {
    border: 1px solid #dcdcdc;
    padding: 5px;
}
dl.photo dt {
    padding-top: 15px;
    text-align: center;
    margin: 0;
}
dl.photo dd {
    text-align: center;
    font-weight: normal;
    margin: 5px 0 0;
    padding-bottom: 15px;
}
.standard {  width: 20em; }

HTML-Beispiel:

<dl class="photo standard">
<dt><img src="/img/beispiel.gif" alt="Kurzbeschreibung" height="180" width="250" longdesc="bildbeschreibung.html"></dt>
<dd><a href="bildbeschreibung.html" id="beispielfoto">Ausführliche Bildbeschreibung</a></dd>
</dl>

Aufbau der Beschreibungsseite

Die Seite mit der Bildbeschreibung sollte möglichst einfach aufgebaut sein und einen Link zurück zur Seite mit dem Bild enthalten. Es ist es wichtig, dass das ursprüngliche Bild, beziehungsweise der Bildbeschreibungs-Link, mit einem Link-Anker versehen ist. Nur so kann der Nutzer von der Bildbeschreibung wieder zu dem Punkt im Artikel springen, an dem er ihn verlassen hat.

CSS-Beispiel:

#beschreibung {
    font: normal 95%/140% Verdana, Arial, Helvetica, sans-serif; 
    color: #000;
    background: #fff;
    padding: 1em;
    margin: 1em; 
    text-align: left;
    width: 40em;
    border: 1px solid #C9C6D9;
}

HTML-Beispiel:

<div id="beschreibung">    
    <h1>Bildtitel</h1>
    <p>Bildbeschreibung</p>
    <p>
      <a href="artikel.html#beispiel">Zurück zum Artikel</a>
    </p>
</div>

Komplettes Beispiel

Nach dem hier empfohlenen Aufbau würde ein Bild mit Bildbeschreibung wie folgt aussehen:

Mount Rushmore
Bildbeschreibung

Bildquelle: about pixel (externer Link)

zum Seitenanfang