Bilder mit zusätzlichen Informationen und Verweisen versehen
Bilder können gemeinsam mit einer Bildbeschriftung ausgezeichnet oder als
anklickbare Verweise verwendet werden. Dafür stehen unter anderem die Elemente
figure, figcaption und a zur Verfügung.
Das figure-Element
Das figure-Element kennzeichnet einen in sich geschlossenen Inhalt,
auf den im umgebenden Text Bezug genommen werden kann. Häufig enthält es ein
Bild, eine Grafik, ein Diagramm oder ein Codebeispiel.
Ein Bild muss nicht grundsätzlich in einem figure-Element stehen.
Das Element ist sinnvoll, wenn Bild und Beschriftung eine zusammengehörende,
eigenständige Einheit bilden.
Eine Bildbeschriftung mit figcaption angeben
Das figcaption-Element enthält die sichtbare Beschriftung eines
figure-Elements. Es darf innerhalb von figure entweder
als erstes oder als letztes Element stehen.
<figure>
<figcaption>
Abbildung 1: Aufbau einer HTML-Seite
</figcaption>
<img
src="images/html-aufbau.png"
alt="Schematischer Aufbau einer HTML-Seite"
width="800"
height="500">
</figure>
Meistens steht die Beschriftung nach dem Bild. Bei Tabellen, Diagrammen oder
längeren Beispielen kann sie auch davor angeordnet werden.
Innerhalb eines figure-Elements darf höchstens ein
figcaption-Element verwendet werden.
Alternativtext und Bildbeschriftung unterscheiden
Das alt-Attribut und das figcaption-Element erfüllen
unterschiedliche Aufgaben.
alt stellt eine textliche Alternative zum Bild bereit.
figcaption ist eine sichtbare Beschriftung für alle Benutzer.
Der Alternativtext beschreibt den wichtigen Bildinhalt oder die Funktion.
Die Bildbeschriftung kann zusätzliche Informationen, eine Bildnummer oder
einen Quellenhinweis enthalten.
<figure>
<img
src="images/umsatzdiagramm.png"
alt="Der Umsatz steigt von Jänner bis Juni kontinuierlich an"
width="800"
height="450">
<figcaption>
Abbildung 2: Umsatzentwicklung im ersten Halbjahr
</figcaption>
</figure>
Der Alternativtext sollte nicht einfach die sichtbare Bildbeschriftung
wiederholen. Beide Texte ergänzen sich.
Mehrere Bilder in einer figure zusammenfassen
Ein figure-Element kann auch mehrere zusammengehörende Bilder
enthalten. Eine gemeinsame Bildbeschriftung erklärt dann die gesamte Gruppe.
<figure>
<img
src="images/layout-smartphone.png"
alt="Einspaltiges Layout auf einem Smartphone"
width="300"
height="500">
<img
src="images/layout-desktop.png"
alt="Mehrspaltiges Layout auf einem Desktop-Bildschirm"
width="600"
height="400">
<figcaption>
Dasselbe responsive Layout auf einem Smartphone und einem Desktop
</figcaption>
</figure>
Jedes inhaltlich wichtige Bild benötigt weiterhin einen eigenen passenden
Alternativtext.
figure für andere Inhalte verwenden
Das figure-Element ist nicht auf Bilder beschränkt. Es kann
beispielsweise auch ein Codebeispiel, ein Diagramm oder eine Tabelle enthalten.
<figure>
<pre>
body {
font-family: Arial, sans-serif;
}
</pre>
<figcaption>
Beispiel für die Festlegung einer Schriftfamilie
</figcaption>
</figure>
Entscheidend ist, dass der Inhalt eine eigenständige Einheit darstellt und die
Beschriftung den gesamten Inhalt beschreibt.
Ein Bild als Link verwenden
Ein Bild wird zu einem Link, wenn das img-Element innerhalb eines
a-Elements steht.
Wenn der sichtbare Linktext die Funktion bereits vollständig beschreibt, kann
das Bild ein leeres alt-Attribut erhalten. Dadurch wird derselbe
Linktext von einem Screenreader nicht doppelt ausgegeben.
Bild und Text sollten innerhalb desselben a-Elements stehen, wenn
beide zum gleichen Ziel führen.
Ein Vorschaubild mit der großen Bilddatei verlinken
Ein kleines Vorschaubild kann auf eine größere Version desselben Bildes
verweisen.
Soll die große Bilddatei in einem neuen Browser-Tab geöffnet werden, kann
target="_blank" verwendet werden:
<a
href="images/garten-gross.jpg"
target="_blank"
rel="noopener">
<img
src="images/garten-klein.jpg"
alt="Große Ansicht des Gartens in einem neuen Tab öffnen"
width="320"
height="213">
</a>
Das Öffnen eines neuen Tabs sollte nur verwendet werden, wenn es für den Benutzer
sinnvoll ist. Der Alternativtext kann auf das abweichende Verhalten hinweisen.
Eine Bildquelle angeben
Wenn eine Quellenangabe erforderlich ist, kann sie in die sichtbare
Bildbeschriftung aufgenommen werden.
<figure>
<img
src="images/wien.jpg"
alt="Blick über die Wiener Innenstadt"
width="800"
height="533">
<figcaption>
Blick über Wien –
Foto:
<a href="https://example.com">
Max Beispiel
</a>
</figcaption>
</figure>
Ob und in welcher Form eine Quellenangabe notwendig ist, richtet sich nach der
Lizenz und den Nutzungsbedingungen des Bildes.
Image Maps
Unterschiedliche Bereiche eines Bildes verlinken
Mit einer Image Map können mehrere Bereiche innerhalb eines Bildes als
eigenständige Links verwendet werden. Dafür werden die Elemente
map und area eingesetzt.
Aufbau einer Image Map
Das img-Element wird über das Attribut
usemap mit einem map-Element verbunden.
Innerhalb von map beschreiben mehrere
area-Elemente die anklickbaren Bereiche.
Ein map-Element kann an einer beliebigen geeigneten Stelle im
Dokument stehen. Häufig wird es unmittelbar nach dem zugehörigen Bild
eingefügt, damit der Zusammenhang im Quellcode leicht erkennbar bleibt.
Der Wert des name-Attributs muss innerhalb des Dokuments
eindeutig sein.
Das area-Element
Jedes area-Element definiert einen anklickbaren Bereich der
Image Map. Es handelt sich um ein leeres Element und benötigt daher kein
schließendes Tag.
shape bestimmt die Form des anklickbaren Bereichs.
coords enthält die Koordinaten des Bereichs.
href enthält das Ziel des Links.
alt beschreibt das Linkziel oder die ausgelöste Aktion.
Einen rechteckigen Bereich festlegen
Für einen rechteckigen Bereich wird
shape="rect" verwendet. Das Attribut
coords enthält vier Werte:
coords="x1,y1,x2,y2"
x1 – Abstand der linken oberen Ecke vom linken Bildrand
y1 – Abstand der linken oberen Ecke vom oberen Bildrand
x2 – Abstand der rechten unteren Ecke vom linken Bildrand
y2 – Abstand der rechten unteren Ecke vom oberen Bildrand
<area
shape="rect"
coords="50,40,350,240"
href="html.php"
alt="Informationen zu HTML">
Der Koordinatenursprung befindet sich in der linken oberen Ecke des Bildes.
Die Position 0,0 bezeichnet daher die linke obere Bildecke.
Einen kreisförmigen Bereich festlegen
Für einen Kreis wird shape="circle" verwendet.
Die drei Koordinatenwerte beschreiben den Mittelpunkt und den Radius:
coords="x,y,r"
x – horizontaler Abstand des Mittelpunkts
y – vertikaler Abstand des Mittelpunkts
r – Radius des Kreises
<area
shape="circle"
coords="450,250,100"
href="css.php"
alt="Informationen zu CSS">
Einen vieleckigen Bereich festlegen
Mit shape="poly" können unregelmäßige Flächen beschrieben
werden. Das Attribut coords enthält mehrere Paare aus
horizontalen und vertikalen Koordinaten.
coords="x1,y1,x2,y2,x3,y3,x4,y4"
<area
shape="poly"
coords="100,50,250,80,300,220,170,300,60,180"
href="javascript.php"
alt="Informationen zu JavaScript">
Die einzelnen Punkte werden der Reihe nach miteinander verbunden. Der
Browser schließt die Form zwischen dem letzten und dem ersten Punkt.
Komplexe Vielecke benötigen viele Koordinaten und sind dadurch schwieriger
zu erstellen und zu pflegen.
Den verbleibenden Bildbereich verwenden
Mit shape="default" wird der noch nicht durch andere
area-Elemente belegte Bereich erfasst. Das Attribut
coords wird dabei nicht benötigt.
Der Alternativtext des Bildes beschreibt das gesamte Bild. Die
Alternativtexte der einzelnen area-Elemente beschreiben dagegen
die jeweiligen Linkziele.
Image Maps und responsive Bilder
Die Koordinaten einer Image Map beziehen sich auf die ursprünglichen
Bildabmessungen. Wird das Bild mit CSS vergrößert oder verkleinert, passen
sich die Koordinaten nicht automatisch an.
img {
max-width: 100%;
height: auto;
}
Bei einer veränderten Darstellungsgröße können die anklickbaren Bereiche
daher an den falschen Positionen liegen.
Für responsive Image Maps ist zusätzliches JavaScript erforderlich, das die
Koordinaten an die aktuelle Bildgröße anpasst. Häufig sind normale Links,
CSS-positionierte Links oder eine interaktive SVG-Grafik die bessere Lösung.
Image Maps barrierefrei gestalten
Jeder anklickbare Bereich benötigt einen verständlichen Alternativtext.
Außerdem sollten die gleichen Ziele außerhalb des Bildes als normale Links
angeboten werden.
Die zusätzlichen Textlinks erleichtern die Bedienung mit Tastatur,
Screenreader und Touchscreen. Sie bleiben außerdem nutzbar, wenn das Bild
nicht geladen werden kann.
Wichtige Informationen oder Funktionen sollten niemals ausschließlich über
schwer erkennbare Bereiche einer Image Map erreichbar sein.
Wichtige Attribute des area-Elements
shape – Form des anklickbaren Bereichs
coords – Koordinaten des Bereichs
href – Zieladresse des Links
alt – textliche Alternative für das Linkziel
target – bestimmt, wo das Ziel geöffnet wird
download – bietet die verknüpfte Datei zum Herunterladen an
rel – beschreibt die Beziehung zum verknüpften Dokument
Image Maps eignen sich vor allem für Bilder, deren anklickbare Bereiche eine
feste Größe und eindeutig erkennbare Formen besitzen.
