Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Links öffnen im neuen Fenster veröffentlicht in 2007

Dieser Beitrag entstand 2007 und bezieht sich auf die damals geltende BITV. Die wichtigste und nachwievor aktuelle Anforderung ist, dass Links, die ein neues Fenster öffnen, entsprechend gekennzeichnet werden sollen.

JavaScript als Ersatz für target

Laut der strict-Dokumententyp-Definition und der Extern, englischsprachig: XHTML 1.1-Spezifikation gibt es für einen Link kein Attribut target mehr. Das heißt also, ein neues Fenster "darf" nicht einfach mit einem Linkattribut aufgemacht werden, wenn man Webseiten standardkonform nach den Richtlinien des W3C gestalten will.

Nun sollte man aufgrund der Anforderung 6 der BITV kein JavaScript verwenden, wenn damit Funktionen oder Informationen erzeugt werden. Für bestimmte gestalterische Aspekte stellt die Verwendung von JavaScript kein Problem dar, etwa bei Mouse-Over-Effekten. Auch bestimmte Usability-Verbesserungen können sinnvollerweise mit JavaScript berücksichtigt werden. Zum Beispiel wird das flüssige Layout dieser Seiten mittels JavaScript gesteuert (die inhaltliche Spalte passt sich der Fensterbreite an, wenn die Fenstergröße schmaler als der Inhalt wird). Dies war erforderlich, weil alleine mit CSS das Vermeiden von horizontalem Scrollen sonst nicht möglich war.

Generell lautet die Faustregel: Wenn JavaScript eingesetzt wird, dann muss die Funktion auch ohne JavaScript gewährleistet sein bzw. die Webseite muss auch bei fehlender Unterstützung von JavaScript zugänglich und nutzbar sein.

Grundgerüst für Links

Wie geht man dann damit um, einen externen Link, der in einem neuen Fenster geöffnet werden soll, standardkonform zu gestalten?

Das Grundgerüst für jeden Link ist:

<a href="http://www.seitenadresse.de">
  Linktext
</a>

Dieses Grundgerüst eines Links muss grundsätzlich immer im HTML gewahrt sein. Auch wenn zusätzliche JavaScript-Funktionalität hinzugefügt wird, so wird es immer wieder den Fall geben, dass dies nicht aktiviert oder unterstützt wird. In einem solchen Fall muss dieses Grundgerüst als "letzte Alternative" die Funktion des Links gewährleisten.

Was keinesfalls im href-Attribut enthalten sein darf, ist JavaScript. Ein Link

<a href="javascript:meine_funktion();">
  Linktext
</a>

führt zwangsläufig zu einer Barriere.

Ergänzung mit Event-Handlern

Um das Öffnen des Links in einem neuen Fenster zu ermöglichen ist ein JavaScript-Event-Handler erforderlich. Üblicherweise wird der Event-Handler onclick verwendet:

<a href="http://www.seitenadresse.de" onclick="window.open(this.href); return false;">
  Linktext
</a>

Hinweis: Der Event-Handler für den Link muss ein "return false" zurückliefern, da ansonsten die verlinkte Seite zweimal aufgerufen wird. Leider kann bei dieser Technik in Verbindung mit Pop-Up-Blockern die Situation entstehen, dass der Link weder in einem neuen noch im gleichen Fenster aufgeht. Dies liegt daran, dass der Rückgabewert "false" das Ausführen des Links im href-Attribut verhindert. Erforderlich ist also, dass der Event-Handler eine Funktion zum Öffnen des Fensters aufruft und dass der Rückgabewert "false" im Erfolgsfall (Öffnen des neuen Fensters) von der Funktion generiert wird. Wenn kein neues Fenster erzeugt werden kann, muss der Rückgabewert "true" sein.

Somit wird beim Anklicken des Links die Zieladresse in einem neuen Fenster geöffnet. In der BITV müssen jedoch gleich zwei Bedingungen zu Event-Handlern berücksichtigt werden:

Da Browser und Hilfsmittel wie Screenreader den onclick-Event-Handler so behandeln, dass er sowohl auf Mausklick als auch auf die Eingabetaste reagiert, wird für die weiteren Ausführungen dieses Beitrags kein onkeypress-Event-Handler für das Öffnen von Links berücksichtigt und davon ausgegangen, dass der onclick-Event-Handler eine hinreichende Geräteunabhängigkeit bietet.

