Strict verstehen, Teil 3: Bilder und Alternativfunktionen

[mitaki]

Hm, langsam wird doch mehr eine Hinweissammlung zu (hoffentlich) gutem HTML daraus, aber das macht nichts. Der dritte Teil hat auch einen innovativen Abschnitt

Bilder und Alternativfunktionen

Grundlagen

Bilder sind etwas besonderes. Das Element <img /> (img für Image), ist einerseits ein leeres Element, andererseits ein sogenanntes ersetztes Element. Ersetzt wird es vor allem durch die referenzierte Bilddatei im src-Attribut (source eng.: Quelle). In nicht-graphischen Browsern, in Druckstylesheets oder wenn das Quellbild nicht vorhanden ist, wird das Element durch den Alternativtext ersetzt. Dieser wird im alt-Attribut angegeben.

Beispiel:

HTML-Code:

<!-- HTML Variante -->
<img src="./baum.png" alt="Ein Baum">
<!-- XHTML Variante -->
<img src="./baum.png" alt="Ein Baum" />

Bilder sind Inlineelemente!

Bilder sind Inlinelemente, d.h. sie dürfen nur innerhalb von Blockelementen vorkommen, damit die Struktur des Dokuments gewahrt bleibt.
Aber noch etwas ist in der Hinsicht bei Bildern zu beachten. Da Bilder Inlinelemente sind, werden sie wie andere Inlinelemente auf der Textzeile angeordnet. Das hat zur Folge, dass sich am unteren Rand der Bilder noch ein Leerraum befindet. Dieser ist für die unteren Teile der Buchstaben g, j, p, q, y und Q gedacht.
Dieser besondere Leerraum tritt nur auf, wenn sich der Browser im Full standard-compilant Mode befinden. Ausnahme ist der Internet Explorer, der hier wieder einen seiner vieler Bugs zeigt (sofern man davon ausgeht, dass der IE einen Full standard-compilant Mode besitzt).
Diese Eigenheit ist sehr unbeliebt, da sie vertikal zusammenhängende Tabellenlayouts nicht zulässt. Dabei müssten sich Autoren nur etwas mehr der Gestaltung mit Stilangaben widmen, die für dieses Problem mehrere Lösungen bietet.

Verwendung bestimmter Attribute

src

Das src-Attribut ist Pflicht, was logisch ist, da ohne kein Bild angezeigt werden kann.

alt

Die Angabe eines Alternativtextes ist ebenfalls Pflicht. Jedoch steht der Inhalt nicht immer im selben Kontext und muss daher der Situation angepasst werden.

• Für Designelemente ein leerer Alternativtext, damit diese in nicht-graphischen Browsern keine unvorhersehbare Anzeige (z.B. [INLINE] als Platzhalter) erzeugen.
• Für Symbole und Piktogramme der Name oder ein Äquivalentes Zeichen, z.B. „3 von 5 Punkten“ statt einer Bewertungsanzeige oder „Dreieck“ statt eines Bildes einer PS-Kontrollertaste.
• Für Bilder, die als Überschrift dienen, den Bildtext als Alternativtext verwenden.
• Für Bilder und Graphiken einen kurzen Beschreibenden Text. Hier sollte man darauf achten, dass der Alternativtext sich in einen möglichen Textfluss einfügt.

Beispiel einer Webseite, die Alternativtexte für unnötig hält (als Benutzer von Textbrowsern sieht man das leider sehr häufig, auch SuMas sehen die Webseiten so!).

width und height

Diese beiden Attribute sind ein zweischneidiges Schwert.

Sind die Attributwerte reine Zahlen, gelten diese als Pixelangabe. Für den Besucher und nicht-stylesheetfähige Browser ist es von Vorteil, wenn bereits vor dem Laden der Graphik bekannt ist, welche Maße dieses hat. Dann kann der benötigte Platz nämlich sofort reserviert werden und es kommt nicht zur Neuberechnung der Inhaltspositionen. Das bedeutet der Besucher kann schon mit dem lesen des Inhalts anfangen, während im Hintergrund die Graphiken geladen werden.

Nachteile sind z.B. die mögliche Angabe von Prozentwerten. Diese verfälschen das Bild meist stark, da nur wenig Browser über gute Zoomalgorhytmen verfügen.
Ein weiterer Kritikpunkt kann der ungenutzte Platz sein, der entsteht, wenn ein Bild nicht geladen werden kann, aber bestimmte Maße angegeben wurden.

name

Das name-Attribut ist ein kleiner Sonderfall. In HTML 4 Strict ist es erlaubt, in XHTML 1.0 Strict jedoch nicht. Das name-Attribut ist außerhalb von Formularelementen ohnehin missbilligt und soll durch das id-Attribut ersetzt werden.

