Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

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

Cover: 'Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen' von Jan Eric Hellbusch Extern: "Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen" bei amazon.de

Dies ist ein Beispiel aus dem Buch Intern: 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 Intern: Textalternativen.

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

Ü b e r s c h r i f t