WebDesign by mts

Bild mit Untertitel.

in Webdesign Tutorial barrierefrei, von mts

Praktische Beispiele, um Bilder accessibility, also zugänglich für 'Alle' zu machen. Bild mit Untertitel hilft Menschen und der Maschine. So werden auch Bilder suchmaschinenfreundlich.

Viele Ersteller einer Homepage suchen nach einer Möglichkeit einem Bild einen Untertitel zu geben. Die Web Accessibility Initiative, zukünftig mit “WAI” abgekürzt, empfiehlt ebenfalls Bildern ein Text-Äquivalent zu geben:

Manche Benutzer sind nicht in der Lage, Bilder zu sehen, andere benutzen möglicherweise textbasierte Browser, die keine Bilder unterstützen, während wieder andere möglicherweise Bilder abgeschaltet haben (z. B. wegen einer langsamen Internet-Verbindung). Diese Richtlinien schlagen nicht die Vermeidung von Bildern vor als einen Weg, um die Zugänglichkeit zu verbessern. Stattdessen erläutern sie, dass die Verwendung eines Text-Äquivalents das Bild zugänglich macht.

Weiters wird erklärt:

Um von Nutzen zu sein, muss der Text dieselbe Funktion bzw. denselben Zweck erfüllen wie das Bild.

Verwende ich ein Bild, um meinen Text zu unterstreichen, dann reicht die kurze Beschreibung was auf dem Bild zu sehen ist. Dafür gibt es in (X)HTML das Attribut “alt”. Dieses wird so beschrieben:

Beim Attribut alt geben Sie einen Alternativtext an für den Fall, dass die Grafik nicht angezeigt werden kann.

Ist auf dem Bild wesentlicher Inhalt zum Verständnis des Textes, dann ist es sinnvoll das “longdesc” Attribut zu verwenden und einen Link mit der Bildbeschreibung zur Verfügung zu stellen.

Mit dem Attribut longdesc können Sie auf eine Stelle verweisen, wo die Grafik in Textform näher beschrieben wird. Erlaubt ist ein URI, d.h. bei der Angabe gelten die Regeln zum Seite Referenzieren in HTML.(=verlinken)

Verwenden Sie das Attribut longdesc, dann sollen Sie auch extra noch einen Link zu diesem “longdesc” Beschreibungstext anbieten, der entweder ein großes oder kleines “d” als Linktext hat. “D” wie “description” oder auf Deutsch: “Beschreibung”.

Ein Beispiel:

<p>
 
[d]
</p>

Neben der CSS Problematik, wie man Bilder so darstellt, dass (fast) jeder Browser diese auch richtig anzeigt, ergeben sich weitere Rätsel:

Semantisch korrekt sollte (X)HTML verwendet werden.

Es gibt kein (X)HTML Attribut, das eine sichtbare Beschreibung eines Bildes vorsieht.

Verwendet man sowohl das “alt” wie das “title” Attribut, um ein Bild zu beschreiben, wird dies von sehr vielen Screenreadern zweimal vorgelesen. Dies ist nicht gerade konzentrationsfördernd, wenn jemand zweimal hört: “Ich bin nur ein Testbild”.

Außerdem ist das “alt” Attribut nur dazu da, um Ersatztext anzuzeigen, wenn ein Bild nicht angezeigt werden kann. Unabhängig davon mag auch die Suchmaschine Google das alt Attribut sehr gern. Somit bewahrheitet sich wieder einmal, dass barrierefreies WebDesign für Mensch und Maschine sinnvoll ist.

Der Untertitel eines Bildes sollte sichtbar sein.

Es ist möglich das “alt” Attribut sichtbar zu machen, doch der Internet Explorer versteht die CSS Anweisung dafür nicht. Daher widerspricht diese Lösung wiederum der Forderung abwärtskompatible(backward compatible) Websites zu erstellen.

Eine (Die) Lösung:

Das semantisch korrekteste (X)HTML Attribut, das sowohl dem Wunsch vieler Website Ersteller und der WAI Forderung nach einem beschreibenden Untertitel entspricht ist das Attribut dl.

Definitionslisten sind für Glossare gedacht. Glossare bestehen aus einer Liste von Einträgen. Die Einträge eines Glossars bestehen aus einem zu definierenden Ausdruck (z.B. ein Fachbegriff) und der zugehörigen Definition.

Dies könnte dann so umgesetzt werden:

 
<dl class="left" style="width:220;">
 
<dt> Ich bin ein Testbild und <br />zeige ein altes Bauwerk in Karlsruhe</dt>
<dd><img src="http://www.webdesign-in.de/wp-images/200_184.jpg" alt=" Ich bin nur ein Testbild" width="200" height="184" />
</dd></dl>

Zwei Bilder mit Untertiteln und der klassische Fülltext:

Ich bin ein Testbild und
zeige ein altes Bauwerk in Karlsruhe

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Ich bin ein Testbild und
zeige den Ast eines Baumes mit Blättern .

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?”

Diese Lösung – Bildern mit Definitionslisten einen Untertitel -eine Bildunterschrift – oder eine Überschrift zu geben – ist nicht neu, doch scheint sie immer noch sehr unbekannt zu sein, weil ich diesbezüglich immer wieder Anfragen habe.

Diese Definitionslisten lassen sich wie jedes (X)HTML Attribut gestalten und da sie auch verschachtelt werden können, ergibt sich eine Fülle an Gestaltungsmöglichkeiten. So die jeweiligen Browser diese auch darstellen.

Barrierefreies WebDesign und Webstandards sind nicht schwer: Nur daran denken sollte man beim Erstellen einer Homepage.

edit: auf Texto.de zeigte ich wie man sich so eine Definitionsliste als Standard beim Bilderupload von WordPress einrichten kann.

Basis Know-how CSS
Internetmarketing

• Anleitung für die Print.css, denn Datei -> Drucken ist nach wie vor sehr beliebt - das Drucklayout
• Links im neuen Fenster

Top

8 zu : Bild mit Untertitel.