Barrierefreies Webdesign — ein zugängliches und nutzbares Internet gestalten

Großer fetter Text macht noch lange keine Überschrift veröffentlicht in 2009zuletzt bearbeitet in

Inhaltliche Gliederung mit Überschriften

Überschriften bzw. Zwischenüberschriften sollen Lesern eines Textes den Einstieg dort ermöglichen, wo die subjektiv relevanten Informationen zu finden sind. Die inhaltliche Gliederung einer Webseite mit Überschriften ist auch ein Aspekt der Barrierefreiheit, vor allem wenn Nutzer nur langsam lesen können oder die Inhalte nur ausschnittsweise wahrgenommen werden können.

In vielen Fällen sind Redakteuren bei dieser Anforderung die Hände gebunden. Wenn längere Texte online gestellt werden sollen, und die Textorganisation zu wünschen übrig lässt, ist es nicht immer möglich, Zwischenüberschriften in einem Text einzufügen. Auch wäre es merkwürdig, wenn z.B. ein "offener Brief", ein Gedicht o.ä. mit Zwischenüberschriften ergänzt würden. Die Anforderung ist eine Anforderung an die redaktionelle Tätigkeit und zielt auf eine bessere Verständlichkeit ab.

Beziehungsebene von Überschriften

Wer eine längere Arbeit z.B. während des Studiums verfasst hat, kennt Gliederungszeichen, die den Überschriften zugeordnet werden, etwa ein System der Art:

1. Einleitung
2. Überschriften auf Webseiten
      2.1 Überschriften im Inhalt
      2.2 Überschriften auf anderen Seitenbereichen
3. Zusammenfassung

Mit der Nummerierung erhalten die Überschriften eine Beziehungsebene. Durch die Nummerierung wird vermittelt, welche Abschnitte zusammengehören bzw. welche untergeordneten Abschnitte zu übergeordneten Abschnitten gehören.

Überschriften mit vorangestellten Symbolen

Für das Web sind Nummerierungen für Überschriften untypisch. Vielmehr wird mit Formatierungen gearbeitet:

Diese Eigenschaften werden für verschiedene Überschriftenebenen variiert und vermitteln optisch auch die Beziehung zwischen den einzelnen Überschriftenebenen.

Im Hinblick auf die Textorganisation ist es wichtig, dass die folgenden Punkte beachtet werden:

  1. Die Überschriftentexte bieten in ihrer Gesamtheit eine inhaltliche Übersicht des Inhalts.
  2. Die HTML-Elemente zur Auszeichnung der Überschriften bilden eine logische Hierarchie, d.h. auf eine H2 folgt eine H3, aber nicht eine H4.
  3. Überschriften leiten immer einen Inhalt ein und stehen nicht für sich alleine.
  4. Überschriften sollten seitenübergreifend konsistent eingesetzt werden.
  5. Längere Texte sollten mit Überschriften unterteilt werden.
  6. Überschriftentexte sollten möglichst kurz, aber vor allem eindeutig und beschreibend sein.

Die optische Gestaltung von Überschriften und die Strukturebene

Darstellung ohne CSS: Überschriftentexte sind wie Absätze formatiert Die Hierarchie der Überschriften ist nicht erkennbar

Im barrierefreien Webdesign geht es bei dem Thema Überschriften auch darum, dass Überschriften auch dann erkannt werden, wenn die optischen Gestaltungsmerkmale der Überschrift nicht wahrgenommen werden können. M.a.W.: die Überschriften müssen sowohl auf der Strukturebene als auch ohne CSS-Unterstützung wahrgenommen werden können:

  1. Visuell erkennbare Überschriften sollen mit den HTML-Elementen H1 bis H6 ausgezeichnet werden
  2. Visuell erkennbare Beziehungen zwischen Überschriften sollen durch die eingesetzten Überschriftenelemente ebenfalls ermittelt werden können

Darstellung ohne CSS: Überschriften und Bedeutungsebene sind erkennbar Die Beziehung der Überschriften zueinander wird auch ohne CSS deutlich

Für Nutzer, die die formatierten Überschriften am Bildschirm erkennen, spielt es normalerweise keine Rolle, ob eine Überschrift mit einem der sechs Überschriftenelemente ausgezeichnet ist oder nicht. Die Hierarchiestufe der Überschrift wird meist mittels Formatierungen (Schriftgröße, Farbe usw.) deutlich.

Für Screenreadernutzer ist die Überschriftenstruktur mit HTML-Elementen wichtig. Screenreader verfügen über spezielle Funktionen, die es ermöglichen, von einem Überschriftenelement zum nächsten zu springen oder anhand der Überschriften einer Seite ein Inhaltsverzeichnis zu erstellen.

Überschriftenliste im Screenreader JAWS 7.1 Dialogfenster mit einer Liste von Überschriften. Mit den Pfeiltasten kann eine Überschrift ausgewählt und dorthin gesprungen werden.

Die Überschriftenliste entspricht der Vorgehensweise sehender Nutzer, die beim Seitenaufruf zunächst die Überschriften mit den Augen "scannen" und dann entscheiden können, ob der Inhalt interessant ist oder nicht.