Zweiter Blick: Überschriften
Informationen
Symbol Überschrift

Überschriften barrierefrei und verständlich

Überschriften bedürfen eines vertieften Problembewusstseins von redaktionell Verantwortlichen und einer adäquaten technischen Umsetzung.

Ein korrekter und hinreichender Einsatz von Überschriften verbessert maßgeblich die Barrierefreiheit und Nutzungsfreundlichkeit von Informationen.

Die folgenden Hinweise für die redaktionelle Gestaltung gelten sowohl für Webseiten als auch für Dokumente.

Bedeutung von Überschriften

Diagonales Lesen

Webseiten werden kaum wie Romane von der ersten bis zur letzten Zeile gelesen. Vielfach wird lediglich nach einzelnen Inhalten oder Funktionalitäten recherchiert. Überschriften stellen dabei eine wesentliche Orientierungshilfe dar.

Überschriften machen das diagonale Lesen leichter und relevante Seitenbereiche besser auffindbar. Eine Strukturierung durch unterschiedliche Ebenen für einzelne Überschriften erscheint bei umfangreicheren Informationen zusätzlich erforderlich.

Für das diagonale Lesen müssen Überschriften zunächst als Blickfang visuell hervorgehoben werden. Redaktionell sollten sie den folgenden Inhalt knapp und präzise zusammenfassen. Und damit vor allem blinde Menschen diagonal einen Seiteninhalt erarbeiten können, muss jede Überschrift auch technisch angemessen in der entsprechenden Überschriftenebene realisiert werden.

Screen Readerund Überschriften

Am Bildschirm können Seitenbereiche und Seitenelemente spontan gesehen und übersprungen werden. Ein konzentrierter Blick auf Hervorhebungen genügt beim Scrollen.

Tools zum reinen Vorlesen von Webseiten liefern Zeile für Zeile ohne Angabe vorhandener Semantik eine lineare Wiedergabe der Informationen. Ihr großes Manko besteht also darin, dass sie kein diagonales Lesen erlauben.

Für Menschen, die auf Screen Reader angewiesen sind, stellen technisch und inhaltlich präzise Überschriften ein essentielles Merkmal bei der Erarbeitung von umfangreicheren Inhalten dar. Diese assistierenden Technoligien verfügen über einfache Vorlesetools hinaus über Mechanismen, die gezielt die Wahrnehmung und Navigation von technisch verfügbaren Überschriften unterstützen:

Dialogfeld vorhandener Überschriften
Durch einen Shortcut kann in einem eigenen Dialogfeld eine Liste vorhandener Überschriften erstellt werden. Dies bringt folgende Vorteile:
  • Ich kann mir bestenfalls schon einmal einen Überblick über eine Seite verschaffen.
  • Durch Drücken eines Buchstabens erreiche ich das erste bzw. nächste Element in der Liste mit dem entsprechenden Anfangsbuchstaben.
  • Ein Klick in der Überschriftenliste führt zum einzelnen Inhalt.
So kann ich in einem Wikipedia - Artikel zu einem Land so oft die Taste G tippen, bis ich auf Geschichte gelandet bin und dann ENTER drücken.
Kurztasten zu Überschriften
Screen Reader stellen Mechanismen bereit, um Überschriften im Browser oder Acrobat Reader rasch anzuspringen:
  • Gewöhnlich führt das Drücken der Taste H (Heading) zur nächsten Überschrift.
  • Mit den Tasten 1 bis 6 können Überschriften der jeweiligen Ebene angesteuertwerden.
  • Gibt es nur eine Überschrift der Ebene 1 und zwar für die Hauptüberschrift des Inhaltsbereiches, kann auf diese Weise einfach durch Drücken von 1 der Hauptinhalt erreicht werden.
Durch gleichzeitiges Drücken von SHIFT wird das vorherige Element erreicht.

Markup für Überschriften

Bedeutung des Markup

Was visuell als Überschrift fungiert, muss technisch mit dem entsprechenden Markup versehen werden. Es genügt nicht, einen Textbereich mit vertikalen Abständen zu versehen und ihn größer oder fetter zu formatieren. Solche visuellen Effekte sind zwar erforderlich, reichen aber für die Barrierefreiheit nicht aus. Stattdessen müssen Überschriften mit einem entsprechenden Markup semantisch gekennzeichnet werden. Dies erleichtert im Übrigen die Lesbarkeit des Codes und die zentrale Formatierung mittels einer CSS-Datei.

