Die Bedeutung von Seitentiteln und Überschriften

Damit alle Nutzer*innen gleichberechtigt auf Inhalte zugreifen können, müssen Websites barrierefrei gestaltet sein. Zwei zentrale Bausteine hierfür sind Seitentitel und Überschriften. Sie strukturieren Inhalte nicht nur visuell, sondern auch funktional – und machen Webseiten verständlich und navigierbar.

1. Der Seitentitel: Orientierung auf einen Blick

Der Seitentitel – das, was im Browser-Tab oder in der Suchergebnisliste erscheint – ist oft der erste Kontaktpunkt mit einer Webseite. Für Menschen, die Screenreader verwenden, ist er besonders wichtig: Der Screenreader liest beim Laden der Seite den Titel vor und vermittelt sofort, worum es auf der Seite geht.

Best Practices für Seitentitel:

• Eindeutigkeit und Klarheit: Der Titel sollte den Inhalt der Seite präzise beschreiben.
• Konsistenz: Einheitliche Titelstrukturen helfen bei der Orientierung (z. B. „Produkte – Firma XY“ statt „Seite 1“).
• Relevanz zuerst: Das wichtigste Stichwort sollte am Anfang stehen (z. B. „Online-Banking – MeineBank“ statt „MeineBank – Online-Banking“).
• Keine generischen Titel: Titel wie „Startseite“ oder „Willkommen“ bieten keinen Mehrwert für Nutzer*innen mit Hilfstechnologien.

2. Überschriften: Die Strukturgeber des Inhalts

Überschriften sind mehr als nur optische Hervorhebungen – sie sind essenziell für die semantische Struktur einer Webseite. Sie helfen allen Nutzer*innen, Inhalte schneller zu erfassen, und sind für assistive Technologien wie Screenreader unverzichtbar.

Warum sind Überschriften wichtig?

• Screenreader-Nutzer*innen können durch Überschriften navigieren, ähnlich wie sehende Nutzer*innen durch Scrollen.
• Kognitive Barrieren können durch eine klare Struktur reduziert werden: Logische Überschriftenhierarchien erleichtern das Erfassen von Zusammenhängen.
• Suchmaschinenfreundlichkeit: Eine saubere Überschriftenstruktur verbessert auch die Auffindbarkeit der Inhalte (SEO).

Best Practices für barrierefreie Überschriften:

• Hierarchische Struktur verwenden: <h1> für den Haupttitel, dann <h2>, <h3> usw. in logischer Abfolge. Keine Sprünge in der Hierarchie.
• Nur eine <h1> pro Seite: Diese sollte den Hauptinhalt oder Zweck der Seite beschreiben.
• Keine Überschriften zum Stylen missbrauchen: Vermeide es, z. B. <h2> nur wegen der Schriftgröße einzusetzen – nutze stattdessen CSS.
• Aussagekräftige Texte verwenden: „Kontaktinformationen“ ist hilfreicher als „Informationen“.

3. Konkrete Tipps für Entwicklerinnen und Redakteurinnen

• Prüfe die Seite mit einem Screenreader (z. B. NVDA oder VoiceOver), um zu verstehen, wie die Struktur wirkt.
• Verwende semantisches HTML – nicht nur aus Gründen der Barrierefreiheit, sondern auch der Wartbarkeit.
• Nutze Tools wie den WAVE Accessibility Checker oder axe DevTools, um Probleme zu identifizieren.

Fazit: Kleine Details, große Wirkung

Ein klarer Seitentitel und eine durchdachte Überschriftenstruktur sind keine Nebensache – sie sind grundlegende Elemente für eine barrierefreie Website. Wer sie sinnvoll einsetzt, sorgt dafür, dass alle Menschen – unabhängig von ihren Fähigkeiten – Inhalte gleichberechtigt nutzen können. Gleichzeitig profitieren auch Suchmaschinen und mobile Nutzer*innen von klarer Struktur und Verständlichkeit.

Barrierefreiheit beginnt im Detail – und endet in einer besseren Nutzererfahrung für alle.

---

Wie du in WordPress mit dem Kadence-Theme Seitentitel und Überschriften barrierefrei einrichtest

Seitentitel im Kadence-Theme korrekt einstellen

Schritt 1: Titel der Seite/Beitrag festlegen

1. Navigiere zu: Seiten oder Beiträge → Wähle eine Seite oder erstelle eine neue.
2. Oben im Editor findest du das Feld „Titel hinzufügen“. Gib hier den gewünschten Titel ein – dieser wird als <title>-Tag verwendet.

Tipp: Verwende einen aussagekräftigen Titel, z. B. „Kontakt – Mein Unternehmen“ statt nur „Kontakt“.

Schritt 2: Titel-Anzeige auf der Seite ein- oder ausblenden

Kadence ermöglicht es, den Seitentitel auf der Seite sichtbar zu machen oder auszublenden:

1. Öffne die gewünschte Seite im Editor.
2. Rechts im Menü findest du die Kadence-Seiteneinstellungen.
3. Scrolle zu „Seiten-Layout“ und aktiviere oder deaktiviere die Option „Seitentitel anzeigen“.

Überschriften richtig verwenden

Schritt 1: Überschrift einfügen

Klicke im Gutenberg-Editor auf das „+“-Symbol und wähle den „Überschrift“-Block.

Gib deinen Überschriftentext ein.

Schritt 2: Hierarchie einstellen (H1 bis H6)

1. Wähle den Überschrift-Block aus.
2. In der Werkzeugleiste kannst du zwischen H2, H3, H4 usw. wählen.

Wichtig:

• Verwende nur eine H1 pro Seite – in der Regel ist das der Seitentitel.
• Nutze H2 für Hauptabschnitte, H3 für Unterpunkte usw.
• Vermeide es, Überschriften nur zur optischen Gestaltung zu verwenden – setze sie semantisch korrekt ein.