Warum ist der Seitentitel für die Barrierefreiheit wichtig?

Der ` ` ist meist das Erste, was ein Screenreader beim Laden ansagt, sodass Nutzer bestätigen können, auf der richtigen Seite gelandet zu sein. Er beschriftet zudem Browser-Tab, Lesezeichen und Suchergebnis.

Was ist ein guter Seitentitel?

Stellen Sie das konkrete, eindeutige Seitenthema voran und ergänzen Sie den Websitenamen. Vermeiden Sie einen generischen Titel, der auf jeder Seite wiederholt wird.

Welche WCAG-Regel gilt für Seitentitel?

SC 2.4.2 (Seite mit Titel versehen), Stufe A. axe-core meldet es als `document-title`.

Häufige Verstöße

Fehlende oder generische Seitentitel

Das <title>-Element ist meist das Allererste, was ein Screenreader beim Laden einer Seite ankündigt – so bestätigt ein Nutzer, dass er dort gelandet ist, wo er hinwollte, bevor er sonst etwas auf der Seite hört. Es ist auch das, was in einem Browser-Tab, einem Lesezeichen und einem Suchergebnis erscheint. Ein fehlender oder generischer Titel (ein leeres <title></title>, oder dasselbe "Unbenannt" / "Meine App" auf jeder einzelnen Seite) versagt bei allen drei Aufgaben gleichzeitig.

Dies ist WCAG-Erfolgskriterium 2.4.2 (Seite betitelt), eine Anforderung der Stufe A.

Die Lösung

Jede Seite benötigt einen <title>, der sowohl nicht leer als auch für den Inhalt genau dieser Seite aussagekräftig ist – nicht nur überall wiederholt der Name der Website.

<!-- Vorher: auf jeder Seite gleich -->
<title>Meine App</title>

<!-- Nachher: identifiziert genau diese Seite -->
<title>Profil bearbeiten – Meine App</title>

Ein gängiges, wirksames Muster ist {seitenspezifischer Titel} – {Website-Name}, wobei der eindeutige Teil zuerst kommt, da dieser am nützlichsten ist, wenn man eine lange Liste von Browser-Tabs oder Suchergebnissen überfliegt.

Wo dies in Single-Page-Apps unbemerkt scheitert

Traditionelle Mehrseiten-Websites bekommen dies meist kostenlos – jede serverseitig gerenderte Seite braucht nur ihr eigenes <title>-Tag. Client-seitig geroutete Single-Page-Apps sind der häufigere Fehlerpunkt: Die Navigation zwischen "Seiten" per JavaScript-Router ändert die URL und den sichtbaren Inhalt, aber wenn nichts ausdrücklich document.title passend aktualisiert, behält jede Route stillschweigend den Titel bei, mit dem die anfängliche Seite geladen wurde. Wenn Ihre Website mit React, Vue oder Ähnlichem gebaut ist, prüfen Sie, ob Routenänderungen tatsächlich den Titel aktualisieren – die meisten Routing-Bibliotheken bieten genau dafür einen Hook oder eine Komponente, aber es ist ein leicht zu übersehender Schritt.

Warum "generisch, aber vorhanden" trotzdem scheitert

Ein <title>, der auf jeder Route buchstäblich "Seite" oder nur den Website-Namen sagt, hat technisch ein nicht leeres Title-Element, erfüllt aber nicht die Absicht des Kriteriums – der Titel muss tatsächlich das konkrete Thema oder den Zweck der Seite beschreiben. Wenn zwei verschiedene Seiten Ihrer Website denselben Titel hätten, ist das ein Zeichen, dass die Lösung noch nicht abgeschlossen ist.

Offizielle Referenzen

Häufige Fragen

Warum ist der Seitentitel für die Barrierefreiheit wichtig?: Der `<title>` ist meist das Erste, was ein Screenreader beim Laden ansagt, sodass Nutzer bestätigen können, auf der richtigen Seite gelandet zu sein. Er beschriftet zudem Browser-Tab, Lesezeichen und Suchergebnis.
Was ist ein guter Seitentitel?: Stellen Sie das konkrete, eindeutige Seitenthema voran und ergänzen Sie den Websitenamen. Vermeiden Sie einen generischen Titel, der auf jeder Seite wiederholt wird.
Welche WCAG-Regel gilt für Seitentitel?: SC 2.4.2 (Seite mit Titel versehen), Stufe A. axe-core meldet es als `document-title`.