Wann etwas als Überschrift zu gestalten ist, mit welcher Überschriftenebene und mit welchem Text bedarf also jeweils genauer Überlegungen.

Code für eine Überschrift

Markup bezeichnet die technische Kennzeichnung für ein HTML-Element im Seitencode. Für eine Überschrift der Ebene 1 sieht der Code beispielsweise folgendermaßen aus:

<h1>Willkommen auf meiner Startseite!</h1>

Die Ziffer im Überschriften-Tag steht für die Überschriftenebene. Zulässig sind Überschriften von Ebene 1 bis 6, allerdings empfiehlt sich für die Übersichtlichkeit einer Webseite eine flachere Überschriftenhierarchie.

Kein Missbrauch von Markup für Überschriften

Das Markup für Überschriften darf nicht missbräuchlich zur visuellen Formatierung oder Hervorhebung von Seitenelementen verwendet werden. Was mit einem Überschriftentag gekennzeichnet ist, muss tatsächlich eine Überschrift sein.

Klar ist jedenfalls, dass beides einen Missbrauch darstellt. Was mit einem Überschriftentag versehen ist, muss tatsächlich eine Überschrift sein.

ARIA-Anweisungen für Überschriften

In der Regel sollte im HTML - Code das entsprechende Markup für Überschriften verwendet werden. Falls dies nicht möglich ist, kann die ARIA-Anweisung role="heading" eingesetzt werden.

Befinden sich auf einer Webseite mehr als eine Überschrift und unterscheiden sich Überschriftenebenen visuell, muss die Überschriftenhierarchie adäquat mit dem aria-level Attribut versehen werden. Der Code könnte insgesamt also folgendermaßen aussehen:

<div role="heading" aria-level="1">Starte meine Anwendung!</div>

ID-Attribut verwenden

Es empfiehlt sich, jeder Überschrift eine eindeutige ID zuzuweisen. Dies ist einerseits nötig, um allenfalls ein verlinktes Inhaltsverzeichnis einer Webseite zu erstellen, andererseits erlaubt es, von einer anderen Webseite direkt auf einen Seitenbereich zu verlinken.

Der Code für die Überschrift könnte etwa folgendermaßen aussehen:

<h2 id="id-attribute">ID-Attribut</h2>

Der Code für diesen Link zu dieser Überschrift würde in einem Inhaltsverzeichnis für die Seite so aussehen:

<a href="#id-attribute">ID-Attribut<</a>

Anmerkungen

Überschriftenebenen

Überschrift Ebene 1

Bedeutung der Überschrift Ebene 1 für die Navigation

Die Hauptüberschrift jeder Webseite sollte als Überschrift der Ebene 1 gekennzeichnet sein. Dies ermöglicht in Screen Readern eine rasche Navigation zum Hauptinhalt, da dieser üblicherweise durch Drücken der Taste 1 annavigiert werden kann.

Es sollte daher auch ausschließlich der Überschrift des Hauptinhalts eine Überschrift der Ebene 1 zugewiesen werden. ÜberschriftenEbene 1 für das Logo zur Optimierung für Suchmaschinen (SEO) sind aus Sicht der Barrierefreiheit störend.

Überschrift Ebene 1 verbergen

Auf der Startseite eines Webauftritts finden sich oft mehrere verlinkte Hauptüberschriften, die aus grafischen Gründen nicht mit einer Überschrift der Ebene 1 versehen werden sollten. Die Empfehlung, dass der Hauptinhalt mit einer exklusiven Überschrift der Ebene 1 beginnen sollte, bleibt. Notfalls kann eine entsprechende Hauptüberschrift für den Screen Reader vorbehalten werden.

Der Code könnte mit entsprechenden Anweisungen für die Screen Reader Only (sr-only) etwa folgendermaßen aussehen:

<h1 class="sr-only" >Hauptinhalt</h1>

Die relativen Hauptinhalte im Mainbereich müssten dann mit <h2> beginnen.