title-Attribut

Was im title-Attribut enthalten sein soll, ist nicht genau definiert, auch nicht in der BITV. Einige Aspekte der Barrierefreiheit sind jedoch:

Um das Beispiel nicht zu kompliziert zu gestalten, wird die Information für das title-Attribut auf die Angabe beschränkt, dass es sich um eine externe Seite handelt.

<a href="http://www.seitenadresse.de" onclick="window.open(this.href); return false;" title="Externer Link">
  Linktext
</a>

Entsprechend der BITV sollen neue Fenster vor dem Anklicken angekündigt werden. Hierfür gibt es einige Möglichkeiten. Standardkonform ist die Angabe des neuen Fensters im title-Attribut des Links. Für unser Beispiel könnte das heißen, dass das title-Attribut einen Text wie "Externer Link öffnet sich in einem neuen Fenster" enthält:

<a href="http://www.seitenadresse.de" onclick="window.open(this.href); return false;" title="Externer Link öffnet in einem neuen Fenster">
  Linktext
</a>

Das title-Attribut ist allerdings nur dann inhaltlich korrekt, wenn JavaScript eingeschaltet ist und das Fenster tatsächlich in einem neuen Fenster aufgeht. Deshalb sollte diese Information nur bei eingeschaltetem JavaScript bereitgestellt werden. Im nächsten Abschnitt wird die dynamische Zuweisung des title-Attributs vorgestellt.

Dynamische Anpassung des title-Attributs

Die Information über das Öffnen eines neuen Fensters darf in unserem Beispiel nur dann bereitgestellt werden, wenn JavaScript aktiv ist. Die Mitteilung erfolgt über das title-Attribut. Es wird davon ausgegangen, dass im title-Attribut nur die Information "Externer Link" enthalten ist. Das Script soll also das statisch eingebaute title-Attribut "Externer Link" dynamisch ändern und durch die Ankündigung des neuen Fensters ergänzen. Dieses JavaScript sieht wie folgt aus:

<script type="text/javascript"><!--
  var externerLinkText = "Externer Link";
  var textNeuesFenster = "öffnet in einem neuen Fenster)";
  function titleAnpassen (linkObjekt) {
    if (linkObjekt.getAttribute) {
      textAlt = linkObjekt.getAttribute("title");
      if(textAlt && textAlt.indexOf(textNeuesFenster) == -1) {
        textZusatz = textAlt.substring((textAlt.indexOf(externerLinkText)) + externerLinkText.length, textAlt.length);
        linkObjekt.setAttribute("title", externerLinkText + " " + textNeuesFenster + textZusatz);
      }
    }
  }
//--></script>

Diese JavaScript-Funktion kann im Kopf der HTML-Seite oder in einer externen JavaScript-Datei abgelegt werden. Die eben definierte Funktion sollte noch erläutert werden:

