H1-Headings in HTML: Wieviel Einser braucht eine Seite

Freitag, 13 Februar 2009 17:39 MET

Thema:
Webgestaltung  
Stichworte:
, ,  
 
Replik des Denkers, im Hintergrund H1, H2, H1 HTML-Codierung
H1-Headings in HTML: Wieviel Einser braucht eine Seite [hyperkontext | Weblog]

Wieviel H1 auf einer Seite wird in englischsprachigen Blogs seit Jahresanfang wieder durchgekaut. Sogar eine Twitter-Umfrage wurde gestartet.

Wir sollten die Frage aber einmal anders stellen: Wie können wir mit Überschriften die Orientierung gewährleisten?

Die überwältigende Mehrheit von Benutzern assistiver Programme verwendet Headings nämlich zur Orientierung. Daher führt kein Weg an einer durchdachten und gebrauchstauglichen Überschriften-Struktur vorbei.

H1-Debatte die Xte

Da es keine definitive Anleitung gibt, ob und wie Headings in HTML (HyperText Markup Language) abseits vom eigentlichen Inhalt einer Seite eingesetzt werden sollen, flammen zu diesem Thema seit Jahren immer wieder Diskussionen auf, die sich letztendlich in der Darstellung der jeweiligen Position erschöpfen.

Das habe ich schon vor einiger Zeit in einem Artikel dokumentiert: Webseite mit Überschriften strukturieren – eine Chronologie.

In englischsprachigen Blogs wird die Sache seit Jahresanfang nun wieder durchgekaut. Teilweise auch im Zusammenhang mit HTML5 und oberflächlichen Abschweifungen.

Nach dem Zeitablauf geordneter Überblick einiger Beiträge:

  1. Headings, heading hierarchy, and document outlines [Roger Johansson] – durch die anschließende Diskussion ausgelöst, schreibt Roger noch in einem Update: So according to WCAG 2.0 it is more important to mark up headings as headings than to have a perfect heading hierarchy.
  2. Multiple H1 Headings are Valid, But… [Steven Clark]
  3. My Accessibility Check: Let’s All Use Our Headings! [slger]
  4. How many <H1> tags should there be per page [netbuilders.org] (Forumsdiskussion)
  5. The h1 debate [Cennydd Bowles]
  6. HTML 5 to the H1 debate rescue? [Iheni]
  7. Headings in HTML 5 and accessibility [Bruce Lawson]
  8. The H1 Debate [abovetheinternet.org]

Sogar eine Twitter-Umfrage wurde gestartet, wer nun das Logo zusätzlich in eine H1 verpackt oder nicht. Die Aktion schrammt insgesamt am tiefer liegenden Hintergrund vorbei und hat daher kaum Aussagekraft. Die extra dafür eingerichtete Seite ist aber allemal interessant: The H1 Debate.

Auch die penible Sammlung von (mitunter zweifelhaften) Beispielen dient nur der Statistik und bringt die Diskussion nicht weiter: Headings & Sectioning [Project Cerbera].

Soll eine HTML-Seite mehrere H1-Headings haben

Die Frage ist wahrscheinlich falsch gestellt.

Es lassen sich (und das seit Jahren) folgende drei hauptsächliche Argumentationsgruppen zusammenfassen:

  • Die Systemanalytiker

    Die Analytiker sehen die Sache eher aus der klassischen Programmierecke. Die Überschriften-Hierarchie wird mit dem DOM (Document Object Model) verglichen und H1 ist der Ausgangsknoten. Ein HTML-Dokument kann laut dieser Denkrichtung auch nur eine einzige Überschrift erster Ordnung haben.

  • Die Pragmatiker

    Die Pragmatiker sehen das zwar ähnlich wie die Analytiker, haben aber mehr den sachlichen Kontext im Auge und betrachten daher bereits das Meta-Element <title> im Kopf der HTML-Seite als Ausgangsknoten. Daher kann es laut dieser Schule natürlich auch mehrere H1 geben, welche vor allem die Abschnitte einer Seite markieren (Hauptnavigation, Suche, Inhalt, Unternavigation, et cetera).

  • Die Praktiker

    Wenn es keine Missverständnisse in der Interpretation gibt, kann auf einer Seite vor dem eigentlichen Inhalt durchaus – oder auch danach – ein H5 oder H6 Navigationslisten vorangestellt werden. Auch vollkommen aus der Ordnungshierarchie herausgerissen. Der Inhalt selbst beginnt dann mit einer H1 und sich darunter reihenden Zwischenüberschriften.

    Wichtig dabei ist, dass sich diese Abschnitte nicht missverständlich mit der Heading-Struktur des Seiteninhaltes vermischen.

