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.

Texthinterlegung bei Hintergrund- oder per CSS eingebundenen Grafiken

Die folgende Auflistung enthält in den Listenpunkten Zusatzinformationen in Form von Intern: 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 Intern: Textalternativen.

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 Intern: Unsichtbare Texte.

Browseransicht

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