Struktur & Überschriftenhierarchie

TL;DRTL;DR too long; didn't read. Wörtlich übersetzt "zu lang; nicht gelesen". Überschrift für eine kurze Zusammenfassung eines längeren Artikels oder Beitrags.

  • ScreenreaderScreenreader Software, die Texte am Bildschirm laut vorliest oder als Braille ausgibt. nutzen Überschriften und HTML-Landmarks
  • <section> sollte immer eine Überschrift haben
  • Gute Textstruktur erleichtert barrierefreien Code erheblich

Wie Überschriften und HTML-Strukturelemente gemeinsam Orientierung schaffen

Überschriften sind zentral – aber Barrierefreiheit endet nicht bei H1–H6. Moderne Websites bestehen aus semantischen Strukturelementen, und die beeinflussen maßgeblich, wie Screenreader Inhalte wahrnehmen und navigierbar machen.

Als Texter solltest du verstehen, wie Überschriften und HTML-Struktur zusammenspielen. Denn Struktur entsteht nicht erst im Code – sondern in deinem Textkonzept.

Zwei Ebenen von Struktur

Es gibt zwei unterschiedliche, aber eng gekoppelte Ebenen:

  1. Dokumentenstruktur durch Überschriften (H1–H6)
  2. Seitenstruktur durch semantische HTML-Elemente

Beides wird von Screenreadern ausgewertet – aber nicht identisch.

Überschriften als Navigationsanker

Screenreader bieten eine eigene Überschriftennavigation. Nutzer können:

  • sich alle Überschriften einer Seite auflisten lassen
  • direkt von Überschrift zu Überschrift springen

Das funktioniert unabhängig davon, ob diese Überschriften in <section>, <div> oder sonstwo stehen.

Überschriften beantworten die Frage:
„Welche Inhalte gibt es hier – und in welcher Reihenfolge?“

HTML-Strukturelemente: die zweite Navigationsebene

HTML5 bringt eigene semantische Container:

  • <header>: Der Kopfbereich deiner Seite, oft mit Logo und Navigation.
  • <nav>: Enthält die Hauptnavigation der Seite.
  • <main>: Dieser Bereich umschließt den einzigartigen Hauptinhalt deiner Seite. Auch hier gilt: Nur ein <main>-Element pro Seite. Screenreader-Nutzer können oft direkt zum main-Inhalt springen, um Boilerplate-Inhalte wie Navigation zu überspringen.
  • <article>: Perfekt für eigenständige Inhalte, die auch außerhalb des Kontextes der Seite Sinn ergeben, wie Blogbeiträge, News-Artikel oder Kommentare.
  • <section>: Ein generisches Gliederungselement, das thematisch zusammenhängende Inhalte gruppiert. Eine <section> sollte eine Überschrift (H1-H6) enthalten, um ihren Zweck klar zu definieren.
  • Tipp: Wenn eine <section> keinen sichtbaren Titel hat, aber einen semantischen Zweck erfüllen soll, kannst du aria-labelledby oder aria-label verwenden, um einen zugänglichen Namen zu vergeben.
    • aria-labelledby: Verweist auf ein anderes Element auf der Seite, das den Titel der Sektion enthält.
    • aria-label: Bietet einen direkt lesbaren Titel für die Sektion.
  • <aside>: Für Inhalte, die nur lose mit dem Hauptinhalt verbunden sind, z. B. Sidebar-Inhalte, verwandte Artikel oder Werbeblöcke.
  • <footer>: Der Fußbereich der Seite, oft mit Copyright-Infos oder Links zu Impressum und Datenschutz.

Diese auch als Landmarks bezeichneten Container sind klar definierte Seitenbereiche, die Screenreader gezielt ansteuern können – ähnlich wie ein Inhaltsverzeichnis für Seitenteile.

Wichtige Hinweise zur <section>

Die <section>-Elemente gruppieren thematische Abschnitte, die durch ihre Überschriften klar benannt werden.

  • <section> ist kein rein optischer Container
  • Eine <section> sollte ein thematisch abgeschlossener Bereich sein
  • Eine <section> sollte immer eine Überschrift haben

<section> ohne Überschrift

  • Ohne Überschrift ist eine <section> für Screenreader inhaltlich anonym.
  • Die Section erzeugt keine sinnvolle Landmark
  • Screenreader können sie nicht eindeutig ankündigen
  • Für Nutzer entsteht kein Mehrwert

<section> mit Überschrift

<section>
  <h2>Barrierefreiheit für Texter</h2>
  <p>…</p>
</section>

Was passiert für Screenreader?

  • Die <section> wird als Region erkannt
  • Die Region bekommt ihren Namen aus der Überschrift
  • Nutzer hören z. B.: „Region: Barrierefreiheit für Texter“

Wenn ein Bereich keine eigene Überschrift rechtfertigt, brauchst du meist auch keine <section>.

Wann aria-labelledby sinnvoll ist

Manchmal liegt die passende Überschrift nicht direkt in der Section oder soll anders referenziert werden.

Dann kommt ARIA ins Spiel.

<h2 id="struktur">Struktur & Hierarchie</h2>

<section aria-labelledby="struktur">
  <p>…</p>
</section>

Was passiert für Screenreader?

  • Die Section bekommt ihren Namen über die referenzierte Überschrift
  • Screenreader verknüpfen beides korrekt

Wichtig: ARIA ist kein Ersatz für saubere HTML-Struktur, sondern ein Werkzeug für begründete Sonderfälle.

Überschriften oder <section>: Wer macht was?

  • Überschriften strukturieren Inhalte logisch
  • Sections strukturieren Inhalte räumlich / thematisch

Screenreader nutzen beides getrennt, aber kombiniert:

ElementZweck
H1–H6Inhaltliche Gliederung
<section>Thematischer Bereich
Überschrift in SectionName der Region

Eine gute Section ohne Überschrift ist selten sinnvoll.
Eine gute Überschrift ohne Section ist oft völlig okay.

Relevanz für Texter (auch ohne Code-Zugriff)

Du entscheidest:

  • Wo beginnt ein neues Thema?
  • Was ist Hauptpunkt, was Unterpunkt?
  • Welche Abschnitte gehören zusammen?

Diese Entscheidungen bestimmen:

  • wie viele Überschriften nötig sind
  • wo eine <section> sinnvoll ist
  • ob Entwickler saubere, zugängliche Struktur umsetzen können

Schlechte Textstruktur zwingt Entwickler zu Workarounds.
Gute Textstruktur macht Barrierefreiheit fast automatisch.

Praxis-Check für deinen Text

  1. Hat jede thematische Einheit eine klare Überschrift?
  2. Könnte jeder Abschnitt sinnvoll in einer eigenen <section> stehen?
  3. Würden die Überschriften auch ohne Layout logisch funktionieren?

Wenn ja: sehr gute Basis für barrierefreien Code.

Fazit

Barrierefreiheit entsteht im Zusammenspiel:

  • Überschriften liefern die inhaltliche Logik
  • HTML-Strukturelemente liefern die räumliche Orientierung
  • Screenreader verbinden beides zu einem nutzbaren Ganzen

Als Texter gestaltest du diese Struktur maßgeblich mit.

Quellen