Ratgeber

Überschriften und Landmarks im Shop barrierefrei: selbst prüfen und beheben

Veröffentlicht am 31. Oktober 2026

Barrierefreie Überschriften im Shop heißen nach WCAG vor allem zweierlei: Alles, was wie eine Überschrift aussieht, ist im Code als Überschrift ausgezeichnet (h1 bis h6), und nichts ist als Überschrift ausgezeichnet, was keine ist (1.3.1, Stufe A); vorhandene Überschriften beschreiben ihren Abschnitt (2.4.6, Stufe AA). „Genau eine h1“ und „keine Ebene überspringen“ sind dagegen Empfehlungen des W3C und gängiger Prüfwerkzeuge, keine eigenen WCAG-Kriterien; dieser Artikel trennt beides und zeigt, wie Sie Überschriften und Landmarks in 30 bis 45 Minuten (unsere Schätzung) selbst prüfen.

Welche WCAG-Version und welche Stufe für Ihren Shop zählen, erklärt unser Überblick WCAG 2.2 für Onlineshops. Den Sprunglink „Zum Inhalt“, die nav-Landmark mit ihrer Beschriftung und die Breadcrumbs behandelt Navigation und Menüs im Shop barrierefrei; hier geht es um die Überschriften und um die übrigen Landmarks: header, main, footer, aside und search.

Was WCAG fordert und was Best Practice ist

Für WCAG 2.2 gibt es keine vom W3C autorisierte deutsche Übersetzung (Übersicht); die deutschen Namen der Kriterien sind unsere Übersetzung.

Daraus folgt eine Unterscheidung, die viele Ratgeber verwischen:

Auch die Prüfwerkzeuge trennen das: Die axe-Regeln heading-order (gesprungene Ebene), page-has-heading-one (keine h1), landmark-one-main (kein main) und region (Inhalt außerhalb von Landmarks) laufen dort als „Deque Best Practice“, nicht als WCAG-Verstoß. WAVE führt fehlende h1, gesprungene Ebenen und fehlende Landmarks als Hinweis (Alert), eine leere Überschrift dagegen als Fehler (WAVE-Dokumentation).

Unsere Empfehlung: Halten Sie sich trotzdem an eine h1 und lückenlose Ebenen. Es kostet im Theme kaum Aufwand, Screenreader-Nutzer springen mit der Taste 1 sofort zum Produktnamen, und Sie sparen sich die Diskussion mit jedem Prüfbericht, der gesprungene Ebenen als Fund listet. Ein Theme, das hier sauber ist, ist aber nicht automatisch WCAG-konform, und eine gesprungene Ebene allein verstößt gegen kein WCAG-Kriterium.

Wie eine gute Struktur im Shop aussieht

Das erste Beispiel im WAI-Tutorial liest sich wie eine Produktseite (unsere Lesart): eine h1 („Space Teddy“) und drei h2 im Inhalt. Für Bereiche wie Menü, Seitenleiste und Fußzeile schlägt es Überschriften eine Ebene unter der Hauptüberschrift vor und sagt: „consistency across pages is more important“. Übertragen auf drei typische Seiten:

Produktseite

Kategorieseite

Startseite

Die h1 der Startseite darf visuell versteckt sein, etwa mit der üblichen Klasse visually-hidden, wenn Ihr Design keinen sichtbaren Titel vorsieht. Auch die Überschriften der Produktkacheln dürfen klein aussehen; die Ebene bestimmt der Code, die Größe das CSS. Das sagt auch F2 selbst: Die richtige Lösung sei, das Überschriften-Element per CSS zu gestalten.

Typische Fehler in Shop-Themes

Wie gängige Standard-Themes das lösen (Stand der Vorlagen am 31.10.2026):

