Zweiter Blick: Überschriften

BarrierefreiheitDarstellungsoptionen



Überschriften barrierefrei und verständlich

Bedeutung von Überschriften

Diagonales Lesen

Webseiten werden nicht wie Romane von der ersten bis zur letzten Zeile gelesen. Wir suchen gezielt nach Inhalten oder Funktionalitäten innerhalb einer Webseite. Überschriften stellen dabei als Blickfang eine wesentliche Orientierungshilfe dar.

Überschriften müssen daher das diagonale Lesen erleichtern, relevante Seitenbereiche auffindbarer machen und Inhalte hierarchisch gut strukturieren. Damit diese Aufgaben erfüllt sind, müssen technisch, grafisch und redaktionell Überschriften mit besonderer Sorgfalt gestaltet werden.

Selbst Fachkräften aus dem Webdesign arbeiten, erscheint die barrierefreie Gestaltung von Überschriften trivial: Eine Überschrift müsse nur mit dem entsprechenden Markup versehen werden. Dabei ist dies ein notwendiger, aber kein hinreichender Schritt zur Barrierefreiheit und schon gar nicht zur Usability einer Webseite.

Screen Reader und Überschriften

Screen Reader liefern nicht nur eine lineare Wiedergabe einer Webseite. Sie geben Zeile für Zeile Elemente des HTML-Codes wieder. Eine flächige Wahrnehmung und Navigation wie bei einer visuellen Bedienung sind nicht möglich. Am Bildschirm können Seitenbereiche und Seitenelemente spontan gesehen und übersprungen werden. Sprachausgabe und Braillezeile benötigen für die Wahrnehmung von Seitenbereichen und Seitenelementen mit speziellen Funktionalitäten keine visuelle Gestaltung, sondern eine semantische Kennzeichnung.

Screen Reader können eine Liste der Überschriften in einem eigenen Dialogfeld erstellen. Damit kann man sich zunächst einen Überblick über eine Seite verschaffen und dann interessante Bereiche rasch annavigieren.

In diesen Dialogfeldern kann durch Drücken eines Buchstabens das erste bzw. nächste Element in der Liste angesprungen werden, das mit diesem Buchstaben beginnt. So kann ich in einem Wikipedia - Artikel zu einem Land so oft die Taste G tippen, bis ich auf Geschichte gelandet bin, wenn mich gerade das interessiert. Vermeiden Sie daher Sonderzeichen am Anfang einer Überschrift. Es genügt, wenn eine Überschrift in Anführungszeichen steht, dass der Mechanismus mit dem Anfangsbuchstaben nicht mehr funktioniert.

Screen Reader stellen Mechanismen bereit, um bestimmte Seitenelemente im Browser rasch anzunavigieren. Gewöhnlich kommt man durch Drücken der Taste H zur nächsten Überschrift (Heading) und mit SHIFT+H zur vorherigen Überschrift. Mit den Ziffern 1 bis 6 können Überschriften der jeweiligen Ebene angesteuert werden. 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.

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.

  • Leider wird häufig das Markup für Überschriften verwendet, um Textabschnitte visuell hervorzuheben. Dies kommt etwa bei Zeitungsartikeln vor, um den ersten Absatz fetter und größer darzustellen.
  • Es gilt als Trick zur Suchmaschinenoptimierung, Textabschnitte semantisch als Überschriften zu kennzeichnen. Ob dieser Trick überhaupt wirkt, wissen wohl nicht einmal Geheimdienste. Ich kenne allein das Logo im Kopfbereich als tollerierte Überschrift der Ebene 1 außerhalb der semantischen Verwendung.

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

  • Es ist zur besseren Lesbarkeit von Codes hilfreich, als Text für die ID keine Zufallswerte zu generieren, sondern eine Zeichenfolge mit inhaltlichem Bezug zum Element zu verwenden.
  • Umlaute, Leerzeichen und Sonderzeichen sind nicht für IDs zulässig.

Ü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.

Ü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 scre 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

  • Worauf warten? als Überschrift für ein Anmeldeformular.

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:

  • Weiterführende Informationen
  • Ergänzende Informationen
  • Siehe auch

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:

Empfohlene textuelle Gestaltung von Überschriftenanfängen
Falsch Richtig
Die Geschichte Tirols Geschichte Tirols
Zur Geschichte Tirols Geschichte Tirols
Informationen zur 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üfftelt, 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.
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.