Was alle Sichtweisen gemein haben

Alle diese genannten Herangehensweisen beziehen sich auf die Struktur einer HTML-Seite, also die Integration von Elementen, die unmittelbar nichts mit dem eigentlichen Inhalt der einzelnen Seite zu tun haben.

Für alle ist es aber unbestreitbar, dass die Zwischenüberschriften des eigentlichen Textes einer geordneten Hierarchie unterliegen sollten. Egal ob die Hauptüberschrift des Textes nun mit Überschrift erster, zweiter oder gar dritter Ordnung beginnt.

Da sich seit Jahren keine einheitliche Linie durchsetzt und allen Argumentationen etwas abzugewinnen ist, sollten wir uns vielleicht einmal die Frage stellen, ob wir bis jetzt immer die falsche Frage stellen.

Stellen wir doch die Frage programmatisch mit Empathie.

Wie können wir mit Überschriften die Orientierung gewährleisten

Headings auf einer HTML-Seite dienen Personen und Programmen der Orientierung und menschlichen Benutzern eines Vorleseprogrammes auch zur Navigation. Das ist die erste Priorität zum Setzen von Überschriften. Daran sollten wir bei der Strukturierung denken.

In zweiter Linie dienen die Headings Suchmaschinen auch zur Feinabstufung und Gewichtung von Texten.

Tatsache ist: Überschriften sind die am meisten genutzten Navigationshilfen, wie die jüngste Umfrage wieder gezeigt hat: Screen Reader Survey Results.

Benutzer von Programmen für die nicht visuelle Ausgabe brauchen eindeutige Anhaltspunkte, wo sich denn zum Beispiel die Navigation befindet, wenn sie das Lesen des Textes abbrechen. Natürlich stellt dabei ein komplexes Informationsangebot andere Ansprüche an die Orientierung als ein einfaches Tagebuch.

Screenreader Benutzern ist es wohl ziemlich egal, ob eine Seite nur eine H1 hat und die Orientierung mit den darunterliegenden Ebenen gewährleistet ist oder ob die wichtigsten Abschnitte der Seite bereits mit H1-Headings markiert sind. Oder ob – mit schnellem Lerneffekt – auf der gesamten Site zum Beispiel H6-Headings für Navigationsabschnitte reserviert sind.

Durchdachte Beispiele finden wir wohl auf Sites von Organisationen oder behinderten Menschen, die sich dem Thema Web-Accessibility aktiv widmen und ihre Angebote bewusst gestalten:

Hinweise:

  • Reine Blogs habe ich außen vor lassen.
  • Ich habe mich nur auf Sites konzentriert, die unmittelbar mit dem Thema zu tun haben und die ich persönlich im Fokus habe. Auch das ist aus Platzgründen nur eine bescheidene Auswahl.
  • Die Einteilung der verwendeten Headings bezieht sich natürlich nur auf den Zeitpunkt der Erstellung dieses Beitrages und könnte zu einem späteren Zeitpunkt anders sein.
Immer nur eine H1. Weitere Überschriften schließen sich in hierarchischer Form an.
Mehrere H1, welche die einzelne Seite in Navigation, Inhalt und weitere Bedienelemente aufteilen.

  • Accessible Media – Eine österreichische Initiative von behinderten Menschen, Vertreter von Bildungseinrichtungen und Fachleuten aus dem Bereich Webdesign.

  • Zugang für Alle – Eine Schweizer Stiftung. Dort arbeiten Betroffene mit unterschiedlichen Handicaps und testen Websites auf Zugänglichkeit (und bedienen natürlich auch ihre eigene ständig mit assistiven Ausgabeprogrammen).

  • Verein BIZEPS – Beratungsstelle für behinderte Menschen und deren Angehörige in Wien. Die Betreiber dieser Website – Martin und Markus Ladstätter – sind auch Spezialisten für barrierefreie Webgestaltung.

  • Oberösterreichischer Blinden- und Sehbehindertenverband

  • Der A-Tag 08 – wurde im November 2008 zum Thema Web-Accessibility in Wien veranstaltet. Die Site ist mit den Rückblicken, Videos und Transkripten noch online und wurde von Eric Eggert – einem ausgewiesenen Experten – konzipiert und umgesetzt.
    Das Besondere: In HTML5.

  • BIK - barrierefrei informieren und kommunizieren – ist ein Projekt, das vom deutschen Bundesministerium für Arbeit und Soziales gefördert wird. Regelmäßig informiert, prüft und bewertet das Team Websites auf Zugänglichkeit.

  • Einfach für Alle – wohl eine der bekanntesten deutschsprachigen Websites zum Thema.

