Die Regel document-title meldet eine Seite ohne <title>-Element oder mit leerem Titel. Der Titel ist das Erste, was ein Screenreader ansagt, und die Beschriftung jedes Browser-Tabs, Lesezeichens und Suchergebnisses. Die Lösung ist ein eindeutiger, beschreibender <title> im <head> jeder Seite.
Was die Regel bedeutet
WCAG 2.4.2 Seite mit Titel versehen verlangt, dass jede Webseite einen Titel hat, der Thema oder Zweck beschreibt. In HTML ist das das <title>-Element im <head>.
axe-core liest document.title der gerenderten Seite. Die Regel schlägt an, wenn der Titel fehlt, leer ist oder nur aus Leerzeichen besteht. Sie ist erfüllt, sobald irgendein Text da ist – auch wenn ein Skript den Titel vor der Prüfung gesetzt hat.
Was die Regel nicht prüft:
- ob der Titel die Seite beschreibt. „Startseite“, „Unbenannt“ oder „Seite“ bestehen die Regel und verfehlen trotzdem den Sinn von 2.4.2, weil sie niemandem sagen, wo er ist;
- ob mehrere Seiten denselben Titel tragen;
- ob eine Single-Page-App den Titel beim Ansichtswechsel anpasst.
Ein guter Titel nennt das Spezifische zuerst und den Namen der Website zuletzt: „Versand und Rückgabe – Beispiel-Shop“. Bei Formularschritten oder Suchergebnissen gehört der Zustand dazu: „Schritt 2 von 3: Adresse – Kasse – Beispiel-Shop“, „Fehler: Kontaktformular – Beispiel GmbH“.
Wen es betrifft
Blinde Menschen mit Screenreader hören den Titel als Erstes, wenn eine Seite lädt und wenn sie den Tab wechseln – daran erkennen sie, ob sie richtig angekommen sind. Menschen mit kognitiven Einschränkungen oder Gedächtnisproblemen und alle, die viele Tabs offen haben, finden sich über Titel zurecht. Wer mit Bildschirmlupe arbeitet, sieht nur einen Ausschnitt; die Tab-Beschriftung ist dann oft die schnellste Orientierung. Auch Lesezeichen, Verlauf und Suchergebnisse zeigen den Titel.
Warum die Prüfung anschlägt
- Single-Page-Apps, die im HTML-Gerüst ein leeres
<title></title>ausliefern und nie einen Titel setzen. - Headless-CMS-Setups, bei denen das Template ein SEO-Feld ausgibt, das die Redaktion leer gelassen hat.
- Statische Fehlerseiten – 404, 500, Wartungsmodus –, die außerhalb des Haupt-Templates entstehen.
- Landingpages und Exporte aus Seitenbaukästen, deren
<head>gekürzt wurde. - Framework-Layouts, bei denen eine Route die Titel-Komponente oder den Head-Helfer vergisst.
- Aus Dokumenten erzeugte Seiten, etwa HTML-Exporte von Office-Dateien mit leerem Titelfeld.
So beheben Sie es
- Setzen Sie den Titel im Basis-Layout, damit keine Seite ohne ihn ausgeliefert werden kann. Ist das SEO-Feld leer, nehmen Sie die Hauptüberschrift als Rückfall.
- Machen Sie ihn eindeutig und beschreibend: erst das Thema der Seite, dann der Bereich, dann der Name der Website.
- In einer Single-Page-App aktualisieren Sie
document.titlebei jedem Routenwechsel – zusammen mit dem Fokus, der auf den neuen Inhalt springt.
<!-- Vorher: kein title-Element im head -->
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main><h1>Versand und Rückgabe</h1></main>
</body>
</html><!-- Nachher: beschreibender Titel – Seite zuerst, Website zuletzt -->
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Versand und Rückgabe – Beispiel-Shop</title>
</head>
<body>
<main><h1>Versand und Rückgabe</h1></main>
</body>
</html>In einem clientseitigen Router gehört der Titel an dieselbe Stelle wie die Daten der Route:
// Nach jedem Routenwechsel: die neue Ansicht im Tab-Titel benennen
router.afterEach((to) => {
document.title = `${to.meta.title} – Beispiel-Shop`;
});So prüfen Sie es von Hand
- Sehen Sie sich den Browser-Tab an oder geben Sie in der Konsole
document.titleein. - Fragen Sie sich: Sagt mir der Titel allein, welche Seite das ist? Vergleichen Sie ihn mit der Hauptüberschrift.
- Öffnen Sie mehrere Seiten desselben Typs – Produktseiten, Artikel, Suchergebnisse – und prüfen Sie, ob sich die Titel unterscheiden.
- Wechseln Sie in einer Single-Page-App zwischen Ansichten und beobachten Sie, ob sich die Tab-Beschriftung ändert.
- Laden Sie die Seite mit Screenreader neu und hören Sie, was zuerst angesagt wird (NVDA: Einfügen + T liest den Titel vor).
Zugehöriges WCAG-Kriterium
2.4.2 Seite mit Titel versehen, Stufe A. Verwandt: 2.4.6 Überschriften und Beschriftungen, weil Titel und Hauptüberschrift dasselbe erzählen sollten, und 3.3.1 Fehlererkennung, wenn ein Formular mit Fehlern neu lädt.
So meldet Reviseberg diese Regel
Reviseberg führt document-title auf jeder gecrawlten Seite bei 1280 px aus. In der Befundliste sehen Sie die Regel mit Schweregrad, WCAG-Kriterium 2.4.2 und Stufe, der Zahl der Seiten und den Punkten, die ein Fix zurückbringt. Im Detail stehen alle betroffenen Seiten – so fällt eine Gruppe von Fehlerseiten oder ein einzelnes defektes Template sofort auf. Befunde können Sie mit Begründung als „ignorieren“, „nicht behebbar“ oder „Fehlalarm“ markieren; jede Entscheidung wird protokolliert.
Titel zählen auch für die Suche, und das separate SEO-Modul von Reviseberg prüft sie von dieser Seite: fehlende, zu lange, zu kurze und doppelte Titel. Diese SEO-Befunde werden getrennt bewertet und verändern den Barrierefreiheits-Score nie. Ob ein Titel seine Seite tatsächlich beschreibt, beurteilt ein Mensch.
Verwandte Regeln
- undefined – die andere Angabe, die jedes Seiten-Template braucht.
- undefined – die Seite hat keine Hauptüberschrift, die zum Titel passt.
- undefined – dasselbe Prinzip für eingebettete Frames.
Die Titel aller Seiten Ihrer Website prüfen – kostenloser Scan