Kompatibilität:

WebSite X5 Evo und Pro ab v.2025.1

Eine bewährte und effektive Methode zur Verbesserung der Lesbarkeit besteht darin, Text in Absätze zu gliedern und mit Überschriften und Unterüberschriften zu strukturieren, um Inhalte klar abzugrenzen. So wird verhindert, dass die Seite wie eine unübersichtliche Textwand erscheint, die Leser abschreckt. Diese Technik trägt dazu bei, die Benutzerfreundlichkeit zu verbessern, indem Informationen leichter erfassbar werden. Zudem spielt die gezielte Verwendung von Überschriften eine entscheidende Rolle für die Barrierefreiheit sowie für die Suchmaschinenoptimierung (SEO), da sie sowohl für Screenreader-Nutzer als auch für Suchmaschinen-Algorithmen die Seitenstruktur verständlicher macht.


In dieser Anleitung erklären wir, wie man Überschriften richtig verwendet. Dabei gehen wir auf folgende Themen ein:


Was sind Überschriften

Überschriften sind HTML-Elemente, die dazu dienen, Titel und Untertitel innerhalb einer Webseite zu definieren und den Inhalt in eine klar strukturierte Hierarchie zu gliedern. Sie reichen von der höchsten Ebene, dargestellt durch das <h1>-Tag, bis zur niedrigsten, <h6>. Wie wir später genauer sehen werden, hat jede Ebene eine spezifische Funktion und sollte konsistent verwendet werden, um die Beziehung zwischen den verschiedenen Abschnitten der Seite widerzuspiegeln.


Diese Hierarchie ist nicht nur eine visuelle Konvention, sondern auch eine semantische Struktur, die für das Web von grundlegender Bedeutung ist. Überschriften verbessern nicht nur die Darstellung von Inhalten, sondern vermitteln auch Suchmaschinen und unterstützenden Technologien (wie Screenreadern) die logische Organisation einer Seite. Beispielsweise ermöglichen Screenreader Nutzern, schnell von einer Überschrift zur nächsten zu springen, was Überschriften zu einem unverzichtbaren Werkzeug für die Barrierefreiheit macht.


WCAG-Richtlinien

Die Web Content Accessibility Guidelines (WCAG), der internationale Standard für Barrierefreiheit im Web, legen besonderen Wert auf die korrekte Verwendung von Überschriften, um sicherzustellen, dass Inhalte für alle Nutzer, einschließlich Menschen mit Behinderungen, zugänglich sind. Unter den WCAG-Prinzipien sind die wichtigsten Richtlinien für die Nutzung von Überschriften im „Wahrnehmbar“- und „Verständlich“-Prinzip enthalten, die eine klare und logische semantische Struktur erfordern.


Die wichtigsten WCAG-Erfolgskriterien in Bezug auf Überschriften sind:

  • Kriterium 1.3.1 - Informationen und Beziehungen (Stufe A)

Legt fest, dass Informationen so organisiert werden müssen, dass die Beziehungen zwischen den verschiedenen Teilen des Inhalts von Tools wie Screenreadern erkannt werden können. Daher sollten Überschriften nicht aus rein ästhetischen Gründen verwendet werden, sondern konsistent, um die inhaltliche Hierarchie korrekt darzustellen.

  • Kriterium 2.4.1 - Blöcke überspringen (Stufe A)

Erfordert, dass Benutzer Inhalte schnell und effizient navigieren können. Überschriften sind hierfür essenziell, da sie eine Navigation nach Abschnitten mit Screenreadern oder Schnellwahl-Funktionen (z. B. „Zur Sektion springen“) ermöglichen. Damit dies effektiv funktioniert, müssen Titel und Untertitel die Informationen der Seite in sinnvolle Abschnitte gliedern.

  • Kriterium 2.4.6 - Überschriften und Beschriftungen (Stufe AA)

Erfordert, dass Überschriften und Beschriftungen beschreibend sind und eine klare, spezifische Angabe zum entsprechenden Inhalt liefern. Das bedeutet, dass Überschriften den Abschnitt, den sie repräsentieren, genau beschreiben müssen, ohne Mehrdeutigkeiten oder generische Bezeichnungen.

  • Kriterium 2.4.10 - Abschnittsüberschriften (Stufe AAA)

Betont die Bedeutung einer konsistenten Seitenstruktur, die das Verständnis und die Navigation erleichtert.


Wie viele und welche Arten von Überschriften gibt es?