Wie wir an diesen paar Beispielen sehen, ist es sinnvoll, sich für jedes Projekt die gebrauchstaugliche Überschriften-Struktur zu überlegen und zu testen.

Es gibt bei der Konzeption auch äußere Faktoren zu berücksichtigen. Die Zwischenüberschriften von Texten sind fast ausschließlich hard-coded und je nach Vorgaben und Einstellungen des CMS (Content Management System) unterschiedlich. Manche CMS lassen prinzipiell nur H3 als Zwischenüberschriften zu, andere ab H2.

Probieren und Testen

Mit Hilfe von Werkzeugen, Einstellungen oder Programmen können wir selbst probieren und uns nur die Überschriften anzeigen lassen. Mit etwas Einfühlen vermögen wir uns dann auch vorzustellen ob wir nur an Hand der Heading-Struktur die Orientierung behalten und die Seite einfach navigieren könnten.

Wir können mit einfachen aber durchaus wirkungsvollen Methoden uns allgemein etwas Verständnis verschaffen, mit welchen Schwierigkeiten gehandicapte Personen oder blinde Suchmaschinen auf Websites zu kämpfen haben. Hierzu ein älterer Beitrag von mir: Zugänglichkeit von Websites mit Empathie testen.

Und vergessen wir nicht eine der naheliegendsten Möglichkeiten, Feedback zur barrierearmen Gebrauchstauglichkeit einzuholen: Lassen wir Benutzerinnen assistiver Programme unsere Seiten (Entwürfe) ausprobieren.

Fazit: Logische Headings müssen vorhanden sein

Es gibt keine definitive Anleitung, ob die Bereiche einer Webseite mit mehreren oder nur einer H1 versehen werden sollten. Es gibt aber im Sinne der WCAG (Web Content Accessibility Guidelines) der gültigen Version 2.0 einen eindeutigen Auftrag, die Orientierung (für nicht visuelle Darstellung) zu gewährleisten:

Abgesehen davon, verwendet die überwältigende Mehrheit von Benutzern assistiver Ausgabegeräte und Programme Headings zur Orientierung. Daher führt kein Weg an einer durchdachten und gebrauchstauglichen Überschriften-Struktur vorbei.

Und ja, selbstverständlich ziehen verschiedene Programme, die eine Seite analysieren (zum Beispiel Suchmaschinen) auch Nutzen aus einer sinnvollen Heading-Struktur. In welcher Art und in welchem Umfang und ob mehr als eine Überschrift erster Ordnung unter SEO-Aspekten sinnvoll ist, das ist wieder ein eigenes Thema.
(eingefügt 2009-04-02) Matt Cutts (Google) äußert sich im Youtube Channel Google-Webmaster-Central dazu und sieht aus Sicht von Suchmaschinen keine Beeinträchtigungen mit mehreren H1 auf einer Seite: More than one H1 on a page: good or bad?

Abschnitt 1 von 1

Externe Verweise dieses Artikels wurden zuletzt am 13. Februar 2009 auf Relevanz geprüft.

Datum:
veröffentlicht am 13 Februar 2009, 17:39 MET.
Artikel:
H1-Headings in HTML: Wieviel Einser braucht eine Seite [hyperkontext | Weblog]
Kurz-URL:
http://hyperkontext.at/s/188
Thema:
Webgestaltung 
Stichworte:
, ,  

Dieser Artikel bezieht sich intern auf frühere Einträge:

Dieser Eintrag kann nicht mehr kommentiert werden.

Mögliche themenverwandte Artikel aus dem Weblog

Blättern (chronologisch)

« neuerer Artikel
Intranet-Knigge 2.0 für Arschkriecher
älterer Artikel »
Januar 2009 im Kontext