WCAG 2.4.2 Seite mit Titel versehen

Das Erfolgskriterium 2.4.2 hilft Menschen zu wissen, wo sie sind, ohne die ganze Seite zu lesen. Der Seitentitel ist das Erste, was ein Screenreader ansagt, er steht im Browser-Tab und in Lesezeichen und hilft Menschen mit kognitiven Beeinträchtigungen und allen, die viele Tabs geöffnet haben. Es gehört zur Konformitätsstufe A und ist Teil von EN 301 549 (Abschnitt 9.2.4.2). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Webseiten haben Titel, die Thema oder Zweck beschreiben.

In HTML bedeutet das ein nicht leeres <title>-Element. Das W3C ergänzt:

• der Titel sollte den Inhalt der Seite kennzeichnen, damit Nutzer Seiten unterscheiden können;
• in Single-Page-Anwendungen sollte der Titel aktualisiert werden, wenn sich die Ansicht ändert;
• ein Titel, der zum Linktext oder zur Hauptüberschrift passt, über die man auf die Seite gelangt ist, erleichtert die Orientierung.

Gute Praxis (keine strenge Anforderung) ist, die spezifischste Information an den Anfang zu stellen: „Blaues Leinenhemd – Herrenhemden – Shopname“, nicht „Shopname – Shopname – Hemd“.

Typische Fehler in Onlineshops

• jede Seite hat denselben Titel, nur den Shopnamen;
• Produktseiten mit internen Codes als Titel („SKU 4471-B“);
• Suchergebnisseiten ohne Suchbegriff im Titel;
• Checkout-Schritte oder Kontoseiten in einer Single-Page-App, die den Titel der ersten Ansicht behalten;
• ein fehlendes oder leeres <title> auf Landingpages aus einem Page-Builder;
• Fehlerseiten (404, „nicht vorrätig“) mit einem Titel, der nichts über den Fehler sagt.

So prüfen Sie es

Automatisch: Unser Checker meldet Seiten ohne <title> oder mit leerem Titel (document-title-Regel). Ob ein Titel aussagekräftig ist, muss ein Mensch beurteilen — dieser Teil erfordert eine manuelle Prüfung.

Manuell: Öffnen Sie die wichtigsten Seitentypen — Startseite, Kategorie, Produkt, Suche, Warenkorb, jeden Checkout-Schritt, Konto, 404 — und lesen Sie den Browser-Tab. Fragen Sie sich: Wüsste ich, welche Seite das ist, wenn ich nur das sähe? Haben zwei verschiedene Seiten denselben Titel? Prüfen Sie bei einem Single-Page-Checkout, ob sich der Titel mit jedem Schritt ändert.

So beheben Sie es

• Verwenden Sie eine Titelvorlage: {Seiten- oder Produktname} – {Bereich} – {Shopname}.
• Nehmen Sie auf Such- und paginierten Kategorieseiten den Suchbegriff und die Seitenzahl auf.
• Geben Sie Fehler- und Bestätigungsseiten Titel wie „Seite nicht gefunden – Shopname“ oder „Bestellung bestätigt – Shopname“.
• Setzen Sie in SPAs bei jedem Routenwechsel document.title.
• Die meisten Plattformen (Shopify, WooCommerce, PrestaShop) lassen Sie SEO-Titel festlegen; aussagekräftige Titel helfen auch Suchmaschinen.

Verwandte Kriterien

• 2.4.6 Überschriften und Beschriftungen (Labels) — Überschriften müssen den Inhalt beschreiben.
• 2.4.4 Linkzweck (im Kontext) — der Linktext sollte sagen, wohin der Link führt.
• Starten Sie eine kostenlose Prüfung, um zu sehen, ob Ihre Seiten Titel haben.

Häufige Fragen

Was verlangt WCAG 2.4.2?

Jede Webseite muss einen Titel haben, der ihr Thema oder ihren Zweck beschreibt. In HTML ist das das title-Element im head der Seite.

Warum meldet ein Barrierefreiheits-Checker einen Fehler beim Titel?

Meist, weil die Seite kein title-Element hat oder es leer ist. Automatische Tools können nur das erkennen; ob ein vorhandener Titel aussagekräftig ist, können sie nicht beurteilen.

Müssen Titel eindeutig sein?

Die WCAG verlangen aussagekräftige Titel, und laut W3C sollen Titel die Seite kennzeichnen und helfen, Seiten voneinander zu unterscheiden. In der Praxis machen identische Titel auf jeder Seite das unmöglich — geben Sie also jeder Seite einen eigenen.

Was gilt für Single-Page-Apps und Checkout-Schritte?

Aktualisieren Sie den Titel, wenn sich die Ansicht ändert, zum Beispiel „Versand – Kasse – Shopname“, damit er immer den aktuellen Inhalt wiedergibt.