Erläuterung: dynamisch angepasste title-Attribute für Pop-Up-Fenster
Zeile Inhalt Bedeutung
1 var externerLinkText = "Externer Link"; Variable, die den Text zur Kennzeichnung eines externen Links enthält.
2 var textNeuesFenster = "öffnet in einem neuem Fenster"; Variable, die den Text zur Kennzeichnung neuer Fenster enthält.
3 function titleAnpassen(linkObjekt) { Einleitung der Funktion mit der Angabe, dass ein Parameter übergeben wird. Da der benötigte Parameter das Link-Objekt selbst ist, wird dieser Parameter entsprechend linkObjekt bezeichnet. Allerdings kann der Parameter einen beliebigen Namen haben.
4 if (linkObjekt.getAttribute) { Es wird festgestellt, ob der Browser die Methode getAttribute kennt. Nur wenn dies der Fall ist, wird die Funktion durchgeführt, da es ansonsten zu hässlichen JavaScript-Fehlermeldungen kommen kann.
5 textAlt = linkObjekt . getAttribute("title"); Mit der getAttribute-Methode wird das aktuelle title-Attribut des Link-Objekts festgestellt und in einer neuen Variablen gespeichert. Das Link-Objekt muss vorher an die Funktion übergeben worden sein und benötigt in manchen Browsern ein bereits vorhandenes (auch leeres) title-Attribut.
6 if (textAlt && textAlt . indexOf(textNeuesFenster) == -1) { Eine kleine Sicherheitsabfrage, ob ein title existiert und ob die Angabe zum Öffnen eines neuen Fensters bereits im title-Attribut enthalten ist, sollte gemacht werden, um zu verhindern, dass diese Information ein weiteres Mal dynamisch hineingeschrieben wird.
7 textZusatz = textAlt . substring( (textAlt.indexOf(externerLinkText) ) + externerLinkText.length, textAlt.length); Es wird im title-Attribut nach zusätzlichen Texten gesucht. In diesem Beispiel wird vorausgesetzt, dass das title-Attribut mit "Externer Link" beginnt. Alles, was sich dahinter befindet, wird in einer neuen Variable gespeichert.
8 linkObjekt . setAttribute("title", externerLinkText + " " + textNeuesFenster + textZusatz); Im hinteren Teil dieser Zeile wird zunächst ein neuer Text für das title-Attribut zusammengesetzt, bestehend aus dem Hinweis auf ein neues Fenster und dem eigentlichen Text des title-Attributs (falls vorhanden). Im ersten Teil dieser Zeile wird dieser Text mittels setAttribute dem Link-Objekt als title-Attribut dynamisch zugewiesen
9-11 } } } Die Abfragen und die Funktion werden geschlossen

Aufruf der Funktion

Noch funktioniert die Funktion nicht! Unser Beispiel muss noch um den Aufruf der Funktion ergänzt werden. Die erste Überlegung, den title des Links dynamisch zu ändern, können wir mit der Tatsache verknüpfen, dass das title-Attribut nur dann am Bildschirm angezeigt wird, wenn der Mauszeiger über das entsprechende Element, also den Link fährt. Daher ist die dynamische Änderung mit einem onmouseover-Event-Handler einleuchtend. Wenn der Mauszeiger über den Link gehalten wird, so soll die Funktion zur dynamischen Veränderung des title-Attributs für diesen Link ausgelöst werden. Dafür muss das Link-Element übergeben werden, was mit this erfolgt:

<a href="http://www.seitenadresse.de" onclick="window.open(this.href); return false;" title="Externer Link" onmouseover="titleAnpassen(this);">
  Linktext
</a>

Bevor man dazu übergeht, diese recht umfangreiche Ergänzung des einfachen Links zu vereinfachen, indem alles in eine einzelne Funktion gepackt wird, muss noch der Aspekt der Geräteunabhängigkeit berücksichtigt werden. Auch hier muss die Bedingung 6.4 bedacht werden, die den Einsatz geräteunabhängiger Event-Handler fordert.

Generell sind title-Attribute mausabhängig und für Tastaturnutzer nicht zugänglich. Diese Gegebenheit muss hingenommen werden. Generell gilt also, dass ein title-Attribut nur dann bei Links eingesetzt werden soll, wenn die Information nicht essentiell ist.

Auch Nutzer von Screenreadern nutzen keine Maus, jedoch können Screenreader title-Attribute von Links auslesen. Wenn also ein Screenreadernutzer einen Link mit der Tastatur fokussiert, muss ebenfalls das title-Attribut in unserem Beispiel angepasst werden. Dies erfolgt mit dem onfocus-Event-Handler, der die gleiche Funktion enthalten muss wie der onmouseover-Event-Handler:

<a href="http://www.seitenadresse.de" onclick="window.open(this.href); return false;" title="Externer Link" onfocus="titleAnpassen(this);" onmouseover="titleAnpassen(this);">
  Linktext
</a>

Somit haben wir recht viel Quellcode für eine simple Sache: Links in einem neuen Fenster öffnen. Das Besondere daran ist, dass dieser Link geräteunabhängig ist, den Anforderungen der strengeren DTDs stand hält und die Bedingung der BITV zur Ankündigung neuer Fenster bei ein- und ausgeschaltetem JavaScript erfüllt.