Einstieg in Barrierefreies Webdesign

Für eine barrierefreie Website wird eine klare Strukturierung des Dokuments erfordert. Umgesetzt wird dies mittels Überschriften, Absätzen und . Durch eine saubere Strukturierung haben nicht nur körperlich oder geistig behinderte Menschen Vorteile. Alle Menschen können sich dadurch besser auf einer gut strukturierten Seite zurecht finden und außerdem schreibt die BITV vor:

Große Informationsblöcke sind mittels Elementen der verwendeten Markup - Sprache in leichte handbare Gruppen zu unterteilen. BITV - Priorität 1, Bedingung 12.3

Aufbau der Strukturierung

Dieser Beispieltext ist noch sehr unübersichtlich, egal ob im Webbrowser oder Screenreader. Der erste Schritt wäre, diesen Text in sinnvolle, einzelne Absätze mit p - Elementen zu unterteilen, so dass es danach der neue Beispieltext mit Absätzen folgendermaßen aussehen könnte. Nur p - Elemente können sicher stellen, dass in allen möglichen Browsern nicht nur ein Zeilenumbruch gemacht wird, sondern auch ein Abstand zwischen den Absätzen entsteht. Deswegen sollte man nicht div- oder ähnliche Elemente für Absätze verwenden, da diese nicht in allen Browsern Abstände erzeugen.

Nun sieht es schonmal etwas übersichtlicher und lesbarer aus, aber es fehlen nur noch die Überschriften. HTML kennt sechs verschiedene Arten von Überschriften, h1 bis h6. Diese stellen die unterschiedliche Hierachien von Überschriften für Abschnitte dar und man sollte es auch nur für solche Zwecke verwenden und nicht um etwa Wörter oder kurze Texte hervorzuheben und auszuzeichnen. Das h1 - Element hat die Höchste und sollte für die Überschrift verwendet werden und auch nur einmal im Quelltext vorkommen. In dem Beispiel geben wir der Seite den Titel "Das Haus vom Nikolaus!" an der ersten Stelle.

Nun werden die weiteren Inhalte durch Überschriften mit den Elementen h2 bis h6 gegliedert. Dabei geben zum Beispiel die h5 - Elemente die Überschriften der Unterpunkte von h4 - Elementen wieder. Es könnten auch nur h6 - Elemente einem h4 - Element folgen. Was aber nicht geschehen darf, ist dass die Hierarchie nicht eingehalten wird, zum Beispiel dass h2 - Elemente Unterpunkte von h6 darstellen sollen. Das Beispiel nach der Gliederung sieht nun so aus - Beispieltext nach Gliederung. Scrennreader können nun an Hand von den Überschriften zwischen den einzelnen Punkten des Inhaltes springen.

Unter den einzelnen Unterpunkten müssen nicht nur Absätze vorhanden sein. Auch andere Elemente, wie Tabellen, Listen oder Bilder, können auch dort angelegt werden. Zu beachten ist aber, dass nicht alle Elemente, vor allem Dingen Blockelemente in ein Absatzelement hineingelegt werden können, da dies nicht standardkonformem HTML - Code entspricht.

Lokale Anker und Hilfslinks

Um die Usability für nicht grafische Textbrowser und Screenreader zu erhöhen, empfiehlt es sich eine Liste mit Links anzulegen und diese vor dem Text anzulegen. Den h1 - bis h6 - Elementen werden noch ids zugewiesen, damit sie mit der Liste verlinkt werden können. Noch anwenderfreundlicher ist es wenn man auch vor der Liste Links einfügt, die die Liste überspringen und direkt zum Inhalt führen. Auch sollte am Ende eines Punktes ein Link zurück zum Anfang und zur Liste stehen. Siehe den Beispieltext mit Listen und Links. Dadurch sind größere Seiten mit einem Textbrowser besser zugänglich, weil durch die Links unnötiges scrollen verhindert wird. Diese lokalen Anker werden auch von der BITV vorgeschrieben.

Inhaltlich verwandte oder zusammenhängende Hyperlinks sind zu gruppieren. Die Gruppen sind eindeutig zu benennen und müssen einen Mechanismus enthalten, der das Umgehen der Gruppe ermöglicht. BITV - Priorität 2, Bedingung 13.9

Weiterhin steht uns das hr - Element zur Verfügung, was verschiedene Inhalte klar mit einem horizontalen Strich trennt. Hat man auf einer Seite einen Text mit Quellangaben, so lassen sich diese beiden Teile klar mit dem hr - Element trennen. Später lassen sich auch diese Elemente mit CSS bearbeiten.

Basislayout mit div - Elementen

Um nun die Überschriften und Absätze in logische Bereiche zu gliedern wie Kopfleiste, Seitenspalte zu gliedern, verwendet man die allgemeinen Blockelemene, die div - Elemente. Diese Elemente erhalten dann eine Id oder eine oder auch mehrere Klassen, die ihm die jeweiligen CSS-Eigenschaften mitgeben.

Angenommen, man möchte den Titel und eine Navigation als einen Header anlegen, sieht der Code so aus:

<div id="header">
  <h1>Der Hase im Pfeffer</h1>
  <ul>
    <li><a href="..">Der Hase</a></li>
    <li><a href="...">Der Pfeffer</a><li>
  </ul>
</div>

Mit CSS - Selektoren kann man später auf das div - Element und deren Kindelemente (h1 und ul) zugreifen, und denen dann die gewünschten Eigenschaften zuweisen um eine Kopfleiste zu erstellen. Diese Eigenschaften des div - Elements gelten dann nur für CSS-fähige Browser. Textbrowser ignorieren die Stile und das div - Element. Scrennreader lesen nur die CSS-Eigenschaften, die sie für ihre Sprachausgabe benötigten.

Vorsicht vor der Divitis

Man kann soviele div - Elemente anlegen wie man benötigt, um das Grundgerüst für das spätere Layout aufzubauen. Nur sollte man aufpassen, dass man nicht allgemeine Elemente mit bereits vorhanden HTML - Elementen ersetzt. Allgemeine Elemente haben keinen semantischen Kontext und können nicht von allen Browsern sinnvoll interpretiert werden. So liest sich der folgende Quelltext für nicht CSS-fähige Browser nur als normaler Text und nicht als Überschrift oder ähnliches.

Falscher Ansatz !
<div id="header">
 <div id="title">Unsere kleine Farm</div>
  <div id="navigation">
   <div><a>Die Schweine</a></div>
  .....
 </div>
</div>

Ein solchen Quelltext nur aus div - Elementen nennt man auch gerne Divitis. Erfunden wurde dieser Begriff von Jeffrey Zeldman in seinem Buch „Designing With Web Standards“. Als CSS im www sich immer mehr etablierte, gingen die ersten Webdesigner vom Tabellenschema weg. Nur hatten sie das Prinzip von der strikten Trennung missverstanden und setzen nur div - Elemente ein, was dann von vielen wiederrum nachgemacht wurde und es als "modernes Webdesign" verstanden wurde. Sogar Tabellen, die als solche sinnvoll waren, wurden gerne durch div - Elemente ersetzt, was natürlich völlig unsinng ist. Denn dieser Code kann gar nicht von Textbrowsern und Screeenreader als Tabelle interpretiert werden und ist somit gar nicht barrierefrei. Oder wie es Jeffrey Zeldman sagt:

Divitis schadet der strukturellen Nahrung mit gehaltlosen Kalorien von Zucker.