• Shopify, Theme Dawn: Das Logo ist nur auf der Startseite in eine h1 gesetzt (Bedingung request.page_type == 'index' in header.liquid); auf der Produktseite ist der Produkttitel die h1 (main-product.liquid), die Spaltentitel der Fußzeile sind h2 (footer.liquid). Nach unserer Lesart ist das Logo als h1 auf der Startseite vertretbar, solange es dort die einzige h1 ist und einen Alternativtext mit dem Shopnamen hat; das WAI-Tutorial zeigt allerdings als Beispiel, dass die Hauptüberschrift die Inhaltsüberschrift ist, nicht der Name der Website. Ein Theme, das Sie selbst angepasst oder gekauft haben, kann ganz anders aussehen.
• WooCommerce, klassische Templates: Produkttitel auf der Produktseite als h1 (single-product/title.php), Kategoriename als h1 (loop/header.php), Produktnamen in der Liste als h2 (Funktion woocommerce_template_loop_product_title in wc-template-functions.php). Die Kacheln stehen damit auf derselben Ebene wie andere h2 der Seite; das ist kein WCAG-Verstoß, aber eine Stelle, die viele Themes anpassen.
• Shopware 6, Standard-Storefront: Produktname auf der Produktseite als h1 (cms-element-product-name.html.twig). In Produktkacheln hängt die Ebene von der Einstellung boxHeadlineLevel des Elements ab; ist keine gesetzt, ist der Name keine Überschrift (box-standard.html.twig). Die Spaltentitel der Fußzeile sind bisher <div role="heading" aria-level="2"> und laut Kommentar im Code ab Version 6.8 ein h2 (footer.html.twig). Beides ist zulässig: role="heading" mit aria-level ist die W3C-Technik ARIA12 für 1.3.1 (Understanding 1.3.1); das echte h-Element ist unsere Empfehlung, weil es ohne ARIA auskommt.

Landmarks: header, main, footer, aside, search

Landmarks sind Seitenbereiche, die Screenreader auflisten und direkt ansteuern. In HTML entstehen sie meist ohne ARIA aus den passenden Elementen. Die Regeln aus dem APG zu Landmark-Regionen und dem WAI-Tutorial zu Seitenbereichen:

Beschriftung. Kommt eine Landmark mehrfach vor, braucht jede einen eigenen Namen, über aria-label="…" oder aria-labelledby mit der id einer sichtbaren Überschrift. Das APG sagt außerdem: „Do not use the landmark role as part of the label.“ Also <aside aria-label="Filter">, nicht aria-label="Filter-Seitenleiste Navigation"; der Screenreader sagt die Rolle ohnehin dazu. Eine einzelne header-, main- oder footer-Landmark braucht keinen Namen.

Typische Funde.

• Kein main-Element, der Inhalt steht in <div id="content">. Dann fehlt das Ziel für Screenreader-Sprünge, und oft auch das saubere Ziel des Sprunglinks.
• Zwei main-Elemente, etwa weil ein Seitenbaukasten-Abschnitt sein eigenes mitbringt.
• Die Kopfzeile steckt in einem section- oder main-Element und ist deshalb keine banner-Landmark.
• Cookie-Banner, Chat-Widget oder Ankündigungsleiste liegen außerhalb aller Landmarks. Nach ARIA11 eine Empfehlung, kein Fehler.
• Zwei aside-Bereiche (Filter und „Zuletzt angesehen“) ohne Namen; der Screenreader sagt zweimal nur „ergänzend“.
• Eine Landmark-Rolle doppelt, etwa <header role="banner">. Das schadet nicht, ist aber überflüssig.

So prüfen Sie: Vorbereitung

• Seiten: Startseite, eine Kategorieseite, eine Produktseite mit Beschreibung und Bewertungen, eine Inhaltsseite wie „Versand und Rückgabe“, das Suchergebnis, den Warenkorb und die erste Seite des Checkouts. Unsere Einschätzung: Diese sieben Seiten decken in den meisten Shops alle Templates ab.
• Werkzeuge, alle kostenlos: die Browser-Erweiterung WAVE von WebAIM (für Chrome, Firefox und Edge; sie läuft laut WebAIM vollständig im Browser, „no information is sent to the WAVE server“), für Firefox zusätzlich HeadingsMap, die Entwicklertools Ihres Browsers und ein Screenreader (NVDA unter Windows oder VoiceOver am Mac).
• Protokoll: die Tabelle am Ende dieses Artikels.