Wie bereits erwähnt, werden Überschriften durch sechs verschiedene HTML-Tags definiert, die von der wichtigsten <h1> bis zur weniger relevanten <h6> reichen. Jede Überschrift erfüllt eine bestimmte Funktion innerhalb der hierarchischen Struktur einer Webseite. Diese Tags helfen dabei, Inhalte in Abschnitte und Unterabschnitte zu gliedern, wodurch die Seite besser lesbar und verständlicher wird. Schauen wir sie uns im Detail an:

  • <h1>: Dies ist der Haupttitel der Seite. Jede Seite sollte nur eine <h1>-Überschrift haben, die das Hauptthema oder den Schwerpunkt des Inhalts darstellt. Ein Beispiel für eine <h1>-Überschrift wäre der Titel eines Artikels, wie z. B. "Anleitung zur Barrierefreiheit im Web".
  • <h2>: Wird für die Hauptüberschriften innerhalb der Unterthemen verwendet. Jede <h2>-Überschrift kennzeichnet einen neuen Abschnitt, der einen bestimmten Aspekt des Themas behandelt. Beispiele für <h2>-Überschriften könnten "Warum ist Barrierefreiheit wichtig?" und "WCAG-Richtlinien" sein.
  • <h3>: Wird für Unterüberschriften innerhalb eines durch <h2> definierten Abschnitts verwendet. Sie helfen dabei, Inhalte weiter in Unterthemen zu gliedern. Ein Beispiel wäre innerhalb des Abschnitts "Warum ist Barrierefreiheit wichtig?" eine Untersektion wie "Vorteile für Nutzer".
  • <h4>, <h5> und <h6>: Diese Tags werden für weitere Unterteilungen des Inhalts verwendet, sind jedoch seltener als die ersten drei. Sie können für detaillierte Unterabschnitts-Titel oder für komplexe Inhalte mit tieferer Strukturierung genutzt werden.


Wie man Überschriften richtig verwendet

Die korrekte Verwendung von Überschriften ist entscheidend, um sicherzustellen, dass eine Seite gut strukturiert, zugänglich und einfach zu navigieren ist. Durch das Befolgen einiger einfacher Richtlinien lässt sich eine hierarchische Struktur erstellen, die das Benutzererlebnis verbessert und Inhalte auch für Nutzer mit unterstützenden Technologien zugänglich macht. Hier sind die wichtigsten Regeln:

  1. Logische Hierarchie einhalten:

    Überschriften sollten in einer logischen Reihenfolge verwendet werden. Es sollten keine Ebenen übersprungen werden: Zum Beispiel sollte man nicht direkt von einem <h1> zu einem <h3> springen, ohne ein <h2> dazwischen. Jede Ebene sollte eine logische Beziehung darstellen: <h2> ist dem <h1> untergeordnet, <h3> dem <h2> und so weiter.

  2. Nur ein <h1> pro Seite:

    Jede Seite sollte nur ein einziges <h1> enthalten, um eine klare semantische Struktur zu gewährleisten. In einigen Fällen kann es jedoch sinnvoll sein, mehrere <h1>-Elemente zu verwenden, z. B. bei One-Page-Websites. In einer einseitigen Website gibt es verschiedene Abschnitte mit eigenen Themen, sodass mehrere <h1>-Überschriften gerechtfertigt sein können. Auch aus SEO-Sicht hat Google klargestellt, dass mehrere <h1>-Überschriften in einem sinnvollen Kontext akzeptabel sind.

  3. Beschreibende Überschriften verwenden:

    Jede Überschrift sollte den Inhalt des Abschnitts genau widerspiegeln. Beispielsweise sollte eine <h2>-Überschrift mit dem Titel „Vorteile von SEO“ einen Abschnitt einleiten, der sich genau mit diesen Vorteilen befasst.

  4. Leere oder unnötige Überschriften vermeiden:

    Überschriften sollten nicht nur zu gestalterischen Zwecken verwendet werden (z. B. um Text zu vergrößern oder zu formatieren). Stattdessen sollten CSS-Stile genutzt werden.

  5. Überschriften zur erleichterten Navigation verwenden:

    Überschriften sollten so gestaltet sein, dass Nutzer von Screenreadern leicht zwischen den Abschnitten wechseln können.


Ein Beispiel für eine korrekt strukturierte Hierarchie:

<h1>Anleitung zur Barrierefreiheit im Web</h1>
  <h2>Warum Barrierefreiheit wichtig ist</h2>
    <h3>Vorteile für Nutzer</h3>
    <h3>Auswirkungen auf SEO</h3>
  <h2>WCAG-Richtlinien</h2>
    <h3>Grundlegende Prinzipien</h3>
    <h3>Konformitätskriterien</h3>
  <h2>Fazit</h2>

<h1> und <title>: Unterschiede und Verwendungen

Oftmals werden die <h1>-Überschrift und das <title>-Tag verwechselt und fälschlicherweise austauschbar verwendet. Tatsächlich erfüllen beide eine wichtige Rolle in der Struktur und im Verständnis einer Seite, haben jedoch unterschiedliche Funktionen und Einsatzbereiche.


Das <h1>-Tag stellt den Haupttitel der Seite innerhalb des sichtbaren Inhalts dar. Es dient dazu, das Hauptthema der Seite zu kennzeichnen. Es ist ein Orientierungspunkt für Benutzer und für Screenreader-Nutzer, da es eine klare Angabe darüber liefert, worum es auf der Seite geht.


Das <title>-Tag hingegen wird im <head>-Bereich verwendet, um den Titel der Webseite festzulegen, der in der Titelleiste des Browsers, in geöffneten Tabs und in den Suchmaschinenergebnissen erscheint. Es ist im Seiteninhalt nicht sichtbar, spielt jedoch eine wesentliche Rolle für die SEO-Optimierung und die Benutzerführung. Es sollte für jede Seite einzigartig sein und eine kurze, aber präzise Beschreibung des Inhalts bieten.


