Zum Inhalt springen

Gastbeitrag: Ist der Blog-Header eine Definitionsliste?

Der Beitrag über die BarCamp Session „Nur ein Blog am Prüfstand…“ bleibt nicht ganz unwidersprochen. Zumindest die Frage der Definition was als Überschrift (H1, H2,…) auszuzeichnen ist, ist in Diskussion. So hat sich u.a. Hyperkontext der Frage von Überschriften gewidmet.

Eine solche Diskussion finde ich gut und wichtig. Denn diese beinhaltet die Kernfrage welche Wertigkeit ich welchen Elementen in meinem Blog gebe und wie man darin sinnvoll und leicht navigieren kann. Daher freue ich mich heute einen Gastartikel von Kerstin Probiesch (E-Mail) bringen zu können, die sich mit der Frage „Ist der Blog-Header eine Definitionsliste“ auseinandersetzt. Kommentare sind wie immer Willkommen.

Nachfolgend somit die Gedanken von Kerstin zum Thema:

Kerstin Probiesch: Ist der Blog-Header eine Definitionsliste?

Der Header eines Weblogs hat in der Regel zwei Teile: den Titel des Blogs und seinen Untertitel, durch den der Inhalt des Titels näher beschrieben und ausgeführt wird bzw. werden kann. Nun stellt sich die Frage, wie dieser Header im Sinne der Barrierefreiheit am besten mit gültigem (X)HTML-Markup ausgezeichnet werden kann.

Dazu wurden hier im Blog (gemeint ist bei Robert Lender) zwei Ansätze diskutiert.

Titel und Untertitel des Blogs sollte als Definitionsliste ausgezeichnet sein.

Titel des Blogs sollte eine Überschrift erster Ordnung (H1) sein.

Stellen wir uns vor, wir würden die Inhalte des Blogs statt als Blog oder auf einer Webseite in einer Textverarbeitung schreiben.

In diesem Fall würden wir den Titel des Blogs mit der Formatvorlage „Titel“ und die folgende Kurzbeschreibung mit der Formatvorlage „Untertitel“ strukturieren. Diese Möglichkeit bietet uns HTML jedoch nicht, da Titel und Untertitel für (X)HTML-Dateien zumindest zur Zeit nicht vorgesehen sind.

Welche Möglichkeiten kämen nun in Frage: Definitionsliste oder Überschriften?

Die Definitionsliste

Die Definitionsliste besteht aus dem zu definierenden Eintrag (Definition (List) Term, DT) und die zugehörige Definition des Eintrags (Definition (List) Definition, DD), bzw. mehrere Definitionen eines Eintrags, die auch verschachtelt werden können.

Definitionslisten sind für Glossare oder auch Lexikoneinträge gedacht. Weitere Verwendungsweisen sind zum Beispiel kommentierte Linksammlungen bei denen der Link als DT ausgezeichnet wird und die Beschreibung des Linkziels als DD.

Manchmal findet man auch folgende Verwendung von einer Definitionsliste: Bei einer Grafik wird die Grafik in ein DT gesetzt und eine Beschreibung der Grafik als DD eingefügt. Diese Vorgehensweise soll dann die „Bildunterschrift“ „ersetzen“ für die es in den zur Zeit gültigen (X)HTML-Standards ebenfalls kein gültiges Markup gibt.

Sind diese Verwendungen semantisch korrekt? Im Falle von Glossaren und kommentierten Linklisten ist der Fall aus zwei Gründen klar:

Bei Glossaren und kommentierten Linksammlungen sind immer mehrere Definition Terms vorhanden. Bei Bildern hingegen oder auch im Fall des Blog-Headers gibt es jedoch nur einen Eintrag.

Kann ein Eintrag mit Definition und Beschreibung überhaupt eine Liste sein?

Überschriften