Der Selbsttest Schritt für Schritt

1. Mit den Augen: Was sieht aus wie eine Überschrift?

Öffnen Sie jede Seite und schreiben Sie in der Reihenfolge von oben nach unten alles auf, was optisch eine Überschrift ist: größer, fetter, abgesetzt, über einem Abschnitt. Denken Sie an Produktname, Zwischentitel in der Beschreibung, Titel von Reitern und Akkordeons („Beschreibung“, „Versand“), „Bewertungen“, „Ähnliche Produkte“, Spaltentitel der Fußzeile, Titel im Mini-Warenkorb und im Checkout („Lieferadresse“, „Zahlungsart“).

Das ist Ihre Soll-Liste. Die nächsten Schritte zeigen die Ist-Liste aus dem Code.

2. Überschriftenliste mit WAVE oder HeadingsMap

WAVE: Erweiterung auf der Seite starten und in der Seitenleiste den Reiter Structure öffnen. Er zeigt laut WebAIM Regionen und Landmarks zusätzlich zu den Überschriften. Die Meldungen zeigt WAVE in seiner Seitenleiste; für dieses Thema zählen:

Mehr zu WAVE, auch wie Sie seine anderen Meldungen lesen, steht in WAVE Barrierefreiheit.

HeadingsMap (Firefox): Laut Add-on-Seite baut die Erweiterung aus den Überschriften ein Inhaltsverzeichnis der Seite, markiert fehlerhafte Hierarchien, und ein Klick auf einen Eintrag springt zur Stelle auf der Seite. Das ist die schnellste Ansicht, um Soll- und Ist-Liste nebeneinanderzulegen.

Vergleichen Sie jetzt beide Listen:

1. Steht auf der Soll-Liste etwas, das in der Ist-Liste fehlt? Dann ist eine optische Überschrift nicht ausgezeichnet. Das ist der wichtigste Fund, denn das betrifft 1.3.1 (F2).
2. Steht in der Ist-Liste etwas, das keine Überschrift ist? Preis, Versandhinweis, Gutscheincode, Adresse, Teaser-Text. Das betrifft 1.3.1 (F43).
3. Sagt jede Überschrift, worum es im Abschnitt geht? Nur Überschriften wie „Mehr“, „Entdecken“ oder dreimal „Jetzt shoppen“ sind ein Fall für 2.4.6.
4. Stimmen die Ebenen? Ist der Produktname die h1? Stehen die Kacheln unter der Überschrift der Liste? Springt eine Ebene? Notieren Sie Sprünge als Empfehlung, nicht als WCAG-Verstoß.
5. Passt es auf allen Seiten zusammen? Fußzeile und Seitenleiste auf allen sieben Seiten mit derselben Ebene.

3. Landmarks im Accessibility-Baum

Ohne Screenreader sehen Sie die Landmarks im Accessibility-Baum der Entwicklertools. In Chrome laut Chrome-Dokumentation: im Bereich Elements den Reiter Accessibility öffnen (er kann hinter dem Doppelpfeil für weitere Reiter versteckt sein) und den Schalter für den Accessibility-Baum der ganzen Seite einschalten. Dann ersetzt Chrome den DOM-Baum durch den Accessibility-Baum. In der deutschen Oberfläche können die Namen übersetzt sein. Eine Schritt-für-Schritt-Anleitung steht in Schritt 1 von ARIA und Barrierefreiheit im Onlineshop.

Achten Sie auf:

