Barrierefreies Webdesign — ein zugängliches und nutzbares Internet gestalten

Beispiele aus dem Buch (Abschnitt 2.7: Strukturen und Validierung)

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.

Ü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

Fahrpreise für den Bus in Hintertupfingen
  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 €