Überschriften (Haupt- und Zwischenüberschriften) zeigen die hierarchische Struktur von Dokumenten an oder besser gesagt bilden diese ab. Blinde Nutzer, die die visuelle Präsentation (z.B. Fettung, andere Schriftart, größere Schrift) nicht sehen können sind darauf angewiesen, dass die Strukturierung unabhängig von der visuellen Darstellung vorhanden und logisch ist. Dafür müssen die Elemente H1 bis H6 genutzt werden, nur dann können sich blinde Nutzer durch ihren Screenreader z.B. nur die Überschriften als Überschriftenverzeichnis vorlesen lassen und/oder (in JAWS) mit der H-Taste von Überschrift zu Überschrift springen.

Wird der Header nicht als Überschrift ausgezeichnet, so ist die erste angesprungene der erste Blogeintrag.

Woher weiß nun der Nutzer auf welchem Blog er sich befindet? Mit der Technik des Springens von Überschrift zu Überschrift, eine durchaus häufig angewandte Strategie, weiß er den Titel des Blogs nur aus dem Dokumenttitel.

Ist diese Information immer ausreichend?

Verneint man dies, so muss der Blog-Titel mit H1 ausgezeichnet werden. Daran schließt sich die Frage an, ob der Untertitel eines Blogs eine H2 ist oder ein Absatz (P). Beides ist auch Sicht der Barrierefreiheit unproblematisch, aber was ist semantisch korrekter?

Im Fall einer H2 würde man als Nutzer erwarten, dass sich dieser H2 ein Inhaltsbereich anschließt, was im Fall des Blogheaders nicht gegeben ist. Dennoch sticht der Blogheader von seiner Bedeutung her (nämlich z.B. Untertitel zu sein) von einem Artikel hervor, sollte also betont sein. Diese Betonung könnte durch die Verwendung von „strong“ erreicht werden, da dann die Sprachausgabe diesen Inhalt besonders betonen kann.

Die Verwendung von „strong“ kann jedoch visuell unerwünscht sein. In diesem Fall bietet sich eine Lösung über die CSS an. In den CSS legt man fest, dass für diesen besonderen Fall „strong“ als normal dargestellt wird. Den visuell orientierten Besucher wird es nicht stören, da er aufgrund der Positionierung von Blog und Blogbeschreibung bzw. Untertitel den Inhalt des P-Elements trotzdem als Untertitel identifiziert. Dem blinden Nutzer wird der Untertitel betont vorgelesen und erhält dadurch eine besondere Gewichtung.

2 Kommentare

  1. Also das mit der Definitionsliste als Blog-Eintrag ist meines Erachtens nicht wirklich sinnvoll.

    Das mit H1 als Blogtitel und übergangslos hinten nach eine H2 für einen Untertitel, halte ich auch nicht gerade für den Sinn der Sache.

    Die angesprochene Lösung der Überschrift als Hx-Element und den Untertitel mit „strong“ auszuzeichnen und gegebenenfalls für sehende Nutzer per CSS „strong“ nicht fett darzustellen, halte ich für die logische Lösung.

    Es gibt aber für kurze – die Betonung hier auf kurz – Unter- oder Beititel noch eine Lösung:
    Das Inline-Element „small“.
    Innherhalb einer H-Überschrift, kann ein Teil als „small“ ausgezeichnet werden. Dieses „small“-Element kann ich dann via CSS beispielsweise in eine eigene Zeile setzen und sonstwie noch formatieren.

    Ich schätze mal (ich weiß es nicht konkret), dass Screen-Reader zum Beispiel das „small“-Element innerhalb eines Hx schon registrieren und dementsprechende Aktion setzen.
    Vielleicht kann das jemand mit Screen-Reader mal ausprobieren. Suchmaschinen checken das u.U. sehr wohl.

    • Spannend. Ein – wie man glauben könnte – einfaches Thema und dann doch unterschiedliche Meinungen. Ich werde versuchen mal all die Kommentare und Beiträge zusammenzufassen um damit ein Gesamtbild zu erhalten. Mal sehen, ob das gelingt.
      Auf alle Fälle danke für die Beiträge!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert