Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Beispiele aus dem Buch (Abschnitt 2.5: Linearisierbarkeit und Layout)

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.

Linearisierbarkeit von Tabellen

Das Grundgerüst einer Layouttabelle muss die vollständige Trennung der einzelnen Bereiche einer Seite ermöglichen. Wenn Tabellen in Sprachausgaben usw. ausgegeben werden, werden die Tabellenzellen in der Regel Zelle für Zelle, von links nach rechts und Zeile für Zeile vorgelesen.

HTML

<table border="1">
  <tr>
    <td colspan="2"><h1>Kopfzeile des Dokuments</h1>
      <p><a href="#">Haupt-Navigationspunkt 1</a>  |  <a href="#">Haupt-Navigationspunkt 2</a>  |  <a href="#">Haupt-Navigationspunkt 3</a></p>
    </td>
  </tr>
  <tr>
    <td width="30%" valign="top">
      <h2>Navigation</h2>
      <ul>
        <li><a href="#">Link Nummer eins</a></li>
        <li><a href="#">Link Nummer zwei</a></li>
        <li><a href="#">Link Nummer drei</a></li>
      </ul>
    </td>
    <td width="70%">
      <h2>Inhaltsbereich</h2>
      <h3>Erläuterungen zum Thema.</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Daute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </td>
  </tr>
</table>

Browseransicht

Kopfzeile des Dokuments

Haupt-Navigationspunkt 1  |  Haupt-Navigationspunkt 2  |  Haupt-Navigationspunkt 3

Navigation

Inhaltsbereich

Erläuterungen zum Thema.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Daute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.