Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Der Titel einer Seite veröffentlicht in 2016

Der Titel einer Webseite spielt bei der Orientierung innerhalb eines Webauftritts eine wichtige Rolle. Zusammen mit einer schlüssigen Navigation, Suchfunktionen und ergänzenden Navigationsmechanismen sind sie Teil einer barrierefreien Nutzerführung. Dabei geht es insbesondere darum, dass das Thema oder der Zweck der Seite im Titel beschrieben wird. Beschreibende Titel erlauben es verschiedenen Nutzergruppen, den Inhalt einer Webseite inhaltlich einzuordnen oder zu finden.

Fast immer ohne Kontext

Der Titel einer Seite wird von Browsern und Suchmaschinen vielfältig genutzt. Im Browser wird er

angezeigt. Suchmaschinen und andere Anwendungen zeigen den Titel in den Ergebnislisten an. In den meisten Fällen wird der Titel ohne Kontext gelesen, d.h. der Inhalt wird zwar mit anderen Inhalten angezeigt, aber die Inhalte der Seite selbst stehen nicht zur Verfügung bzw. müssen erst aufgerufen werden. Eine Beschreibung des Seiteninhalts im Titel ist vorteilhaft für alle Nutzer.

Angabe des Titels

Der Titel einer Seite wird mit dem TITLE-Element zu einer Webseite hinzugefügt. Nach der HTML-Spezifikation darf nur ein TITLE-Element pro Webseite vergeben werden. Üblicherweise wird es im Kopfbereich berücksichtigt:

<!doctype html>
<html lang="de">
  <head>
    ...
    <title>Beschreibung von Thema und/oder Zweck der Seite </title>
    ...
  </head>
  <body>
    ... Inhalt der Seite ...
  </body>
</html>

Hinweis: Der Seitentitel sollte für Webseiten immer vergeben werden. Allerdings kann HTML auch beispielsweise in E-Mails genutzt werden, wo die Betreffzeile (und kein Titel) Thema oder Zweck der Nachricht beschreiben soll.

Gründe für sorgfältige Formulierung

Weil der Titel einer Seite in vielen Situationen ohne Kontext angezeigt wird, liegt es auf der Hand, Seitentitel inhaltsbezogen zu formulieren und von generischen Titeln Abstand zu halten. Neben der Nutzerfreundlichkeit spielt vor allem die Suchmaschinenoptimierung eine wichtige Rolle bei der Formulierung von Seitentiteln, da sie nicht zuletzt auch Einfluss auf das Ranking haben. Zumeist werden darüber hinaus die Titel von Webseiten in den Ergebnissen einer Suche aufgelistet.

Abgesehen davon, dass ein guter Seitentitel ohne Kontext Aufschluss über den Inhalt der Seite geben sollte, muss insbesondere auf die Bedeutung des Titels in einem Screenreader hingewiesen werden, denn das erste, was Screenreader über eine Seite mitteilen, ist der Seitentitel. Beschreibt der Seitentitel das Thema oder den Zweck einer Seite, können Screenreadernutzer entscheiden, ob sie sich zum Inhaltsbereich der Seite durchlesen oder ob sie sofort eine andere Seite aufrufen wollen.

Kriterien für barrierefreie Seitentitel

Was im Titel im Hinblick auf Suchmaschinenoptimierung berücksichtigt werden sollte wird in zahlreichen Beiträgen im Web beschrieben. Nachfolgend finden Sie einige Kriterien, die vor dem Hintergrund der Barrierefreiheit wichtig sind.

Seitentitel sollen kurz sein.

Wie lange ein Titel sein sollte, hängt von sehr vielen Faktoren ab. Für die Barrierefreiheit kommt es auf die angezeigten Zeichen in der Titelleiste des Browsers an. die Extern, englischsprachig: maximal empfohlene Länge für Seitentitel im Hinblick auf Suchmaschinen variiert. 70 Zeichen ist ein guter Orientierungswert für die maximale Länge.

Seitentitel sollen beschreibend sein.

Nach den Web Content Accessibility Guidelines (WCAG) 2.0 sind beschreibende Seitentitel einzusetzen. Ein beschreibender Seitentitel identifiziert den Inhalt einer Seite und ist ohne Kontext nachvollziehbar. Nutzer können eher entscheiden, ob sie eine Seite aufrufen und — im Fall von Screenreadernutzern — ob sie bis zum eigentlichen Inhalt der Seite navigieren möchten.

Seitentitel für verschiedene Seiten sollten unterscheidbar sein.

Jeder Seitentitel sollte den spezifischen Inhalt der Seite wiedergeben und sich möglichst von anderen Seitentiteln des gleichen Webauftritts unterscheiden. Nutzer können dann eine Beziehung zwischen einzelnen Seiten innerhalb eines Webauftritts besser herstellen z.B. in einer Sitemap oder in den Ergebnissen einer Suche.