Beide Tags arbeiten zusammen, um die Klarheit und Struktur der Seite zu verbessern: Das <h1> hilft Benutzern und unterstützenden Technologien, den Inhalt der Seite sofort zu erfassen, während das <title> die Sichtbarkeit der Seite in Browsern und Suchergebnissen erhöht.


Überschriften und SEO

Überschriften sind nicht nur ein nützliches Mittel zur Verbesserung der Barrierefreiheit und Benutzerfreundlichkeit, sondern sie spielen trotz der Tatsache, dass sie kein direkter Ranking-Faktor sind, eine wichtige Rolle in der SEO-Optimierung, da sie die Struktur und das Verständnis des Inhalts für Suchmaschinen verbessern. Tatsächlich weist Google Überschriftentags nicht mehr direkt eine „Gewichtung“ zu, wie es in der Vergangenheit der Fall war, sondern nutzt die Informationen innerhalb der Überschriften, um den Kontext und die Organisation einer Seite zu interpretieren.


Laut Google tragen Überschriften maßgeblich dazu bei:

  • Die Benutzererfahrung zu verbessern, ein entscheidender Faktor für Google. Da Überschriften den Nutzern helfen, die gesuchten Informationen schneller zu finden, tragen sie dazu bei, dass Besucher länger auf der Seite bleiben und die Absprungrate verringert wird.
  • Die Verständlichkeit der Seite für Suchmaschinen zu erleichtern.
  • Inhalte zu optimieren. Überschriften können relevante Schlüsselwörter enthalten und für die Erstellung von Featured Snippets und anderen erweiterten Suchergebnissen (z. B. hervorgehobene Ergebnisse) genutzt werden.


Zusammenfassend trägt eine strategische und korrekte Nutzung von Überschriften dazu bei, leserfreundlichere, besser strukturierte und optimierte Seiten zu erstellen, was sich positiv auf die SEO und das indirekte Ranking in den Suchergebnissen auswirkt.


Überschriften in WebSite X5 verwalten

WebSite X5 integriert alle notwendigen Werkzeuge, um Überschriften korrekt zu verwalten und gleichzeitig semantischen Code zu generieren, wie es die Barrierefreiheitsstandards erfordern.


Insbesondere können Sie während der Arbeit an ihrem Projekt Stile für Überschriften und Texte definieren und diese nutzen, um die Überschriften korrekt zu strukturieren. Dazu kònnen sie die Anleitungen Wie definiert und wendet man einen Stil für Website-Texte an? und Wie verwaltet man Überschriften-Tags? folgen.


Durch die Einhaltung der in diesem Leitfaden besprochenen Best Practices können Sie Ihre Seiten effektiv strukturieren und deren Lesbarkeit sowie Barrierefreiheit verbessern.


Alle Ihre Einstellungen werden von WebSite X5 automatisch interpretiert und in semantischen HTML-Code übersetzt, der internationalen Standards entspricht. Zum Beispiel werden die zuvor erwähnten Kriterien 1.3.1 - Informationen und Beziehungen (Stufe A) und 2.4.1 - Blöcke überspringen (Stufe A) direkt von der Software verwaltet, ohne dass eine manuelle Anpassung erforderlich ist (siehe: Barrierefreiheitskriterien in WebSite X5).


Durch die korrekte Nutzung von Überschriften und die Nutzung der integrierten Funktionen von WebSite X5 können Sie barrierefreie, gut strukturierte und einfach navigierbare Webseiten für Nutzer und Suchmaschinen erstellen.


Werkzeuge zur Bewertung von Überschriften

Es gibt zahlreiche Werkzeuge zur Überprüfung der Barrierefreiheit von Überschriften auf einer Webseite. Diese Tools helfen dabei zu überprüfen, ob die Überschriftenstruktur konsistent ist, der semantischen Hierarchie entspricht und die Zugänglichkeit für alle Nutzer gewährleistet, einschließlich jener, die auf Screenreader angewiesen sind. Hier sind einige der nützlichsten:

  • WAVE (Web Accessibility Evaluation Tool): Bietet eine detaillierte Analyse der Seitenelemente, einschließlich der Überschriften. Verfügbar als Browser-Erweiterung für Chrome und Firefox.
  • Axe Accessibility Checker: Eine Erweiterung für Chrome und Firefox, die die Barrierefreiheit einer Seite überprüft, einschließlich der Überschriften. Sie erkennt Probleme in der semantischen Struktur und gibt Verbesserungsvorschläge.
  • Lighthouse: Ein in die Chrome DevTools integriertes Tool zur Analyse der Barrierefreiheit und SEO einer Seite. Es überprüft, ob Überschriften korrekt verwendet werden und zur Strukturierung der Seite beitragen.
  • HeadingsMap: Eine Firefox-Erweiterung, die eine visuelle Übersicht über die Überschriftenstruktur einer Seite bietet. Sie ermöglicht es, die Hierarchie der Überschriften schnell zu erkennen und mögliche Unregelmäßigkeiten zu identifizieren.