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 Barrierefreies Webdesign (2004), das Ende 2004 im dpunkt.Verlag erschienen ist.

Texthinterlegung bei Hintergrund- oder per CSS eingebundenen Grafiken

Die folgende Auflistung enthält in den Listenpunkten Zusatzinformationen in Form von Symbolen. Diese werden zusätzlich für Textbrowser und Screenreader mit verschiedenen Methoden vermittelt:

Hinweis (2017): Aktuelle Informationen zu Alternativtexten für Grafiken finden Sie im Beitrag Textalternativen für Bilder und Grafiken.

HTML

<p>Um die Stimmung von Menschen wieder zu geben, kann man dies als Liste darstellen.</p>
<ul>
  <li class="gut" title="gute Laune"><span class="unsichtbar">gute Laune: </span>Peter, der heute eine 2 in dem Fach Englisch bekommen hat.</li>
  <li class="ok" title="mittelmäßige Laune"><span class="unsichtbar">mittelmäßige Laune: </span>Johanna, die leider nur eine 3- bekommen hat, obwohl sie sonst nur Einsen schreibt.</li>
  <li class="schlecht" title="schlechte Laune"><span class="unsichtbar">schlechte Laune: </span>Jean, der wiedermal eine 5 als Note bekommt.</li>
</ul>

CSS

.unsichtbar {
  display:none;
}
li.gut, li.ok, li.schlecht {
  padding-left: 10px;
  line-height: 2.5em;
}
li.gut {
  list-style-image:url(gut.gif);
}
li.ok {
  list-style-image:url(ok.gif);
}
li.schlecht {
  list-style-image:url(schlecht.gif);
}

Hinweis: Die Eigenschaft display wird zwischenzeitlich nicht mehr empfohlen, um Inhalte vor Screenreadern zu verstecken. Weitere Informationen finden Sie im Beitrag Unsichtbare Texte.

Browseransicht

Um die Stimmung von Menschen wieder zu geben, kann man dies als Liste darstellen.