Beispiele aus dem Buch (Abschnitt 2.7: Strukturen und Validierung)
"Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen" bei amazon.deDies ist ein Beispiel aus dem Buch 
Barrierefreies Webdesign (2004), das Ende 2004 im dpunkt.Verlag erschienen ist.
Überschriften für Datentabellen
Für Datentabellen müssen Spalten und/oder Reihen eine Überschrift erhalten. Dies erfolgt über das TH-Element.
Die korrekte Auszeichnung der Tabellenüberschriften wird nicht in jedem Screen- bzw. Webreader ausgegeben. Nur moderne Software ist in der Lage die Tabellenüberschriften den Tabellenzellen automatisch zuzuordnen.
HTML
<table>
<caption>Fahrpreise für den Bus in Hintertupfingen</caption>
<tr>
<td class="keineDaten"> </td>
<th>Spartarif</th>
<th>Ferien-Ticket</th>
<th>Normaltarif </th>
<th>Schnellbus</th>
<th>1. Klasse </th>
<th>Gruppentarif</th>
</tr>
<tr>
<th>Zone 1 </th>
<td>0,50 € </td>
<td>0,75 € </td>
<td>1,00 € </td>
<td>1,50 € </td>
<td>2,50 € </td>
<td>3,50 € </td>
</tr>
<tr>
<th>Zone 2 </th>
<td>0,75 € </td>
<td>1,00 € </td>
<td>1,50 € </td>
<td>2,50 € </td>
<td>3,50 € </td>
<td>5,00 € </td>
</tr>
<tr>
<th>Zone 3 </th>
<td>1,00 € </td>
<td>2,00 € </td>
<td>3,00 € </td>
<td>4,00 € </td>
<td>5,00 € </td>
<td>7,00 € </td>
</tr>
<tr>
<th>Zone 4 </th>
<td>1,50 € </td>
<td>2,50 € </td>
<td>4,00 € </td>
<td>5,00 € </td>
<td>7,00 € </td>
<td>9,00 € </td>
</tr>
</table>
HTML
<table>
<caption>Fahrpreise für den Bus in Hintertupfingen</caption>
<tr>
<td class="keineDaten"> </td>
<th>Spartarif</th>
<th>Ferien-Ticket</th>
<th>Normaltarif </th>
<th>Schnellbus</th>
<th>1. Klasse </th>
<th>Gruppentarif</th>
</tr>
<tr>
<th>Zone 1 </th>
<td>0,50 € </td>
<td>0,75 € </td>
<td>1,00 € </td>
<td>1,50 € </td>
<td>2,50 € </td>
<td>3,50 € </td>
</tr>
<tr>
<th>Zone 2 </th>
<td>0,75 € </td>
<td>1,00 € </td>
<td>1,50 € </td>
<td>2,50 € </td>
<td>3,50 € </td>
<td>5,00 € </td>
</tr>
<tr>
<th>Zone 3 </th>
<td>1,00 € </td>
<td>2,00 € </td>
<td>3,00 € </td>
<td>4,00 € </td>
<td>5,00 € </td>
<td>7,00 € </td>
</tr>
<tr>
<th>Zone 4 </th>
<td>1,50 € </td>
<td>2,50 € </td>
<td>4,00 € </td>
<td>5,00 € </td>
<td>7,00 € </td>
<td>9,00 € </td>
</tr>
</table>
CSS
table {
width:95%;
margin:1em 0 0 0;
}
td {
margin:0;
padding:0.5em;
font:0.9em verdana,arial,helvetica,sans-serif;
vertical-align:top;
}
td ul {
font-size:1em;
}
th {
margin:0;
padding:0.5em;
color:#000;
background:#FFDB94;
font:bold 0.9em verdana,arial,helvetica,sans-serif;
text-align:left;
text-decoration: none;
vertical-align:top;
}
tr {
background:#EAF3FE;
font-size:100%;
}
tr li.intern {
list-style-image:url(intern_hellblau.gif);
}
tr.zweite {
background:#C3DFFF;
font-size:100%;
}
tr.zweite li.intern {
list-style-image:url(intern_dunkelblau.gif);
}
Multimedia
Browseransicht
| Spartarif | Ferien-Ticket | Normaltarif | Schnellbus | 1. Klasse | Gruppentarif | |
|---|---|---|---|---|---|---|
| Zone 1 | 0,50 € | 0,75 € | 1,00 € | 1,50 € | 2,50 € | 3,50 € |
| Zone 2 | 0,75 € | 1,00 € | 1,50 € | 2,50 € | 3,50 € | 5,00 € |
| Zone 3 | 1,00 € | 2,00 € | 3,00 € | 4,00 € | 5,00 € | 7,00 € |
| Zone 4 | 1,50 € | 2,50 € | 4,00 € | 5,00 € | 7,00 € | 9,00 € |