Semantisches HTML für Blätter-Navigation

Mittwoch, 26 März 2008 20:24 MET

Thema:
Webgestaltung  
Stichworte:
, ,  
 
Screenshot einer einfachen Blätter-Navigation
Semantisches HTML für Blätter-Navigation [hyperkontext | Weblog]

Sogenannte Blätter-Navigationen sind interne Verweise im Kontext einer Website und werden meist sehr stiefmütterlich behandelt.

Bei längeren Seiten erachte ich es für sinnvoll, solche Links der Bedeutung nach in Listen zu gliedern. Ein HTML-Dokument wird damit ein Stück mehr zugänglich, strukturierter und semantischer, ohne die Freiheit der visuellen Gestaltung zu beschränken.

Das digitale Blättern

Sogenannte Blätter-Navigationen sind interne Verweise im Kontext einer Website (längere Artikel, Auflistungen), wie zum Beispiel weiter und zurück, nächster Abschnitt und die bekannten Reihen von Seitenzahlen.

Lesenswerte Beiträge aus der Blogosphäre befassten sich in jüngerer Zeit mit der optischen Anordnung von Blätter-Navigationen:

Vor der visuellen Gestaltung stellt sich für mich aber die wesentliche Frage, wie solche Verweise innerhalb eines HTML-Dokumentes ihrer Bedeutung nach auszuzeichnen sind.

Die Bedeutung im sprachlichen Kontext

Blätter-Navigationen werden meist sehr stiefmütterlich behandelt. Entweder sie stehen überhaupt verlassen als einzelne Verweise herum oder sind in ein bedeutungsloses <div>-Element am Ende eines Textes eingebettet, das nur als Markierung zur optischen Gestaltung per CSS (Cascading Style Sheets) dieser weiterführenden Links dient.

Diese Navigationspunkte stehen aber in unmittelbarem Zusammenhang zum Inhalt und haben daher auch eine besondere Bedeutung im gerade aktuellen Kontext.

Daraus folgernd, sollten sie auch ihren dementsprechend bedeutungsvollen (semantischen) Platz in der sprachlichen Struktur – also in der Textauszeichnungsspache HTML (Hypertext Markup Language) – des Dokumentes haben. Die damit erhöhte Zugänglichkeit richtet sich hier eher an Benutzerinnen von assistierenden Ausgabegeräten (Screen-Reader, Braille-Ausgabezeile, Text-Browser).

Für Programme (Suchmaschinen) macht es kaum Unterschied, wo und in welchem Element sich der Verweis zur nächsten Seite befindet. Für diese Programme liegt die logische Erfassbarkeit solcher Blätter-Navigationen eher in einem bedeutungsvollen URI (Uniform Resource Identifier). domain/inhalt/ und domain/inhalt/2 machen für Suchmaschinen mehr Sinn, als beispielsweise domain/inhalt und domain/inhalt2.

Wenn sich Auflistungen über viele – jeweils lange – Seiten erstrecken ist es für Benutzer eines Bildschirm-Lesegerätes eine mühsame Sache, wenn sich die Blätter-Navigation irgendwo am Ende des Textes in einem bedeutungslosen HTML-Element versteckt. Die müssen sich durch alle Absätze oder Links klicken, bis sie auf den Weiter-Verweis stoßen.

Es ist also sehr hilfreich, wenn solche Navigation mit einem Überschriften-Element gekennzeichnet ist, weil Überschriften auf vielen assistiven Ausgaberäten direkt angesprungen werden können. Befindet sich eine interne Blätter-Navigation jeweils am Anfang und am Ende eines Textes, dann ist eine extra Überschrift wahrscheinlich nicht unbedingt nötig.

Bei längeren Seiten erachte ich es aber in jedem Fall für sinnvoll, solche Links der Bedeutung nach in Listen zu gliedern.

Analog zur üblichen Praxis für Navigationslisten bietet sich hier erst einmal die ungeordnete Liste an. In vielen Fällen, vor allem wenn auch Seitennummerierungen dabei sind, bietet sich meiner Meinung nach auch die Definitionsliste an.

Beispiele

Alle Beispiele befinden sich zusammen mit möglicher CSS-Formatierung im Quellcode auf der Beispielseite.

Blättern mit Seitenzahlen

<Beispiel-1>

Seite 5 von 10
Seite weiter >
< Seite zurück
Erste … 3 4 5 6 7 … Letzte

</Beispiel-1>

<Beispiel-2>

Seite 5 von 10

Blättern
Seite weiter >
< Seite zurück
Seitenauswahl
Erste … 3 4 5 6 7 … Letzte

</Beispiel-2>

Beide Beispiele bestehen aus Definitionslisten. Im zweiten wird der Definitionsliste die Seitenangabe als Überschrift vorangestellt und die Liste in zwei Definition-Terms (Blättern und Seitenauswahl) geteilt.

Auf der Beispielseite zu Beispiel-1 und 2 formatiere ich diese unterschiedlichen HTML-Darstellungen mit CSS jedoch so, dass sie das gleiche visuelle Resultat erzielen.

Einfaches Blättern

<Beispiel-3>

Blättern

Neuerer Beitrag
Titel des zeitlich jüngeren Beitrages
Älterer Beitrag
Titel des nächsten älteren Beitrages

</Beispiel-3>

<Beispiel-4>

Blättern

</Beispiel-4>

Egal ob wir nun für einfache Blätter-Navigationen eine Definitions- oder ungeordnete Liste verwenden, für die Optik lässt sich mit CSS dann wunschgemäß positionieren und gestalten, wie in Beispiel-3 und 4 auf der Beispielseite zu sehen.

Auf diese Weise wird ein HTML-Dokument ein Stück mehr zugänglich, strukturierter und semantischer, ohne die Freiheit der visuellen Gestaltung in irgendeiner Weise zu beschränken.

Abschnitt 1 von 1
Datum:
veröffentlicht am 26 März 2008, 20:24 MET.
Artikel:
Semantisches HTML für Blätter-Navigation [hyperkontext | Weblog]
Kurz-URL:
http://hyperkontext.at/s/125
Thema:
Webgestaltung 
Stichworte:
, ,  
Dieser Eintrag kann nicht mehr kommentiert werden.

Mögliche themenverwandte Artikel aus dem Weblog

Blättern (chronologisch)

« neuerer Artikel
Nachlese: Logbuch Accessibility – da guckst du
älterer Artikel »
2008-03-27: Logbuch Accessibility - Öffentliche Buchausgabe