• Gibt es genau einen Knoten main, und liegt der Seiteninhalt darin?
• Heißen Kopf- und Fußzeile banner und contentinfo? Steht dort nur „generic“ oder „section“, sind sie keine Landmarks.
• Haben mehrere complementary oder navigation je einen eigenen Namen?
• Hat die Shopsuche die Rolle search?
• Sind die Überschriften als heading mit der richtigen Ebene (level) eingetragen? Das zeigt auch Überschriften aus role="heading".

4. Mit dem Screenreader gegenhören

Wie Sie NVDA oder VoiceOver starten, steht im Screenreader-Test mit NVDA und VoiceOver. Für dieses Thema genügen wenige Tasten:

Quellen: NVDA-Benutzerhandbuch, Abschnitt zur Webnavigation, und Apple, VoiceOver-Rotor; welche Listen der Rotor zeigt, hängt laut Apple von der Seite und den Einstellungen im VoiceOver-Dienstprogramm ab.

Der Praxistest: Öffnen Sie eine Produktseite und drücken Sie in NVDA die Taste 1. Landen Sie beim Produktnamen? Drücken Sie dann mehrmals H. Verstehen Sie allein aus den angesagten Überschriften, was auf der Seite steht und wo die Bewertungen sind? Drücken Sie D: Hören Sie Kopfbereich, Suche, Navigation, Hauptinhalt, Fußzeile, jeweils mit verständlichem Namen?

So beheben Sie

Im Inhalt: Texte, Beschreibungen, Seiten

Zwischenüberschriften in Produktbeschreibungen, Kategorie-Texten und Inhaltsseiten setzen Sie im Editor Ihres Shopsystems über das Absatzformat („Überschrift 2“, „Überschrift 3“ oder ähnlich), nicht über den Fett-Knopf. Unter der h1 des Produkts beginnen Zwischentitel in der Beschreibung mit h2, oder mit h3, wenn das Theme die Beschreibung selbst unter eine h2 „Beschreibung“ stellt; das sehen Sie in Schritt 2. Fette Zeilen aus Hersteller-Texten wandeln Sie beim Einpflegen um. Text, der nur hervorgehoben werden soll, etwa ein Aktionshinweis, wird ein normaler Absatz mit eigener Gestaltung.

Im Theme-Editor ersetzen Sie Standard-Überschriften der Abschnitte durch beschreibende Texte und füllen oder entfernen leere Überschriften.

Im Theme: Vorlagen ändern

Ebenen von Logo, Produktname, Kacheln und Fußzeile stecken in den Vorlagen. So kommen Sie heran:

• Shopify: Im Admin auf Online Store, beim Theme das Menü mit den drei Punkten, dann Edit code; in der deutschen Oberfläche sind die Namen übersetzt. Shopify empfiehlt vorher: „Duplicate your theme to create a backup copy.“ Nutzen Sie die Testversion eines kostenpflichtigen Themes, müssen Sie es kaufen, bevor Sie den Code ändern können (Shopify-Hilfe). Beim Theme Dawn sind die Stellen die Dateien aus dem Abschnitt oben; bei anderen Themes suchen Sie im Editor nach <h1, <h2 und nach der Klasse des Produkttitels.
• WooCommerce: Eine Vorlage kopieren Sie aus dem Ordner templates des Plugins in einen Ordner woocommerce in Ihrem Child-Theme, mit gleicher Struktur, aber ohne templates. Nach Updates von WooCommerce zeigt der Systemstatus, wenn Ihre Kopie veraltet ist (WooCommerce-Dokumentation). Die Ebene der Produktnamen in der Liste ändern Sie ohne Kopie: Die Funktion woocommerce_template_loop_product_title hängt am Hook woocommerce_shop_loop_item_title (content-product.php); Ihr Entwickler entfernt sie dort mit remove_action und hängt eine eigene Funktion mit h3 an. Bei Block-Themes gelten eigene Vorlagen im Website-Editor.
• Shopware 6: In einem eigenen Theme oder Plugin legen Sie die Vorlage unter src/Resources/views/ mit demselben Pfad wie im Core an, erweitern sie mit sw_extends und überschreiben nur den betroffenen Block, danach Cache leeren (Shopware-Dokumentation). Für den Produktnamen in Kacheln ist das der Block component_product_box_name.