longdesc

Ein wunderbares, optionales, Attribut, welches von den hiesigen Browsern leider nicht sehr Zugänglich implementiert ist (falls überhaupt). Es steht für long description (Langbeschreibung).
Folgendes ist das Grundprinzip: Enthält eine Graphik viele Informationen (z.B. eine Statistik) ist das alt-Attribut für die Wiedergabe der Informationen nicht geeignet. Daher wird innerhalb des longdesc-Attributs die URI zu einer Seite angegeben, welche diese Informationen detailiert wiedergibt.

Browserunterstützung:

• In Geckobrowsern erhält man die URI für die Langbeschreibung per Rechtsklick -> Eigenschaften -> Graphik-Eigenschaften -> Beschreibung.
• In Opera und dem Internet Explorer sind diese Informationen nicht übers Interface zu erhalten (konnte nichts derartiges entdecken).
• Wie es mit Safari / Konqueror aussieht müsste ich von jemandem erfahren, der diese Programme nutzt.

Trotz dieser eher demotivierenden Situation möchte ich ein Beispiel geben, wie die Langbeschreibung sinnvoll eingesetzt werden kann. Bei Graphiken, die selbst nicht als Verweis dienen, könnte diese Seite z.B. per Anker verlinkt werden.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
<html lang="de" dir="ltr">
<head>
<title>Beispielseite für die Langbeschreibung einer Graphik</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<h1>Beschreibung der Abbildung 5: Entwicklung der Browsermarktanteile im Jahr 2006</h1>
<h2>Die Graphik</h2>
<p><img src="browsermarkt2006.png" alt="Die beschriebene Graphik"></p>
<!-- Nicht vergessen: Inlineelemente müssen sich innerhalb von Blockelementen befinden.
Hier halte ich es für sinnvoll, die zu beschreibende Graphik noch einmal direkt zu referenzieren.
Besonders bei Graphen und ähnlichem ist das sehr nützlich. -->
<h2>Beschreibung der Graphik</h2>
<p>Die Graphik zeigt, wie sich im Jahr 2006 die Browserverbreitung in der Zugriffsstatistik einer Webseite bemerkbar macht (Stand: Dezember 2006).</p>
<!-- Orientiert euch nicht an meinen schlechten sprachlichen Fähigkeiten... -->
<p>Seit Anfang des Jahres kann das Auftreten des Internet Explorers 7.0 beobachtet werden. Bis Ende Oktober hat dieser trotz Vorschauversion einen Anteil von 3,1% erlangen können. Dann erschien die Vollversion und bereits im Folgemonat konnte ein Wachstum von 4 Prozentpunkten beobachtet werden.</p>
<p>Die Vorgängerversionen 5 und 6 des Internet Explorers haben in diesem Jahr ihren Abwärtstrend fortgesetzt. Dieser verläuft bis Ende Oktober stetig, fällt aber im November um insgesamt 4,9 Prozentpunkte auf 52,8%.</p>
<p>Die Open-Source Konkurrenz verzeichnete das ganze Jahr über einen stetigen zuwachs. Von einem Marktanteil von 28,6% steigerten sich Geckobrowser um 4 Prozentpunkte. Opera dagegen schwankte im Bereich von 1,5% aller Zugriffe.</p>
<p>Die übrigen 6% der Zugriffe wurde von weniger verbreiteten Browsern und Suchmaschinen getätigt.</p>
<h2>Quellenangaben</h2>
<!-- Wichtig! Das Internet ist auch ein rechtskräftiger Bereich. Immer Quellenangaben angeben. Hier bietet sich eine Definitionsliste an. -->
<dl>
<dt>Graphik erstellt von</dt>
<dd>Mitaki</dd>
<dt>Daten bereitgestellt von</dt>
<dd><a href="http://www.w3schools.com/browsers/browsers_stats.asp">W3 Schools</a></dd>
</dl>
<h2>Seiten, die diese Graphik referenzieren/enthalten</h2>
<!-- Das erleichtert das finden der Ursprungsseite und dient gleichzeitig als eine Art Index. -->
<ul>
 <li><a href="webstatistiken.html">Webstatistiken</a></li>
 <li><a href="jahresbericht.html">Jahresbericht</a></li>
 <li><a href="nachrichten.html">Nachrichten vom 23. Dezember 2006</a></li>
</ul>
</body>
</html>

Ich kann jedem die Verwendung des longdesc-Attributs empfehlen, denn wenn es eingesetzt wird, sind auch die Browserhersteller gezwungen, diese besser zu implementieren. Das hat mit dem title-Universalattribut auch ganz gut funktioniert.