Barrierefreie Überschriftenstruktur: die Anleitung für Online-Shops
Kurz gefasst — deine Überschriften sind der Bauplan der Seite
Eine blinde Person mit Screenreader „überfliegt" die Seite nicht mit den Augen: Sie springt von Überschrift zu Überschrift, um sich zurechtzufinden — wie in einem Inhaltsverzeichnis. Sind deine Überschriften schlecht strukturiert — oder nur vergrößerter, fett gesetzter Text — verliert sie den Faden. Das Barrierefreiheitsstärkungsgesetz (BFSG) (EN 301 549 / WCAG 2.1 AA), seit dem 28. Juni 2025 für den E-Commerce verbindlich, verlangt eine klare Seitenstruktur. Die Kernpunkte:
- Genau eine
<h1>je Seite, die den Hauptinhalt beschreibt (Kriterien 1.3.1 und 2.4.6); - Eine Hierarchie ohne übersprungene Ebene: H1 → H2 → H3, niemals H1 → H4 (Kriterium 1.3.1);
- Echte, ausgezeichnete Überschriften (
<h2>), kein vergrößerter Text, der wie eine Überschrift „aussieht" (Kriterium 1.3.1); - Seitenlandmarken:
<header>,<nav>, genau ein<main>,<footer>(Kriterien 1.3.1 und 2.4.1); - Ein eindeutiger, beschreibender Seitentitel je Seite (Kriterium 2.4.2);
- Die deklarierte Seitensprache mit
<html lang="de">(Kriterium 3.1.1).
Nebeneffekt: Eine saubere Überschriftenstruktur hilft auch dem Google-Ranking, das dieselbe Hierarchie liest, um deine Seite zu verstehen.
Die Überschriftenstruktur ist eine der Grundlagen der Barrierefreiheit — und einer der häufigsten Mängel im E-Commerce. Eine gut strukturierte Seite liest sich wie ein Inhaltsverzeichnis: ein Haupttitel, Abschnitte, Unterabschnitte. Für eine Person mit Screenreader ist diese Hierarchie das Navigationsmittel Nummer eins. Die gute Nachricht: Sie zu korrigieren ist vor allem eine Frage der HTML-Auszeichnung, nicht des Designs. Hier sind die sechs WCAG-Regeln, die das BFSG verlangt, und wie du sie prüfst.
Warum die Überschriftenstruktur so wichtig ist
Ein Screenreader (NVDA, VoiceOver, TalkBack…) bietet einen Befehl, um alle Überschriften einer Seite aufzulisten und direkt zu ihnen zu springen. Das ist für eine blinde Person das Äquivalent des Blicks, den du auf eine Seite wirfst, um zu sehen, „wo die Bewertungen sind", „wo der Preis steht", „wo der Warenkorb ist". Hat die Seite keine Überschriften — oder inkonsistente — wird diese Navigation unmöglich: Man muss alles Zeile für Zeile anhören.
Das BFSG schafft keine gesonderte „Überschriften"-Regel: Die Grundlage bleibt EN 301 549, basierend auf WCAG 2.1 Stufe AA, für E-Commerce-Dienstleistungen seit dem 28. Juni 2025 anwendbar. Die Struktur fällt vor allem unter Kriterium 1.3.1 (Info und Beziehungen): Die Information, die über die Darstellung vermittelt wird (dies ist eine Überschrift, dies ist ein Abschnitt), muss auch im Code vorhanden sein, damit sie an assistive Technologien weitergegeben werden kann.
Die 6 Regeln einer barrierefreien Struktur
Ein eindeutiger Haupttitel, der die Seite beschreibt
Jede Seite braucht genau eine <h1>, die ihren Hauptinhalt zusammenfasst: auf einer Produktseite der Produktname, auf einer Kategorieseite der Kategoriename. Das ist der Ausgangspunkt der Hierarchie. Vermeide die häufige Falle, das Website-Logo auf allen Seiten als <h1> auszuzeichnen: Der eigentliche Titel des Inhalts bleibt dann ohne Ebene 1. Der Titel muss außerdem beschreibend sein (Kriterium 2.4.6): „Herren-Laufschuhe", nicht „Willkommen".
<h1> = der Produktname; genau eine je Seite.<h1> wiederholt; mehrere <h1> auf derselben Seite; eine vage H1 („Startseite").→ Siehe auch die BFSG-Checkliste für alle Punkte, die zählen.
Die Hierarchie steigt ohne Sprung ab
Die Überschriftenebenen müssen der Reihe nach aufeinanderfolgen: Eine <h3> steht unter einer <h2>, niemals direkt unter einer <h1>. Von H1 auf H4 zu springen, „weil die H4-Schrift hübscher ist", zerstört die Logik des Inhaltsverzeichnisses: Der Screenreader meldet fehlende Ebenen, und die nutzende Person glaubt, einen Abschnitt verpasst zu haben. Die Ebene einer Überschrift richtet sich nach ihrem Platz im Aufbau, nicht nach ihrer Größe auf dem Bildschirm — die Größe stellst du danach im CSS ein.
<h2> oder <h4> nach gewünschter Schriftgröße wählen.Eine Überschrift ist ein Tag, nicht nur ein Stil
Ein groß und fett gesetzter Text sieht aus wie eine Überschrift für eine sehende Person, bleibt aber als Überschrift unsichtbar für einen Screenreader, wenn er als einfacher Absatz codiert ist. Damit eine Überschrift von assistiven Technologien „gesehen" wird, muss sie als <h2>, <h3> usw. ausgezeichnet sein (oder die entsprechende ARIA-Rolle tragen). Genau das verlangt Kriterium 1.3.1: Das Erscheinungsbild einer Überschrift muss eine Entsprechung im Code haben.
<h2>, per CSS gestylt.<p> mit font-size und font-weight:bold, ohne Überschriften-Tag.Header, nav, main und footer ausgezeichnet
Über die Überschriften hinaus stützen sich Screenreader auf die Landmarken (landmarks), um direkt zu einem Bereich zu springen: den Kopfbereich (<header>), die Navigation (<nav>), den Hauptinhalt (<main>, genau einer je Seite), den Fußbereich (<footer>). Wenn mehrere Bereiche desselben Typs vorkommen (zwei <nav>), benenne sie mit aria-label, um sie zu unterscheiden. Diese Landmarken machen auch den Sprunglink (Kriterium 2.4.1) wirksamer.
<header>, <nav>, ein einziges <main> und <footer>.<div> ohne Landmarken; zwei <main>; mehrere unbenannte <nav>.Jede Seite hat einen klaren, unterscheidbaren <title>
Kriterium 2.4.2 (Seite mit Titel versehen) verlangt, dass jede Seite einen Seitentitel (das <title>-Tag, im Browser-Tab angezeigt und vom Screenreader zuerst vorgelesen) hat, der beschreibend und eindeutig ist. Das ermöglicht es, sich zwischen mehreren offenen Tabs und im Verlauf zurechtzufinden. Ein übliches Schema: „Produktname — Kategorie — Shop". Vermeide denselben Titel („Shop" oder „Startseite"), der auf allen Seiten wiederholt wird.
<title> = „Rucksack 20 L grau — Taschen — MeinShop".<title> = „MeinShop", identisch auf 5.000 Produktseiten; ein Tab ohne Titel.Der Code gibt die Sprache der Seite an
Kriterium 3.1.1 (Sprache der Seite) verlangt, die Hauptsprache im Code zu deklarieren: <html lang="de">. Ohne diese Information kann ein Screenreader einen deutschen Text mit englischer Aussprache vorlesen (oder umgekehrt), was den Inhalt unverständlich macht. Ist ein Teil der Seite in einer anderen Sprache (ein Zitat, ein englischer Produktname), kennzeichne ihn mit lang am betroffenen Element (Kriterium 3.1.2). Das ist eine Korrektur von einer Zeile, aber oft vergessen.
<html lang="de">; eine englische Passage mit <span lang="en"> markiert.<html> ohne lang-Attribut; eine mehrsprachige Website, die auf ihren deutschen Seiten lang="en" behält.Die Struktur-Kriterien auf einen Blick
| Zu prüfender Punkt | Stufe | WCAG-Kriterium |
|---|---|---|
| Info und Beziehungen (Überschriften, Listen, Struktur im Code) | A | 1.3.1 |
| Beschreibende Überschriften und Beschriftungen | AA | 2.4.6 |
| Seitentitel (<title>) klar und eindeutig | A | 2.4.2 |
| Sprache der Seite deklariert | A | 3.1.1 |
| Sprache einer Passage deklariert | AA | 3.1.2 |
| Blöcke umgehen (Landmarken, Sprunglink) | A | 2.4.1 |
| Abschnittsüberschriften (gute Praxis) | AAA | 2.4.10 |
Wie du die Struktur deiner Seiten prüfst
Mehrere schnelle Prüfungen, vom Automatischsten bis zum Aussagekräftigsten:
- Ein automatischer Scan erkennt diese Familie von Problemen sehr gut: fehlende
<h1>, übersprungene Ebenen, leere Überschriften, fehlende Landmarken, fehlendeslang, fehlendes<title>. Das ist einer der Punkte, bei denen die Werkzeuge am zuverlässigsten sind. - Eine Überschriften-Gliederungs-Erweiterung (oder die „Struktur"-Funktion eines Audit-Werkzeugs) zeigt die H1-H6-Hierarchie auf einen Blick: Lücken und Inkonsistenzen springen ins Auge.
- Ein Screenreader (NVDA unter Windows, VoiceOver auf dem Mac) erlaubt es, die Liste der Überschriften anzuhören: Das ist der Test, der der realen Erfahrung am nächsten kommt.
→ Ein automatischer Scan beurteilt nicht, ob ein Überschriften-Text relevant ist (eine H2 „Hier klicken" besteht den Scan, ist aber nicht beschreibend). Danach fließt der Blick auf die Gliederung direkt in den BFSG-Express-Test ein.
Prüfe die Barrierefreiheit deines Shops kostenlos
DeclareAccess scannt eine Seite deines Shops mit der axe-core-Engine nach WCAG 2.1 AA, meldet die Verstöße (Struktur, Landmarken, Sprache, Kontrast, Formulare…) und erzeugt anschließend das veröffentlichungsfertige Barrierefreiheitsdokument — deutsch („Informationen zur Barrierefreiheit", § 14 BFSG), englisch, französisch (RGAA), italienisch oder spanisch. Kostenlos, ohne Kreditkarte.
WCAG-Bericht per E-Mail innerhalb von 1 Werktag.
Erhalten. Deine Audit-Anfrage ist gespeichert — du erhältst deinen WCAG-Bericht per E-Mail innerhalb von 1 Werktag.
Häufige Fragen
Darf eine Seite mehrere H1 haben?
In der Praxis ist die sicherste Empfehlung, genau eine <h1> je Seite zu haben, die ihren Hauptinhalt beschreibt. Die HTML5-Spezifikation erlaubt technisch mehrere H1 innerhalb von Abschnitten, aber die Unterstützung durch Screenreader bleibt uneinheitlich; für die Barrierefreiheit wie für das Ranking ist eine einzige H1 die zuverlässigste Wahl. Der Rest der Struktur wird dann mit H2, H3 usw. aufgebaut.
Hängt die Ebene einer Überschrift von ihrer Bildschirmgröße ab?
Nein, und das ist der häufigste Fehler. Die Ebene (<h2>, <h3>…) spiegelt den Platz der Überschrift im Aufbau der Seite wider, nicht ihr Aussehen. Wähle zuerst die richtige Ebene für die Logik des Dokuments, dann passe Größe und Stil im CSS an. So kann eine H2 durchaus kleiner angezeigt werden als eine H3, wenn deine Gestaltungsrichtlinie es verlangt, ohne die Struktur für Screenreader zu zerstören.
Was sind Landmarken, und braucht es ARIA?
Landmarken sind Bereiche der Seite, die Screenreader auflisten und direkt ansteuern können: Kopfbereich, Navigation, Hauptinhalt, Fußbereich. Der einfachste Weg, sie zu erzeugen, ist die Verwendung der nativen HTML-Tags (<header>, <nav>, <main>, <footer>), die bereits die richtige Rolle tragen; in diesem Fall braucht es keine ARIA-Rollen. ARIA bleibt Situationen vorbehalten, in denen natives HTML nicht ausreicht, etwa aria-label, um zwei Navigationen zu unterscheiden.
Hilft eine gute Überschriftenstruktur dem Ranking?
Ja. Suchmaschinen lesen dieselbe Überschriftenhierarchie, um Aufbau und Thema einer Seite zu verstehen. Eine klare <h1>, kohärente <h2>/<h3> und ein beschreibendes <title> dienen also zugleich der Barrierefreiheit und dem SEO: Es ist eines der wenigen Vorhaben, bei denen man mit derselben Arbeit auf beiden Feldern gewinnt.
Reicht ein automatischer Scan für die Struktur?
Für diese Familie von Kriterien ist der Scan besonders zuverlässig: Er erkennt fehlende H1, übersprungene Ebenen, leere Überschriften, fehlende Landmarken und Sprache. Er kann jedoch nicht beurteilen, ob ein Überschriften-Text relevant ist (eine H2 „Hier klicken" besteht den Scan, ist aber nicht beschreibend). Ein menschlicher Blick auf die Überschriften-Gliederung ergänzt den Scan sinnvoll und bleibt schnell.