[WebAIM] Semantic Structure: Regions, Headings, and Lists > Headings (abgerufen 24.09.2020)
A page should typically have only one <h1>.
[WAI] Headings (abgerufen 24.09.2020)
Das Tutorial thematisiert die exklusive Verwendung von H1 zwar nicht, startet den (Haupt-) Inhalt aber in den Beispielen jeweils mit Überschrift Ebene 1.
[WebAIM Discussion] Thread: Multiple H1 tags in an HTML5 web page
Diskutiert wird der Spezialfall, wenn sich auf einer Seite mehrere umfangreichere HTML5 Sektionen befinden.
Überschriftenebene 1 in Dokumenten
Infos auf meinem Webartikel zu barrierefreien Word-Dokumenten.

Überschriftenhierarchie

Die Überschriftenhierarchie muss konsistent sein. Auf H1 folgt H2, auf H2 folgen H2 oder H3, auf H3 folgen H2, H3 oder H4, und so weiter. Diese Strukturierung des Seiteninhalts erleichtert sowohl das Verständnis, als auch das „diagonale Lesen“ und die Navigationsmechanismen innerhalb einer Webseite mittels Assistierender Technologien.

Überschriften außerhalb des Hauptinhalts

Bevorzugt Ebene 6

Navigationsbereiche außerhalb des Hauptinhalts können Überschriften erhalten, unseres Erachtens bevorzugt der Ebene 6. Warum ich die Ebene 6 bevorzuge, sei hier dargestellt.

Wenn Sie von einem Dokument ein Inhaltsverzeichnis sehen, erwarten Sie nur Überschriften zum Inhalt des Dokuments und nicht zu Navigationsbereichen für das Programm. Auf Webseiten hat es sich aber eingebürgert, dass auch Navigationsbereiche Überschriften erhalten können.

Nun sollten diese Navigationsüberschriften die Navigation innerhalb des Hauptinhalts aber so wenig wie möglich stören.

Wenn es auf einer Webseite – wie empfohlen – nur eine Überschrift der Ebene 1 für die Hauptüberschrift am Beginn des Inhaltsbereichs gibt, dann bleibt diesem Seitenbereich mit dem Screen Reader die exklusive Kurztaste 1 vorbehalten. Überschriften für Navigationsbereiche, die sich im Quellcode vor dem Hauptinhalt befinden, können so einfach übersprungen werden.

Nun stellt sich die Frage, welche Überschriftenebene den Navigationsbereichen zugeordnet werden soll. Leider gibt es dafür keine Standards, sondern nur Empfehlungen oder schlichtweg den tatsächlichen überwiegenden Gebrauch.

Häufig wird für Navigationsbereiche die Überschriftenebene 2 verwendet. Wir bevorzugen für Überschriften für Navigationsbereiche die Ebene 6. Dies erscheint uns aus folgenden Gründen zweckmäßig:

  1. Die Überschriftenebene 6 kommt im Hauptinhalt wohl kaum einmal vor. Im Sinne einer flachen und übersichtlichen Überschriftenhierarchie sollte diese Ebene vermutlich überhaupt nie im Hauptinhalt vorkommen. Die Ebene 6 kann daher gezielt eingesetzt werden, um einen Navigationsmechanismus auf Bereiche außerhalb des Hauptinhalts bereitzustellen.
  2. Screen Reader stellen teilweise eine Funktionalität zur Verfügung, die Überschriften nur bis zu einer bestimmten Ebene auflisten. Wird der Hauptinhalt mit einer adäquaten Überschriftenhierarchie versehen, kann ein solcher Screen Reader also ein exklusives Inhaltsverzeichnis für den Hauptinhalt generieren.

Unsere Beobachtung ist jedoch auch, dass auf vielen Seiten, die auf Barrierefreiheit achten, die Überschriftenebene 2 für die Navigationsbereiche außerhalb des Hauptinhalts herangezogen wird. Die Gründe dafür sind mir nicht klar. Die Tatsache sollte jedoch bei der Nutzung von Screen Readern beachtet werden und könnte bei NutzerInnen von Screen Readern zu Gewöhnungseffekten geführt haben. Überschriften der Ebenen 2 oder 6 stehen also zur Wahl. Tendenziell empfehlen wir Ebene 6. Alle anderen Ebenen sollten aber vermieden werden.

Fehlermeldungen von Validatoren

Maschinelle Validationstools liefern eine Fehlermeldung, wenn die Überschriftenhierarchie nicht konsistent ist, in HTML5 innerhalb einer Region. Dies ist beim Web Accessibility Checker AChecker etwa der Error 39.

Diese Fehlermeldung kann beim konsequenten Einsatz einer Überschriftenebene außerhalb des Hauptinhalts ignoriert werden.