Ein Muster für das Grundgerüst, das Ihr Theme haben sollte:

Das Logo ist hier auf Unterseiten keine Überschrift, sondern ein Link mit Alternativtext. Wie der Sprunglink sichtbar wird und wie die nav-Landmarks heißen, steht im Navigationsartikel.

Für Ihren Theme-Anbieter oder Ihre Agentur: „Bitte alle optischen Überschriften als h1 bis h6 auszeichnen und keine Überschriften für reine Gestaltung verwenden (WCAG 1.3.1, W3C F2 und F43). Je Seite eine h1 für den Inhalt, Ebenen ohne Sprünge nach WAI-Tutorial Headings, Produktkacheln eine Ebene unter der Listenüberschrift. Landmarks header, main, footer, search und benannte aside nach WAI-ARIA APG Landmark Regions.“

Protokoll und Checkliste

Protokoll zum Ausfüllen

Datum: ______ · Geprüft von: ______ · Theme und Version: ______ · Werkzeuge: ______

Checkliste

Pflicht nach WCAG (A und AA)

• Jede optische Überschrift ist ein h1 bis h6 oder hat role="heading" mit aria-level (1.3.1).
• Produktbeschreibungen und Inhaltsseiten nutzen das Absatzformat Überschrift, keine fetten Absätze (1.3.1, F2).
• Kein Preis, Hinweis, Versandbanner oder Teaser ist nur wegen der Schriftgröße als Überschrift ausgezeichnet (1.3.1, F43).
• Die Ebene passt grob zum Inhalt: Der Produktname steht nicht unter Abschnitten, zu denen er nicht gehört (1.3.1, H42).
• Jede Überschrift sagt, worum es im Abschnitt geht; keine Wiederholungen wie „Mehr entdecken“ (2.4.6).
• Es gibt einen Weg, Kopfbereich und Menü zu überspringen: Sprunglink, Landmarks oder Überschriften (2.4.1).

Empfohlen (W3C-Tutorials, APG, HTML-Standard, Prüfwerkzeuge)

• Je Seite genau eine h1, und sie benennt den Inhalt: Produkt, Kategorie, Seitenthema.
• Keine Ebene beim Abstieg übersprungen (nicht h2 direkt auf h4).
• Produktkacheln eine Ebene unter der Überschrift der Liste.
• Fußzeile und Seitenleiste auf allen Seiten mit derselben Ebene.
• Keine leeren Überschriften.
• Genau ein main; header und footer direkt im body.
• Shopsuche im search-Element oder mit role="search".
• Mehrfach vorkommende Landmarks mit eigenem Namen, ohne das Wort der Rolle im Namen.
• Aller Inhalt in einer Landmark, auch Cookie-Banner und Widgets, wo der Anbieter das zulässt.

Freiwillig (AAA)

• Jeder Abschnitt hat eine Überschrift (2.4.10).

Dokumentation

• Soll-Liste und Ist-Liste je Seite im Protokoll, mit Kriterium oder „Empfehlung“.
• Funde im Theme an Theme-Anbieter oder Agentur, Funde in Texten an die Redaktion.
• Nach jedem Theme-Update und jeder neuen Seitenvorlage dieselbe Prüfung wiederholt.

Ihr nächster Schritt

Machen Sie zusätzlich den kostenlosen Scan. Er prüft Startseite, Produktseite und Warenkorb und zeigt, was zuerst behoben werden sollte. Als automatische Prüfung findet er nur einen Teil der Barrieren; ob eine fette Zeile in Wahrheit eine Überschrift ist und ob Ihre Überschriften den Inhalt beschreiben, prüfen Sie selbst mit der Checkliste oben.

Stand: 31.10.2026. Quellen gelesen am 31.10.2026.