Beispiele aus dem Buch "Barrierefreies Webdesign" (Abschnitt 2.1: Texthinterlegung)

"Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen" bei amazon.deDies ist ein Beispiel aus dem Buch
Barrierefreies Webdesign (2004), das Ende 2004 im dpunkt.Verlag erschienen ist.
Wie Alternativtexte für Schriftgrafiken nicht aussehen sollten
Immer wieder finden sich Schriftgrafiken auf Webseiten, z.B. für Überschriften im Inhaltsbereich. Damit soll die Darstellung von bestimmter Schriftarten erzwungen werden. Wenn auf derartige Maßnahmen nicht verzichtet werden kann, dann muss ein Schriftzug in einer einzelnen Grafik abgebildet werden. Die unten stehende Überschrift besitzt keinen geeigneten Alternativtext, da sie aus mehreren Einzelgrafiken für einzelne Buchstaben zusammengesetzt wurde, welche als Alternativtext nur den jeweils betreffenden Buchstaben besitzen.
Hinweis (2017): Aktuelle Informationen zu Alternativtexten für Grafiken finden Sie im Beitrag
Textalternativen für Bilder und Grafiken.
HTML
<p class="headline">
<img src="ue.png" alt="Ü" />
<img src="b.png" alt="b" />
<img src="e.png" alt="e" />
<img src="r.png" alt="r" />
<img src="s.png" alt="s" />
<img src="c.png" alt="c" />
<img src="h.png" alt="h" />
<img src="r.png" alt="r" />
<img src="i.png" alt="i" />
<img src="f.png" alt="f" />
<img src="t.png" alt="t" />
</p>
CSS
p.headline {
white-space: nowrap;
}
Browseransicht
Der folgende Begriff auf dieser Seite wird im Glossar definiert:
Schriftgrafiken


Alternativtext für Schriftgrafiken korrekt angeben