ARIA-Überschriften mit Ebenen versehen

In der Regel sollte das HTML - Markup für Überschriften verwendet werden. Wenn ARIA role="heading" trotzdem benötigt wird und sich auf einer Webseite mehrere Überschriften befinden, sollte auch mit dem aria-level – Attribut die Überschriftenebene festgelegt werden.

role="heading" aria-level="1"

Textliche Gestaltung von Überschriften (Texting)

Knappe und präzise Zusammenfassung

Überschriften sollten in der Regel so formuliert werden, dass sie den folgenden Inhalt gut zusammenfassen, also knapp und präzise. Auf diese Weise erleichtern sie das Verständnis der folgenden Inhalte. Gleichzeitig unterstützen sie Menschen, die sich einen Überblick über eine Seite verschaffen wollen, also „diagonal“ lesen. Präzise Überschriften erleichtern aber vor allem auch, sich mit einem Screen Reader einen Überblick über eine Seite zu verschaffen.

Schlechte Beispiele

Ausnahmebeispiel

Es gibt natürlich Kontexte, in denen bewusst in der Überschrift der folgende Inhalt nicht zusammengefasst wird. Dies kann etwa der Fall sein, wenn die Pointe eines Witzes nicht vorweggenommen werden soll.

Als Beispiel sehen wir uns folgenden, zugegeben als solchen sehr schwachen Witz an.

Zwei Männer stehen auf einem Hochhausdach. Der erste schlägt eine Wette vor: Ich wette mit Dir, dass ich hier runterspringen kann und mit einem Wackeln der Finger wieder zu Dir aufs Dach fliegen werde. Der Zweite schlägt ein und der erste springt und schafft es tatsächlich zurück auf das Dach. Voller Staunen lässt sich der Zweite das Ganze nochmals zeigen und erwidert nach erfolgreicher Vorführung: Wenn Du das schaffst, kann ich das auch. Der erste Mann schlägt ein und der zweite springt vom Dach und wird am Boden zerschmettert. Der Erste triumphiert am Dach: Schon gut, wenn man der Superman ist.

Dieser Witz wird Ihnen ein mühsames Lächeln entlockt haben. Zum Brüllen ist aber, wie mir ein sehr guter Freund vor Jahren den Witz präsentierte. Mein Freund eröffnete mit: Kennst Du schon den Witz vom Superman?

Ich erzähle diese Anekdote gerne in dieser Reihenfolge und ernte regelmäßig vorerst ein freundliches Ha, Ha! und ein herzhaftes Gelächter über die Variante mit der Vorwegnahme der Pointe. Der Witz erhält einfach zweckmäßigerweise nicht die Überschrift Der Witz vom Superman.

Konsistenter Wortgebrauch (Wording)

Ausdrücke und Formulierungen sollten innerhalb des Webauftritts konsistent verwendet werden. Das ist für das Verständnis von Überschriften und Navigationsmechanismen empfehlenswert, auch wenn etwa folgende Ausdrücke die gleiche Bedeutung und Funktion haben können:

Anfang des Überschriftentextes

Screen Reader verfügen über die Funktionalität, eine Liste aller Überschriften von einer Webseite in einem eigenen Dialogfenster zu erstellen. Das Drücken eines Buchstabens führt zum ersten Eintrag in der Liste mit dem jeweiligen Buchstaben am Anfang. Auf einer Wikipedia-Seite zu einem Land führt das Drücken von G beispielsweise zu Geografie, Geschichte, usw. jeweils in der Reihenfolge des Auftretens im Code der Webseite. Dies ist für Nutzer von Screen Readern eine wertvolle Navigationshilfe.

Deshalb sollten am Beginn einer Überschrift folgende textuelle Empfehlungen nach Möglichkeit berücksichtigt werden:

Anfangszeichen für Überschriften
Falsch Richtig
Die Geschichte Tirols Geschichte Tirols
Zur Geschichte Tirols Geschichte Tirols
Informationen zur Geschichte Tirols Geschichte Tirols
Geschichte Tirols Geschichte Tirols

Werden diese Empfehlungen nicht beachtet, liefert der Screen Reader eine Liste hauptsächlich mit den Anfangsbuchstaben D, Z und I.

