Beispiele aus dem Buch "Barrierefreies Webdesign" (Abschnitt 2.1: Texthinterlegung)
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:
- mit verstecktem Text. Textbrowser verstehen CSS nicht und zeigen den versteckten Text an.
- mit einem
title
-Attribut: moderne Zugangssoftware bietet die Möglichkeit, Angaben intitle
-Attributen auszugeben.
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.
- Peter, der heute eine 2 in dem Fach Englisch bekommen hat.
- Johanna, die leider nur eine 3- bekommen hat, obwohl sie sonst nur Einsen schreibt.
- Jean, der wiedermal eine 5 als Note bekommt.