Das Kriterium der Unterscheidbarkeit gilt auch für Webanwendungen: Wird die Seite nicht neu geladen, aber verändert sich der Inhalt der Seite, dann sollte der Extern, englischsprachig: Seitentitel dynamisch angepasst werden.

Wenn der Seitentitel für alle Seiten gleich lautet, kann im Übrigen die Konformität zur WCAG 2.0 nicht mehr erreicht werden. Siehe dazu auch die Extern, englischsprachig: Fehlertechnik F25 zur WCAG 2.0, wo einige Beispiele für Seitentitel aufgelistet werden, die zu nicht zugänglichen Webseiten führen.

Seitenspezifische Begriffe sollten am Anfang des Titels stehen.

Wenn ein Seitentitel aus verschiedenen Teilen (z.B. Beschreibung des Inhalts und Domainname) besteht, sollte der seitenspezifische Teil vor allgemeineren Teilen stehen. Das hat allgemeine Vorteile, etwa dass bei mehreren geöffneten Tabs die Seiten besser identifiziert werden können, aber vor allem profitieren Screenreadernutzer davon, je früher Informationen über den Seiteninhalt im Titel stehen. Auch Überlegungen aus der Suchmaschinenoptimierung sprechen für diese Reihenfolge: Ist der Seitentitel zu lang und der spezifische Teil steht am Ende, dann kann der Inhaltsbezug möglicherweise nicht in den Suchergebnissen angezeigt werden.

Pfadangaben wie bei Bread-Crumb-Pfaden sollten im Titel nicht verwendet werden. Die Titel können dadurch sehr lang werden und der Inhaltsbezug befindet sich nicht am Anfang, sondern am Ende des Titels.

Beispiele für beschreibende Titel

Die Hauptüberschrift dieses Beitrags lautet "Der Titel einer Seite". Im Kontext dieses Webauftritts und insbesondere der Übersichtsseiten und der Sitemap ist diese Überschrift auch als Titel geeignet:

<title>Der Titel einer Seite</title>

Dieser Titel sagt aber nichts darüber aus, dass es sich um Webseiten handelt oder dass es um die Beschreibung des Inhalts geht. Es ist in vielen Situationen ratsam, die Hauptüberschrift eines Inhalts und der Titel der Seite getrennt zu formulieren. Für diese Seite ist der folgende Titel besser geeignet:

<title>Beschreibende Seitentitel in HTML</title>

Ein Seitentitel kann aus zwei oder mehr Teilen bestehen: einer Angabe zum Inhalt und eine Angabe zu übergeordneten Inhalten oder zur Domain. Beispielsweise kann der Titel wie folgt ergänzt werden:

<title>Beschreibende Seitentitel in HTMl - barrierefreies-webdesign.de</title>

Der Zusatz (hier: Angabe des Domainnamens) stellt einen weiteren inhaltlichen Kontext her, nämlich des barrierefreien Webdesigns. Die Kombination aus zu vielen einzelnen Teilen (z.B." Inhaltsbeschreibung, Rubrik und Domainname) kann allerdings problematisch hinsichtlich der Länge werden, so dass meist die Beschränkung auf zwei Teilen zu empfehlen ist.

Der Titel einer Seite ist nicht nur für HTML-Dokumente wichtig, sondern auch für Webanwendungen. Solche Prozesse können sehr unterschiedliche Inhalte unter einer URI anzeigen. Bei dynamischen Anwendungen muss der Seitentitel angepasst werden, wenn der Inhalt der Seite ausgetauscht wird.

Auch Prozesse, die über mehrere einzelne Seiten ablaufen benötigen sorgfältig gewählte Seitentitel. Einige Beispiele sind:

  1. Wenn ein Kontaktformular ausgefüllt und abgeschickt wird und dabei eine Überprüfung der Eingaben dazu führt, dass ein Nutzer Fehleingaben korrigieren muss, dann sollte der Seitentitel einen Hinweis darauf enthalten.

    <title>Fehler bei der Eingabe im Kontaktformular - bitte korrigieren</title>

  2. Ähnlich kann bei Bestätigungen nach dem Abschicken eines Formulars und anderen Hinweisen vorgegangen werden. Für eine Seite von Suchergebnissen kann der Titel z.B. wie folgt lauten:

    <title>20 bis 30 von 54 Ergebnissen für "Seitentitel"</title>

  3. Auch mehrschrittige Formulare (Überweisungen im Online-Banking, Kaufabwicklung in einem E-Shop usw.) sollten die verschiedenen Schritte im Seitentitel berücksichtigen, z.B.:

    <title>Empfänger und Betrag eingeben (1/3 für Inlandsüberweisung)</title>
    <title>Eingaben kontrollieren und PIN eingeben  (2/3 für Inlandsüberweisung)</title>
    <title>Überweisung wurde erfolgreich übermittelt  (3/3 für Inlandsüberweisung)</title>