Was sind Überschriften?
Überschriften sind strukturierte, hierarchische Elemente in HTML, die von <h1> bis <h6> reichen und die Organisation des Inhalts auf einer Webseite festlegen. Sie helfen den Benutzern, die Struktur und Bedeutung von Informationen zu verstehen, und spielen eine wichtige Rolle bei der Navigation mit Bildschirmlesegeräten und der Suchmaschinenoptimierung.
Beispiel:
<h1>Hauptartikel-Titel</h1>
<h2>Abschnittstitel</h2>
<h3>Titel des Unterabschnitts</h3>
Jede Ebene kommuniziert die Inhaltshierarchie und erleichtert allen Nutzern, auch denen, die Hilfsmittel verwenden, das Scannen und Navigieren.
Warum Überschriften für die Barrierefreiheit im Web wichtig sind
Richtig strukturierte Überschriften sind von grundlegender Bedeutung für die Zugänglichkeit des Internets und die digitale Integration. Sie sind wichtig für Benutzer, die:
- verwendenBildschirmlesegeräte um zwischen Abschnitten zu springen
- habenkognitive Einschränkungen und sind auf eine klare Unterteilung der Inhalte angewiesen
- Navigieren mitNur-Tastatur-Eingabe
Die WCAG (Web Content Accessibility Guidelines) verlangen, dass Inhalte strukturiert und verständlich sind (Richtlinie 1.3.1), und Überschriften unterstützen diesen Grundsatz.
Rechtliche Hinweise:
- ADA (U.S.): Stellt sicher, dass die Struktur des Inhalts zugänglich ist.
- BFSG (Deutschland): Erfordert die Einhaltung der WCAG für öffentliche Websites.
Wie Überschriften Benutzern von Bildschirmlesegeräten helfen
Bildschirmlesegeräte (wie NVDA oder VoiceOver) ermöglichen es Benutzern, zwischen Überschriften zu springen, ähnlich wie beim Blättern im Inhaltsverzeichnis eines Buches. Dies ermöglicht:
- Effizientes Überfliegen großer Seiten
- schnelles Auffinden von relevanten Abschnitten
- Verstehen des Inhaltsflusses
Ohne Überschriften oder bei falscher Verwendung von Überschriftenebenenkönnen die Benutzerverloren gehen oder frustriert werden.
Best Practices für die Verwendung von Überschriften (TYPO3, WordPress und darüber hinaus)
TYPO3-Tipps:
- Verwenden Sie die richtigenInhaltselement-Stile (Text & Media, Header, etc.) und stellen Sie sicher, dass diese semantische Überschriften ausgeben.
- Redakteure können im Backend Überschriftenebenen auswählen (z. B. H2 für Abschnittsüberschriften).
- Vermeiden Sie das Überspringen von Ebenen - springen Sie nicht von H2 zu H4.
WordPress-Tipps:
- Verwenden Sie denBlock-Editor (Gutenberg), um richtige Überschriften zuzuweisen.
- Jeder Beitrag/Seite sollteeine H1 (in der Regel der Titel) haben, gefolgt von logischen H2, H3, usw.
- Verwenden Sie Überschriften nicht nur für das Styling - verwenden Sie CSS für die visuelle Formatierung, nicht für strukturelle Täuschungen.
Häufige Fehler und wie man sie behebt
❌ Verwendung von Überschriften nur für die Größe ✔️ Abhilfe: Verwenden Sie Überschriften für die Struktur, nicht nur für das Aussehen. Verwenden Sie CSS zur Formatierung von Text, wenn es sich nicht um eine echte Überschrift handelt.
❌ Überspringen von Überschriftenebenen (z.B. H1 → H3) ✔️ Behebung: Beibehaltung der logischen Abfolge für Konsistenz und Benutzerfreundlichkeit.
❌ Verwendung mehrerer H1-Tags auf einer Seite ✔️ Abhilfe: Jede Seite sollte eine Haupt-H1 haben, wobei die Inhaltsabschnitte niedrigere Ebenen verwenden.
❌ Inhalte ohne Überschriften ✔️ Fix: Unterteilen Sie lange Inhalte in verdauliche, beschriftete Abschnitte mit sinnvollen Überschriften.
Verwandte Begriffe erforschen: Semantisches HTML, Screen Reader, WCAG, Fokusindikator, kognitive Behinderungen
Wichtigste Erkenntnis
Überschriften sind nicht nur Designwerkzeuge, sondern auch Zugänglichkeitsanker. Eine logische Überschriftenstruktur verbessert die Navigation, das Verständnis und die Einhaltung der Vorschriften. Für jeden Benutzer bedeutet strukturierter Inhalt leichteres Lesen, besseres Scannen und reibungslosere Abläufe.
Sind Sie sich über Ihre Überschriftenstruktur unsicher?
Führen Sie eine Überprüfung auf Überschriftsebene mit dem T3AA Accessibility Analyzer durch, oder überprüfen Sie Ihre Seiten anhand unserer Checkliste für semantische Überschriften.Strukturieren Sie Inhalte mit Sinn. Leiten Sie Ihre Leser mit klaren, zugänglichen Überschriften.