Aus demselben Grund sollten auch Satzeichen und Sonderzeichen am Anfang der Überschrift weithin vermieden werden („, >, →, ...): Sie verhindern den Navigationsmechanismus des Screen Readers mit dem Anfangsbuchstaben.

Check der Konsistenz

Um die konsistente Verwendung von Überschriften auf einer Webseite zu prüfen, kann folgende Vorgangsweise verwendet werden:

  1. Erstellen Sie an Hand der Überschriften ein Inhaltsverzeichnis der Webseite.
  2. Prüfen Sie, ob das Inhaltsverzeichnis strukturell einen guten Überblick über den Seitenaufbau liefert.
  3. Prüfen Sie, ob die Überschriftenebenen adäquat und konsistent sind.
  4. Prüfen Sie, ob das Wording der Überschriften einen guten Überblick über die folgenden Inhalte des einzelnen Seitenbereiches liefern.
  5. Prüfen Sie, ob einzelne Überschriften möglicherweise missbräuchlich zur visuellen Formatierung verwendet wurden.

Tipp zum Erstellen eines Inhaltsverzeichnisses mittels Screen Reader

Moderne Screen Reader erlauben, aus den <H>-Tags in einem eigenen Fenster eine Liste der Überschriften zu generieren. Teilweise lässt sich einschränken, bis zu welcher Überschriftenebene solcherart ein Inhaltsverzeichnis generiert wird. Wenn auf einer Webseite Überschriften für Navigationsbereiche mit der untersten Ebene 6 gekennzeichnet sind, kann auf diese Weise bequem ein Überschriftenverzeichnis des Hauptinhalts dargestellt werden.

Der Kurztastenbefehl für die Auflistung der Überschriften ist bei Jaws JAWSTASTE + F6. Die JAWSTASTE ist standardmäßig die 0 (NULL) am NUMBLOCK oder die EINFÜGETASTE.

Achtung: Mit diesem Verfahren werden nur die aktiv verfügbaren Überschriften aufgelistet. Seitenbereiche, die etwa erst ausgeklappt werden könnten, werden nicht berücksichtigt. Für eine gründliche Evaluation bleibt also nur eine genaue Analyse des Seitencodes.

Visuelles Erscheinungsbild von Überschriften

Dass das Aussehen von Überschriften erst gegen Ende des Artikels thematisiert wird, liegt nicht daran, dass es unbedeutend ist. Das visuelle Erscheinungsbild von Überschriften ist nur kaum einmal ein Problem für die Barrierefreiheit im Webdesign. Darauf wird erfahrungsgemäß ausreichend geachtet. Der Vollständigkeit halber führen wir hier nur die maßgeblichen Aspekte an.

Die visuelle Darstellung von Überschriften muss die intuitive Wahrnehmung der Seitenstruktur erleichtern. Bereiche des Hauptinhaltsbereichs oder umgebender Bereiche sollen visuell intuitiv mit Überschriften strukturiert werden.

Zur visuellen Differenzierung gegenüber anderen Seitenelementen eignen sich Abstände, Schriftgrößen, Schriftfarben und Ähnliches. Diese Gestaltungselemente können auch zur Differenzierung von Überschriftenebenen herangezogen werden.

Schwer lesbare Schriftarten zur visuellen Differenzierung sollten hingegen vermieden werden.

Werden bei der Schriftgestaltung von Überschriften Farben eingesetzt, muss auf eine ausreichende Kontrastgestaltung geachtet werden.

Reihenfolge der Überschriften

Bedeutung der Reihenfolge

Was auf einer Webseite vermutlich ein Inhalt von höherer Relevanz ist, sollte sich möglichst bald am oberen Bereich des Inhalts finden lassen. Ich versuche auf Zweiter Blick Inhalte etwa nach deren Relevanz für die WCAG Konformitätsstufen zu reihen.

Ein gleich gewichtiges Kriterium für die Reihung von Inhalten ist die Erwartungshaltung für das Surfen auf einer einzelnen Webseite. Dass das Altertum vor dem Mittelalter und der Neuzeit kommen soll, ist unumstritten. Aber soll eine Zusammenfassung am Anfang oder Ende eines Webartikels angeordnet sein? Ich bin auf Zweiter Blick selbst bei dieser Fragestellung noch am Experimentieren.

Gerade bei größeren Artikeln sollte sich die Reihenfolge nicht nach der chronologischen Erarbeitung richten. Es zahlt sich also aus, beim Redigieren einer Webseite auch die Reihung der Überschriften zu überdenken.

