Barrierefreie Webseiten beginnen im Kopf

Navigationsleiste im Opera

Leider sieht man sie nur selten bis nie: die mit HTML4 eingeführten Links im Kopfbereich einer Seite. Ich meine damit nicht etwa die Skip-Links, die man ja meist wunderschön durch ein unsichtbares »div« versteckt, sondern die Relationslinks im <head>-Bereich einer Seite.

Meist finden sich die Links zu den älteren und neueren Artikeln ganz unten, knapp über dem Fußbereich. Wer den oder die Artikel zur Gänze lesen möchte, ist hierum sicher nicht traurig – ebenso wenig der, welcher eine nette Maus mit Scrollrad oder ähnliches Navigationsgerät besitzt.
Es gibt aber auch die Besucher, die direkt zum nächsten Artikel möchten, oder zur Startseite, oder zu den älteren Artikeln. Diese Besucher haben vielleicht keine 3-Tasten Maus. Oder sie besuchen die Seite gar mit einem Screenreader oder Textbrowser.

Die meisten Browser verfügen (zumindest per Plugin) über eine sogenannte »Seiten-Navigationsleiste«, in der die Navigationselemente im Kopfbereich einer Seite ausgelesen und dem Besucher entsprechend präsentiert werden. Die meisten Textbrowser und Screenreader lesen diese Links ebenfalls aus und geben Sie dem Besucher als Seitennavigation gekennzeichnet über dem anderen Inhalt aus. Das Artikelbild zeigt einen Screenshot des Opera wie er so eine Navigation anzeigt. Ein Plugin für den Firefox gibt es hier

Und wie bringe ich nun so eine Navigation auf meine Seite?

Ausgelesen werden link-Elemente im Kopfbereich:


<link rel="home" title="Startseite" href="/meine/homepage" />
<link rel="next" title="Titel des nächsten Artikels"
href="/url/zum/artikel/" />
<link rel="prev" title="Titel des vorherigen Artikels"
href="/url/zum/artikel" />

Weiterhin gibt es:

  • first für den ersten Artikel

  • last für den letzten Artikel

  • up um eine Ebene nach oben zu gelangen

  • author um z. B. eine Email oder einen Link auf das Impressum zu hinterlegen

  • search um zur Suche zu gelangen

  • sidebar ähm, sagt alles oder?

Hier sollte man allerdings überlegen welche Informationen der Besucher wirklich dort oben benötigt. Schließlich möchte man ihm ja eine schnelle Navigation ermöglichen und ihm nicht noch halbe Link-Romane vor den Inhalt legen.


Ähnliche Artikel

Dein Kommentar:

Sämtliche Html-Tags werden gelöscht, der Kommentar kann mit Textile formatiert werden.
Vor dem Absenden müsst ihr euch einmal die Vorschau ansehen.