Einstieg in Barrierefreies Webdesign

Die größten Barrieren in den Webseiten liegen meistens einer unübersichtlichen und schlecht geliederten Navigation zugrunde. Barrierefrei ist daher die Navigation nur, wenn sie sich von allen Browsertypen schnell erreich- und bedienbar ist.

Gliederung für Screenreader

Damit Benutzern von Screenreadern einzelne Abschnitte einer Seite auswählen können, muss eine Strukturierung mit h - Elementen vorhanden sein. An Hand dieser Elemente kann nun der Screenreaderbenutzer zwischen den einzelnen Teilen springen, was die Navigation für diese Benutzer sehr vereinfacht. Darum sollte eine Seite unbedingt mit diesen Elementen strukturiert werden.

Navigation in Listen

Die BITV schreibt vor, dass man die Links an Hand deren Inhalt oder Kontext gliedern soll.

Inhaltlich verwandte oder zusammenhängende Hyperlinks sind zu gruppieren. BITV - Priorität 2, Bedingung 13.9

Ein Mittel um Links zu gruppieren sind Listen, am besten ungeordnete Listen. Die Gruppierung dieser Liste kann zum Beispiel nach der Navigationsebene erfolgen oder Links zu einem Thema können gebündelt werden. Hier ein Beispiel für eine Navigationsliste für die erste Ebene.

<ul>
  <li><a href="...">Startseite</a></li>
  <li><a href="...">1. Kapitel</a></li>
  [...]
</ul>

Auch lassen sich die Listen verschachteln, wenn weitere Navigationsebenen nötig sind.

<ul>
  <li><a href="...">Startseite</a></li>
  <li><a href="...">1. Kapitel</a>
    <ul>
      <li><a href="...">Einleitung</a></li>
      [...]
    </ul>
  </li>
  [...]
</ul>

Die beschreibenden Listen können auch für Links verwendet werden, zum Beispiel wenn man eine Linksammlung zu anderen Websites aufstellen möchte. In dem Fall kann man das dd - Element für die Erklärung des jeweiligen Links verwenden.

<dl>
  <dt><a href="...">Google Deutschland</a></dt>
  <dd>Beliebte Suchmaschine</dd>
  <dt><a href="...">eBay Deutschland</a></dt>
  <dd>Bekanntetes Online-Auktionshaus</dd>
</dl>

Eine solche logische Gliederung hat den Zweck, dass nichtgrafische Browser wie Textbrowser oder Handhelds besser unterstützt werden können. Durch die Gliederung können auf diesen Anwendungen, die Navigationselemente schneller aufgefunden werden.

Frames

Das Einsetzen von Frames in Webseiten ist in letzter Zeit sehr unbeliebt geworden, da bekannt ist, dass Suchmaschinen Seiten mit Frames nur sehr schlecht indizieren können. Auch Textbrowser und Screenreader in älteren Versionen haben ihre Schwierigkeiten mit Framesets. Obwohl Frames für diese Anwendungen sehr ungeeignet sind, verbietet die BITV die Benutzung von Frames nicht. Aber es ist generell empfehlenswerter auf Frames zu verzichten, im Interesse der älteren Versionen.

Möchte man dennoch Frames einsetzen, so sollte man folgende Dinge beachten.

• Das noframe - Element muss eingesetzt werden mit einer alternativen Navigation oder Inhaltsverzeichnis. Dadurch kann die Seite von auch Suchmaschinen besser indiziert werden.
• Es sollten maximal drei Frames verwendet werden, damit eine gute Übersichtlichkeit erhalten bleibt.
• Um Skalierbarkeit zu ermöglichen, sollte das Scrollen und Verändern der Größen der Frames nicht ausgeschalten werden.
• Im Sinne der BITV, Bedingung 12.1 sollte jedes Frame mit einem Titel versehen werden. Dadurch können die Benutzern von Textbrowsern oder Screenreadern diese Frames besser erkennen und ansteuern.
• Die Titel für die Frames sollten auch sinnvoll sein, beispielsweise "inhalt" oder "navigation".

Relationale Links

Im Kopfteil einer HTML - Datei können durch Meta-Daten relationale Links angelegt werden, die das Navigieren in einigen Browsern erleichtern. Angegeben werden diese mit dem link-Element, deren rel - Attribut das logische Verhältnis zur Seite angibt. Folgende logische Verhältnisse werden häufig verwendet.

contents

Für das Inhaltsverzeichnis

section

Für den Abschnitt oder den Kaptiel

index

Für das Stichwortverzeichnis

glossary

Für das Glossar

appendix

Für den Anhang

copyright

Für die Urheberrechtsangaben oder Disclaimer

next

Für die nächste Seite in einer Serie

prev

Für die vorherige Seite in einer Serie

first

Für die erste Seite in einer Serie

last

Für die letzte Seite in einer Serie

start

Für die Startseite

help

Für eine Hilfeseite

alternate

Für eine alternative Dokumentversion, zum Beispiel HTML 4 als Alternative für XHTML

Zusätzlich müssen noch Titel und URL für die relationalen Links angegeben werden. Im Quelltext könnte es eventuell so aussehen.

<head>
[...]
<link rel="start" title="Startseite" href="home.html" />
<link rel="contents" title="Seitenübersicht" href="sitemap.html" />
<link rel="next" title="Nächstes Kapitel" href="03_kaptiel.html" />
[...]
</head>

Interpretiert werden diese relationalen Links von den gängigen Textbrowsern und der Opera Browser baut mit diesen Links seine Navigationsleiste auf, wie die folgenden Bilder zeigen.

Wie man sieht hat man durch relationale Links einen schnellen Zugriff auf relevante Seiten was die Benutzerfreundlichkeit und Zugänglichkeit enorm erhöht.

Außerdem können CSS-Stile mit relationalen Links eingebunden werden und auch nach bestimmten Medien zugeordnet werden mittels dem media - Attribut. Dies ist sehr wichtig für die Barrierefreiheit im weiten Sinne, dass man für die verschiedesten Medien spezifische Stile anlegt, wie das folgende Beispiel zeigt.

<link rel="stylesheet" media="screen" href="website.css" />
<link rel="stylesheet" media="print, embossed" href="print.css" />
<link rel="stylesheet" media="aural" href="screenreader.css" />

Folgende Medien können angegeben werden.

all

Alle Medien

aural

Sprachausgabe

braille

Braille-Zeilen

embossed

Braille-Drucker

handheld

PDAs, Mobiltelephone, und so weiter

print

Druckausgabe

projection

Projektor, Beamer

screen

Bildschrim

TTY

Textbrowser

TV

Fernsehen