2.4.2 Page Titled

WCAG – Definition

Erfolgskriterium 2.4.2 (Level A):

Webseiten müssen einen aussagekräftigen Titel haben, der Thema oder Zweck der Seite vermittelt.

Bedeutung

  • Menschen mit Screenreadern hören den Seitentitel als Erstes → er ist die wichtigste Orientierungshilfe.

  • Auch im Browser-Tab, in Suchmaschinen oder Lesezeichen hilft ein guter Titel, die Seite wiederzufinden.

  • Ein fehlender oder nichtssagender Titel („Unbenannt“) führt zu Verwirrung und schlechter User Experience.

Ausreichende Techniken

HTML <title> korrekt setzen

<head>
  <title>Kontakt – WebA11y</title>
</head>

  • Klar und beschreibend: „Produkte – Shopname“ statt „Seite 1“.

  • Titel max. 60–65 Zeichen, wichtigste Info zuerst.

Dynamische Titel für Web-Apps / CMS

  • Viele CMS (WordPress, Contao, Shopware) generieren Titel automatisch → überprüfen, ob sinnvolle Struktur vorhanden ist.

Beispiel Template (PHP/Contao/Twig):

<title>{{ page.title }} – {{ site.name }}</title>

Unterschiedliche Titel pro Seite

  • Startseite: „WebA11y – Barrierefreie Webentwicklung“

  • Kontaktseite: „Kontakt – WebA11y“

  • Blogartikel: „WCAG 2.4.2 Page Titled erklärt – WebA11y“

JavaScript Single Page Applications (SPA)

  • In SPAs den Titel mit document.title dynamisch anpassen:

document.title = "Dashboard – Meine Anwendung";

Beratungstechnicken

  • Struktur beibehalten: erst Inhalt, dann Markenname.

    • z. B. „Über uns – Firma XY“ statt „Firma XY – Über uns“.

  • Konsistenz über die gesamte Website.

  • SEO-Bonus: Suchmaschinen bevorzugen sprechende Titel.

  • Keine Überladung: zu viele Keywords machen Titel unleserlich.

Fehler

Kein Titel vorhanden – <title> leer oder fehlt.

Generisch – „Startseite“, „Unbenanntes Dokument“.

Gleiche Titel auf allen Seiten – keine Orientierung.

Titel nur Markenname – keine Info über den Seiteninhalt.

Titel zu lang oder unverständlich – wird abgeschnitten und verwirrt.