Die Vielfalt von Listen in HTML

Montag, 29 Oktober 2007 23:13 MET

Thema:: Webgestaltung
Stichworte:: barrierearm, benutzerfreundlich, Blogparaden, HTML, Webstandards

: Die Vielfalt von Listen in HTML [hyperkontext | Weblog]; Bezugnahme 2

Listen sind zur sehenden Übersicht sinnvoll. Noch viel mehr aber in ihrer Bedeutung (Semantik). Auch die sogenannte Tagcloud ist eine alphabetische Liste.

Im nichtvisuellen Kontext müssen Navigationsbereiche und Linklisten, die irgendwo im Raum eines HTML-Dokumentes angesiedelt sind, mit Hilfe eines Überschriften-Elementes ihren Zweck kommunizieren.

Abschnitte

Listen, Listen und nochmals Listen
Listen mit Überschrift zur Orientierung

gesamten Artikel auf einer Seite zeigen

Listen mit Überschrift zur Orientierung

Wie schon vorhin angedeutet, eignen sich aber – vor allem ungeordnete – Listen hervorragend für Navigationsleisten. Im Zusammenspiel mit Überschriften, zur Einteilung von Navigations- und Orientierungsbereichen einer Webseite.

Ein HTML-Dokument sollte zur Orientierung auch Überschriften zu wichtigen Bereichen aufweisen (Navigation, weitere Links, Blogroll, et cetera). In diesen Bereichen befinden sich dann meist Listen.

Leider sieht HTML kein Überschriften-Element innerhalb einer Liste – vergleichbar mit dem Element <caption> in einer Tabelle – vor. Im Arbeitsentwurf zu HTML5 beziehungsweise XHTML2 ist ein solches Titel-Element für Listen vorgesehen.

Visueller Kontext ist noch lange kein semantischer

Durch Grafik und Gestaltung kann ich einen visuellen Kontext herstellen, der für sehende Menschen Bereiche voneinander abgrenzt. Digitale Verarbeitungsmechanismen können damit meist aber nichts anfangen.

Im nichtvisuellen Kontext müssen Navigationsbereiche und Linklisten, die irgendwo im Raum eines HTML-Dokumentes angesiedelt sind, mit Hilfe eines Überschriften-Elementes ihren Zweck kommunizieren. Für die visuelle Aufbereitung kann solch eine Überschrift via Cascading Style Sheets (CSS) aus dem Sichtbereich gegebenenfalls entfernt werden.

Struktur der Überschriften muss zusammenpassen

Die Geister scheiden sich allerdings in der Art der Struktur.

Längerer Text, der bereits eine Überschriftenordnung beinhaltet, sollte demnach in die bereits vorhande Struktur von Überschriften einer Webseite logisch integriert werden.

Beginnt also der eigentliche Inhalt eines HTML-Dokuments mit der Überschrift zweiter Ordnung, kann ich den Text nicht unmittelbar hinter eine Navigationsleiste stellen, der eine Überschrift erster Ordnung voransteht. Das würde dem Inhalt die Bedeutung geben, dass er Teil der Navigationsliste wäre. Beginnt der Inhalt mit Überschrift erster Ordnung, wäre die Reihenfolge korrekt.

Häufige Vorgangsweise

Eine oft proklamierte Methode ist die Sichtweise, dass eine Webseite eben ein Dokument ist und mit einer H1-Überschrift beginnt. Meist also der Name oder das Logo, eingebettet in ein H1-Element.

Alle dahinter folgenden Abschnitte können also nur mit einer Überschrift zweiter Ebene beginnen. Es gibt also auf einer Webseite genau eine H1-Überschrift, alles andere reiht sich darunter.

Beispiel:

H1 – Logo oder Name
darunter folgt zum Beispiel gleich die Hauptnavigation, ohne eigene Überschrift
1. H2 – Beginn des Inhalts (Beitrag)
  1. H3 – weitere Subüberschrift des Textes
  2. H3 – und so weiter
2. H2 – Bereichsnavigation (darunter Liste)
3. H2 – Weitere Navigationsliste
  1. H3 – Untergruppen
  2. H3 – Untergruppe

Diese Erstellung hat zwar Logik, kann aber vor allem im Zusammenspiel mit Content-Management Systemen (CMS) Probleme bringen.

In solchen Systemen bette ich in der Vorlage die erste Überschrift – also den obligatorischen Titel – eines Beitrages in ein Überschriften-Element meiner Wahl (H1, H2 oder H3). Für weitere Überschriften im Text sind allerdings die Verfasser der Beiträge zuständig. Hier muss der Entwickler entscheiden, ab welcher Ordnung Überschriften im Texteditor erlaubt sind. Diese Überschriften stehen dann als HTML in der Datenbank.

Spätestens bei Kopieren und Einfügen-Aktionen von anderen Programmen oder Im- und Exporten bei Systemänderungen, kommen die Hierarchien der Überschriften durcheinander. Abgesehen davon, dass sich die wenigsten um solchen Kram dann kümmern, ist diesem Problem nur mit guten Texteditoren (welche ich bis dato noch nicht gesehen habe) und einem Script beizukommen, welches die Einstufung der Überschriften dann automatisch anpasst.

Im folgenden Beispiel ist das genannte Problem mit den Überschriften etwas entschärft, da Inhalte mit H1 beginnen und diese Reihenfolge beim Kopieren von anderen HTML-Editoren eher die Standardeinstellung ist.

Weniger gesehen, aber auch korrekt

Christian Watson stellt in einem Artikel (Headings and Hierarchy: is More Than One H1 a Crowd?) auch die Frage, warum ein HTML-Dokument nur eine H1-Überschrift haben soll. Er sieht das Problem zwar nicht aus oben geschilderter Situation, aber seine semantische Argumentation ist durchaus auch meine.

Wir dürfen nicht vergessen, dass jedes Programm auch – und vor allem – den Titel (<title>) einer Webseite als erstes verwertet. Wird der Titel der einzelnen Seiten einer Website richtig aufbereitet, steht in diesem bereits immer der Name der Präsenz und in Unterseiten die Überschrift des Inhaltes.

Das obige Beispiel könnte also durchaus auch so aussehen:

<title> – Logo oder Name und Titel des Beitrages
H1 – Logo oder Name
In diesem Kontext kann die Frage berechtigt sein, warum das Logo oder der Name dann überhaupt in einer H1-Überschrift am Anfang einer Webseite stehen soll.
H1 – Beginn des Inhalts (Beitrag)
1. H2 – weitere Subüberschrift des Textes
2. H2 – und so weiter
H1 – Bereichsnavigation (darunter Liste)
H1 – Weitere Navigationsliste
1. H2 – Untergruppen
2. H2 – Untergruppe

Wie wir auch immer hier entscheiden, aus Sicht der Semantik ist die durchgehende Kontinuität der Überschriften-Hierarchie wichtig und leistet einen wesentlichen Anteil zur Zugänglichkeit von Web-Dokumenten.

Dieser Artikel ist ein Beitrag zur Accessibility Blog-Parade 2007.

Abschnitte dieses Artikels: