Noch immer existiert das Vorurteil dass barrierefreies Webdesign ohne Grafiken auskommen muss und dass man wenig damit machen kann. Heute will ich euch ein schönes Beispiel zeigen warum das nicht stimmt. Nehmen wir an wir wollen in einer Skala den Wert von etwas anzeigen. Manche würden jetzt sagen: “Na mit Flash, was sonst”. Dabei geht es doch viel einfacher und obendrein ist es sowohl für Suchmaschinen wie Screen-Reader bestens geeignet.

Um ein einfaches Diagramm oder eine Skala in HTML darzustellen, verwenden wir am besten das

<dl>-TAG. Diese Art einer Liste nennt sich Definitionsliste und ist für unseren Zweck optimal geeignet. Man kann die Liste unter anderem für Produktbeschreibungen, Link-Beschreibungen und auch komplexere Wertdarstellungen verwenden.

Hier ein Beispiel:

<dl>
<dt>Objekt</dt>
<dd>Objektbeschreibung</dd>
</dl>

Praxisorientiertes Beispiel:

<dl>
<dt>Lusftfeuchtigkeit</dt>
<dd>81%</dd>
</dl>

Die Darstellung dieser Liste kann jetzt schon mittels CSS auf verschiedene Art verändert werden. Wir wollen aber noch eins drauf setzen und bauen daher innerhalb von dem

<dl>
<dt>Luftfeuchtigkeit</dt>
<dd>
 
<div>81%</div>
 
</dd>
</dl>

/* Wir definieren die Graphendarstellung: */
 
dl {
font-family:verdana;
font-size: 11px!important;
}
/* Definition der Beschreibung*/
dt {
position: relative;
clear: both;
display: block;
float: left;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: right;
}
/* Definition des Hintegrundes der Skala */
dd {
position: relative;
display: block;
float: left;
width: 220px;
height: 20px;
margin-bottom: 15px;
}
/* .. und die Wert-Anzeige */
dd div {
height: 20px;
line-height: 20px;
margin-right: 10px;
font-size: 11px;
text-align: right;
padding-right:5px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
}

Barrierefreiheit · CSS · Webdesign

No comments yet.

<< Digitalks “Sicherheit im Netz”…

Twitter Updates for 2010-05-13 >>