Ich habe gerade bei diesem umfangreichen Artikel lange herumgetüftelt, welche Reihenfolge der Themen der Bedeutung der Konformitätsstufen der WCAG und andererseits Ihnen als BesucherInnen wohl am meisten entspricht. Ich bin mir sicher, dass ich es nicht allen recht gemacht habe.

Screen Reader Wahrnehmung der Reihenfolge

Screen Reader lesen durch Drücken der Pfeiltasten den BODY einer Webseite von links oben nach rechts unten aus. Es ist daher wichtig, dass die Elemente im Code linear verständlich und den Erwartungen entsprechend angeordnet sind. Auch Funktionalitäten, wie die Auflistung von Überschriften durch den Screen Reader erfolgen nach der Anordnung im Code.

Die technische Anordnung der Seitenelemente im Code ist selten ein Problem, weil vernünftige HTML Codes gewöhnlich linear konsistent angeordnet sind. Allerdings sollte die Verständlichkeit der Anordnung von Überschriften redaktionell gut reflektiert werden.

Check der Reihenfolge

Um die Konsistenz der Anordnung der Inhalte für die Usability zu prüfen, kann etwa folgendermaßen vorgegangen werden:

  1. Schreiben Sie die Hauptüberschriften des Inhaltsbereichs (main) auf Kärtchen oder einfach in einen Editor. In der Regel sind das die Überschriften der Ebene 2, sofern Sie unseren Empfehlungen für Überschriftenebenen folgen.
  2. Überlegen Sie, welche Inhalte dem Erfahrungshorizont Ihrer Zielgruppe an einer bestimmten Stelle gereiht werden sollten. Reihen Sie die Kärtchen oder Textabschnitte entsprechend.
  3. Überlegen Sie, welche Inhalte für Ihr Zielpublikum von besonderer Relevanz sind. Reihen Sie die Kärtchen oder Textabschnitte entsprechend.
  4. Legen Sie die Inhalte auf der Webseite entsprechend der ermittelten Reihung fest.
  5. Wiederholen Sie die Prozedur innerhalb eines Abschnittes für dessen Unterabschnitte.

Werkzeuge zum Prüfen der Überschriften

Überschriften auflisten mittels Screen Reader

Screen Reader verfügen über Funktionalitäten zum Auflisten von Überschriften. Diese ermöglichen bei der Nutzung einen Überblick über umfangreichere Inhalte im Sinne eines diagonalen Lesens.

Diese Funktionalitäten können jedoch auch zum Test der Überschriften von digitalen Inhalten eingesetzt werden. Üblicherweise werden dabei die Überschriftenebene und der Überschriftentext dargestellt.

Auflisten von Überschriften
Screen Reader Shortcut
JAWS JAWS-Taste + F6
NVDA NVDA-Taste + F6

HeadingsMap (Add-On für Mozilla Firefox)

Die Browserextension HeadingsMap erlaubt die Darstellung der Überschriftenstruktur unter Mozilla Firefox). In einer Seitenleiste können damit die Überschriften und deren jeweilige Ebene eingeblendet werden.

Der jeweilige Seitenbereich kann durch Klicken auf die Überschrift in der Seitenleiste auch angesprungen werden. Das Tool kann daher also auch als verlinktes Inhaltsverzeichnis verwendet werden.

Leider habe ich noch keinen Weg gefunden, die eingeblendete Überschriftenleiste alleine mit der Tastatur zu bedienen. Das Tool scheint also Sehenden vorbehalten zu sein, die zusätzlich motorisch in der Lage sind, eine Maus oder einen Touch Screen zu bedienen.

Das Add-On kann über folgende Seite installiert werden. Ich kann natürlich keine Haftung für allfälligen Missbrauch oder Probleme bei der Verwendung des Tools übernehmen.

Empfehlungen

Empfehlungen für die Aufgabenverteilung

