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.

Struktur von Überschriften in einem Dokument

Mit den verschiedenen Überschriftenebenen in (X)HTML kann einem Dokument eine hierarchische Struktur hinzugefügt werden.

Hinweis: In der Gestaltung der folgenden Beispielüberschriften wurden CSS-Eigenschaften des Seitenlayouts übernommen.

HTML

<h1>Kapitelebene Eins</h1>
<p>Hier steht ein einführender Text</p>
<h2>Kapitelebene Zwei</h2>
<p>Hier wird die Grundproblematik dargestellt.</p>
<h2>Kapitelebene Zwei</h2>
<p>Hier wird eine zusätzliche Problematik dargestellt.</p>
<h3>Kapitelebene Drei</h3>
<p>Hier wird ein Aspekt der Grundproblematik genauer bnetrachtet.</p>
<h3>Kapitelebene Drei</h3>
<p>Hier wird ein weiterer Aspekt der Grundproblematik genauer betrachtet.</p>
<h1>Kapitelebene Eins</h1>
<p>Hier wird auf die historischen Zusammenhänge der Problematik hingewiesen.</p>
<h2>Kapitelebene Zwei</h2>
<p>Hier werden die historischen Zusammenhänge im Kontext mit der Gegenwart analysiert.</p>
<h3>Kapitelebene Drei</h3>
<p>Hier wird gerade dran gearbeitet.</p>
<h2>Kapitelebene Zwei</h2>
<p>Hier wird gerade dran gearbeitet.</p>
<h3>Kapitelebene Drei</h3>
<p>Hier wird gerade dran gearbeitet.</p>
<h3>Kapitelebene Drei</h3>
<p>Hier wird gerade dran gearbeitet.</p>
<h4>Kapitelebene Vier</h4>
<p>Hier wird gerade dran gearbeitet.</p>
<h1>Kapitelebene Eins</h1>
<p>Hier wird gerade dran gearbeitet.</p>
<h2>Kapitelebene Zwei</h2>
<p>Hier wird gerade dran gearbeitet.</p>
<h2>Kapitelebene Zwei</h2>
<p>Hier wird gerade dran gearbeitet.</p>
<h3>Kapitelebene Drei</h3>
<p>Hier wird gerade dran gearbeitet.</p>
<h4>Kapitelebene Vier</h4>
<p>Hier wird gerade dran gearbeitet.</p>
<h4>Kapitelebene Vier</h4>
<p>Hier wird gerade dran gearbeitet.</p>
<h3>Kapitelebene Drei</h3>
<p>Hier wird gerade dran gearbeitet.</p>
<h4>Kapitelebene Vier</h4>
<p>Hier wird gerade dran gearbeitet.</p>

CSS

p {
  padding-top:0.5em;
  padding-bottom:0.5em;
  padding-left:10px;
  margin:0em;
  color:#000;
  background:inherit;
  font:bold 0.9em verdana,arial,helvetica,sans-serif;
  text-decoration:underline;
}
h1 {
  padding-right:1.6em;
  margin-top:1.6em;
  border-bottom:#76738F 2px solid;
  background:#fff;
  color:#76738F;
  font:bold 1.3em verdana,arial,helvetica,sans-serif;
  letter-spacing:0.5ex;
}
h2 {
  padding-right:1.6em;
  margin-top:1.6em;
  border-bottom:#76738F 2px dotted;
  background:#fff;
  color:#76738F;
  font:bold 1em verdana,arial,helvetica,sans-serif;
}
h3 {
  padding-right:1.6em;
  margin-top:1.6em;
  background:#fff;
  color:#76738F;
  font:bold 1em verdana,arial,helvetica,sans-serif;
}
h4 {
  padding-right:1.6em;
  margin-top:1.6em;
  background:#fff;
  color:#76738F;
  font:bold 0.9em verdana,arial,helvetica,sans-serif;
}
H1:before {
  Content: Counter(varCounter1) " ";
  Counter-Increment: varCounter1 1;
  Counter-Reset: varCounter2;
}
H2:before {
  Content: Counter(varCounter1) "." Counter(varCounter2) " ";
  Counter-Increment: varCounter2 1;
  Counter-Reset: varCounter3;
}
H3:before {
  Content: Counter(varCounter1) "." Counter(varCounter2) "." Counter(varCounter3) " ";
  Counter-Increment: varCounter3 1;
  Counter-Reset: varCounter4;
}
H4:before {
  Content: Counter(varCounter1) "." Counter(varCounter2) "." Counter(varCounter3) "." Counter(varCounter4) " ";
  Counter-Increment: varCounter4 1;
}

Browseransicht

Kapitelebene Eins

Hier steht ein einführender Text

Kapitelebene Zwei

Hier wird die Grundproblematik dargestellt.

Kapitelebene Zwei

Hier wird eine zusätzliche Problematik dargestellt.

Kapitelebene Drei

Hier wird ein Aspekt der Grundproblematik genauer bnetrachtet.

Kapitelebene Drei

Hier wird ein weiterer Aspekt der Grundproblematik genauer betrachtet.

Kapitelebene Eins

Hier wird auf die historischen Zusammenhänge der Problematik hingewiesen.

Kapitelebene Zwei

Hier werden die historischen Zusammenhänge im Kontext mit der Gegenwart analysiert.

Kapitelebene Drei

Hier wird gerade dran gearbeitet.

Kapitelebene Zwei

Hier wird gerade dran gearbeitet.

Kapitelebene Drei

Hier wird gerade dran gearbeitet.

Kapitelebene Drei

Hier wird gerade dran gearbeitet.

Kapitelebene Vier

Hier wird gerade dran gearbeitet.

Kapitelebene Eins

Hier wird gerade dran gearbeitet.

Kapitelebene Zwei

Hier wird gerade dran gearbeitet.

Kapitelebene Zwei

Hier wird gerade dran gearbeitet.

Kapitelebene Drei

Hier wird gerade dran gearbeitet.

Kapitelebene Vier

Hier wird gerade dran gearbeitet.

Kapitelebene Vier

Hier wird gerade dran gearbeitet.

Kapitelebene Drei

Hier wird gerade dran gearbeitet.

Kapitelebene Vier

Hier wird gerade dran gearbeitet.

Screenshot

Screenshot dieses Beispieles