Markup Webdesign Journal

Ich habe nach einer Möglichkeit gesucht, Bilder auf einer Website zu beschriften. Z.B. für Quellenangaben. Man könnte diese einfach in das alt-Attribut des Bildes schreiben. Bei Berührung wird dann ein Tooltip angezeigt mit der Beschriftung. Das funktioniert allerdings nur im Internet Explorer. Standardkonforme Browser wie beispielsweise der Mozilla Firefox tun das nicht. Denn das Alt-Attribut sollte aus Gründen der Barrierefreiheit für eine Beschreibung des Bildes eingesetzt werden. Es lässt sich bei Bildern auch das title-Attribut verwenden, das funktioniert überall. Es ist allerdings nicht sehr benutzerfreundlich, erst die Maus über ein Bild zu bewegen, um eine Beschriftung zu erhalten. Besser lässt sich das mit Hilfe von CSS lösen. Als Hilfsmittel dienen hierbei die Definitionslisten, die sich für diese Zwecke “missbrauchen” lassen.

Definitionslisten (<dl>) bestehen normalerweise aus einem Ausdruck (<dt>) und einer Beschreibung (<dd>). Sie werden meist genutzt, um wie es der Name sagt, Begriffe zu definieren.

Mit Hilfe von ein wenig CSS lässt sich diese gut für Bilder mit Legende nutzen. Das dt-Tag, also der Ausdruck, ist ein Bild. Das dd-Tag, d steht für Description=Beschreibung, wird genutzt, um den beschreibenden Text darunter zu setzen.

Das Ergebnis kann dann z.B. so aussehen:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla arcu. Suspendisse ac nunc. Nullam a risus in nunc volutpat accumsan. Nunc mauris diam, condimentum ac, ultricies sed, malesuada in, orci. Nulla nunc urna, placerat at, porta a, sodales in, velit. Sed iaculis nibh et mauris. Proin dolor felis, egestas id, sodales a, fermentum vel, risus. Aenean id ligula eu ligula tincidunt volutpat. Nulla aliquet tristique lorem. Cras et tortor sit amet metus rutrum aliquam. Vestibulum lectus. In et nibh. Aliquam vitae erat ut ante posuere posuere. Cras et tortor sit amet metus rutrum aliquam. Vestibulum lectus. In et nibh. Aliquam vitae erat ut ante posuere posuere.

Das HTML:

<dl class=”img”>
<dt class=”img”>
<img class=”legende” xsrc=”images/testbild.jpg” mce_src=”images/testbild.jpg” alt=”Würfelspiel” />
</dt>
<dd class=”img”>Abb. 1: Das ist ein Testbild</dd>
</dl>

CSS:

dl.img {
float: left;
width: 200px;
margin: 0 10px 0 50px;
border: 1px solid #000;
}

dt.img {
border-bottom: 1px solid #000;
margin: 0;
}

dd.img {
background-color: #ececec;
margin: 0;
padding: 3px;
}

img.legende {
margin: 0;
}

EDIT: Warum einfach, wenns auch schwer geht? Bei Mediaevent schlummert diese Lösung schon seit September.