Allgemeine Empfehlungen für die Gestaltung von Überschriften

  1. Was visuell als Überschrift fungiert, muss technisch mit dem entsprechenden Markup versehen werden.
  2. Das Markup für Überschriften darf nicht missbräuchlich zur visuellen Formatierung von Seitenelementen verwendet werden.
  3. Die Hauptüberschrift muss sich visuell und im Quellcode am Beginn des Hauptinhaltsbereiches befinden.
  4. Die Überschriftenhierarchie muss konsistent sein.
  5. Das visuelle Erscheinungsbild der Überschriften muss verständlich sein.
  6. Ausschließlich der Überschrift des Hauptinhalts sollte eine Überschrift der Ebene 1 zugewiesen werden.
  7. Navigationsbereiche außerhalb des Hauptinhalts können Überschriften erhalten, bevorzugt der Ebene 6.
  8. Überschriften sollten so formuliert werden, dass sie den folgenden Inhalt gut zusammenfassen.
  9. Überschriften sollen den Inhalt logisch und visuell gut strukturieren.
  10. Es ist für die Usability von Bedeutung, wenn die Reihenfolge der Überschriften sich nach deren anzunehmender Relevanz und erfahrungsgemäßer Abfolge richtet.
  11. Ausdrücke und Formulierungen sollten innerhalb des Webauftritts konsistent verwendet werden.
  12. In der Regel sollte technisch das HTML - Markup für Überschriften verwendet werden.
  13. Es ist empfehlenswert, jeder Überschrift eine eindeutige ID zuzuweisen.

Empfehlungen für Betreiber von Webseiten

  1. Stellen Sie sicher, dass Ihr Webauftritt ein technisches Framework erhält, das zur Vermeidung von Fehlern bei der Überschriftengestaltung beiträgt!
  2. Schulen Sie Ihre Webredaktion regelmäßig zu den Anforderungen für ein barrierefreies Webdesign!
  3. Verzichten Sie darauf, Überschriften für eine vermeintliche Suchmaschinenoptimierung missbräuchlich zu verwenden!

Empfehlungen für das grafische Design

  1. Für die verwendeten Überschriftenebenen im Hauptinhalt und allenfalls auch für Überschriften bei Navigationselementen muss ein adäquates CSS entwickelt werden.
  2. Die Hauptüberschrift muss sich visuell am Beginn des Hauptinhaltsbereiches befinden.
  3. Navigationsbereiche können Überschriften erhalten. Diese können unsichtbar bleiben, wenn die Funktionalität des Navigationselements intuitiv verständlich ist.
  4. Überschriften benötigen gut lesbare Schriftarten und ausreichende Kontraste zum Hintergrund.

Empfehlungen für die technische Realisierung

  1. Stellen Sie ein Framework bereit, das für jede Seite genau eine Überschrift der Ebene 1 verlangt!
  2. Positionieren Sie dieses H1-Element an den Beginn des Hauptinhalts (HTML5: <main>)!
  3. Verwenden Sie normalerweise HTML - Überschriften. ARIA role="heading" sollte nur in absoluten Ausnahmesituationen eingesetzt werden!
  4. Ausschließlich die Überschrift des Hauptinhalts erhält eine Überschrift der Ebene 1. Nur wenn es unbedingt sein muss, kann auch der Name einer Webseite mit H1 gekennzeichnet werden.
  5. Navigationsbereiche können Überschriften erhalten, bevorzugt der Ebene 6.
  6. Stellen Sie Mechanismen bereit, die P-Elemente mit kurzem Text als mögliche Überschriften identifiziert!
  7. Stellen Sie Mechanismen bereit, die H-Elemente mit langem Text als mögliche grafische Hervorhebung identifiziert!
  8. Stellen Sie Mechanismen bereit, die das Generieren einer eindeutigen ID für jede Überschrift ermöglicht.

Redaktionelle Aufgaben

  1. Ausschließlich die Überschrift für den Hauptinhalt erhält eine Überschrift der Ebene 1.
  2. Sorgen Sie für eine logische Überschriftenhierarchie im Hauptinhalt!
  3. Verwenden Sie das Markup für Überschriften nicht zur visuellen Formatierung von Textabschnitten. F43
  4. Der Text einer Überschrift soll den folgenden Inhalt gut zusammenfassen.
  5. Es ist für die Usability von Bedeutung, wenn die Reihenfolge der Überschriften sich nach deren anzunehmender Relevanz und erfahrungsgemäßer Abfolge richtet.
  6. Ausdrücke und Formulierungen für Überschriften sollten innerhalb eines Webauftritts konsistent verwendet werden.
  7. Vermeiden Sie nach Möglichkeit Sonderzeichen, Artikel und unnötige Formulierungen am Anfang des Überschriftentextes.