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.

Vereinfachung mit "unobtrusive" JavaScript

Das bisherige Beispiel für die barrierefreie Gestaltung von Pop-Up-Links erzeugt relativ viel Quellcode. Unter Berücksichtigung des optionalen Charakters des Linkverhaltens, d.h. der Link geht nur dann in einem neuen Fenster auf, wenn JavaScript aktiv ist, sollten auch die Prinzipien des Extern: unobtrusive JavaScript berücksichtigt werden. Dies bedeutet:

Für unser konkretes Beispiel heißt das, dass eine separate JavaScript-Datei eine Funktion anbietet, die das Linkverhalten (Öffnen eines Links in einem neuen Fenster) dynamisch zuweist. Welche Links dieses Verhalten zugewiesen bekommen, muss anhand eines bestehenden Attributs im HTML erfolgen.

Im Prinzip ist es möglich, anhand eines beliebigen Attributs das neue Verhalten dynamisch zuzuordnen. Auch muss die Funktion nicht explizit aufgerufen werden, sondern ein JavaScript kann ebenso eine Seite nach Links mit einem bestimmten Attribut durchsuchen und eine Funktion einem Link zuweisen. Es muss lediglich festgelegt werden, welches Attribut eingesetzt wird und welchen Wert das Attribut besitzen soll.

Folgende Attribute kommen u.a. in Frage:

title Wenn title einheitlich bei der Einbindung von Pop-Up-Fenstern genutzt wird, bietet dieses Attribut eine gute Ausgangsbasis.
class Wenn Pop-Up-Fenster mit Klassen gekennzeichnet werden, so können diese Klassen auch mit JavaScript ermittelt werden.
rel Ein häufig für Links in verschiedenen Zusammenhängen verwendetes Attribut ist rel (relation), das z.B. den Wert "popup" erhalten könnte.

Im Folgenden gehe ich davon aus, dass neue Fenster in irgendeiner Weise eine Besonderheit unter den Links darstellen und dass diese mit dem title-Attribut angekündigt werden. Im bisherigen Beispiel steht für Links zu anderen Webauftritten der Text "Externer Link" im title-Attribut. Es steht aber jedem frei, ein anderes Attribut mit einem selbst bestimmten Wert als "Erkennungszeichen" zu verwenden.

Der Beispiellink sieht nun wieder vereinfacht wie folgt aus:

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

Für das Beispiel nehme ich an, dass Links zu externen Seiten in neuen Fenstern aufgehen sollen.

Links dynamisch erweitern

Die Links sollen nun um Event-Handler erweitert werden, die beim Klick mit dem Mauszeiger oder durch Eingabe per Tastatur auf dem Link das Öffnen des Links in einem neuen Fenster bewirken. Weiter soll das title-Attribut ergänzt werden um die Angabe, dass der Link im neuen Fenster geöffnet wird.

Für die dynamische Anpassung des Links sind folgende Bausteine erforderlich:

Dokument durchsuchen

Der erste Teil des Skripts zum Durchsuchen des Dokuments ist unserem bisherigen Beispiel sehr ähnlich. Die wesentlichen Unterschiede sind:

function sucheNeueFenster() {
  var externerLinkText = "Externer Link";
  var textNeuesFenster = "öffnet in einem neuen Fenster";
  if (!document . getElementsByTagName) { return } ;
  var links = document . getElementsByTagName("a");
  for (i = 0; i < links . length; i++) {
        textalt = links[i] . getattribute("title");
        if (textalt && (textalt . indexof(externerlinktext) != -1)) {
            textzusatz = textalt . substring((textalt . indexof(externerlinktext)) + externerlinktext . length, textalt . length);
            links[i] . setattribute("title", externerlinktext + " " + textneuesfenster + textzusatz);
      links[i] . onclick = links[i] . onkeypress = "erzeugepopup();";
      links[i] . style . bordertop = "1px solid #000000";
    }
  }
}

Wenn das Skript einen Link mit dem title-Attribut "Externer Link" findet, dann werden zwei Event-Handler (onclick und onkeypress) zum Link hinzugefügt und das title-Attribut wird um die Ankündigung des neuen Fensters ergänzt. Diese dynamische Zuweisung von Attributen kann erweitert werden. In dem Beispiel wird noch eine CSS-Eigenschaft (border-top) beispielhaft berücksichtigt. Die einzelnen Zeilen haben folgende Bedeutung:

Erläuterung: dynamisch angepasste Links für Pop-Up-Fenster
Zeile Inhalt Bedeutung
1 function sucheNeueFenster() { Einleitung der Funktion.
2 var externerLinkText = "Externer Link"; Variable, die den Text zur Kennzeichnung eines externen Links enthält.
3 var textNeuesFenster = "öffnet in einem neuen Fenster"; Variable, die den Text zur Kennzeichnung neuer Fenster enthält.
4 if (!document . getElementsByTagName) { return } ; Nur wenn der Browser die JavaScript-Methode getElementsByTagName kennt, wird die Funktion ausgeführt, da es ansonsten zu JavaScript-Fehlern kommen kann. Wenn die Methode vom Browser nicht unterstützt wird, wird ein Rückgabewert an den Link erzeugt, der das Öffnen im gleichen Fenster bewirkt.
5 var links = document . getElementsByTagName("a"); Über das DOM wird das komplette aktuelle Dokument nach Links (A-Elementen durchsucht, welche in einem Array links zwischengespeichert werden.
6 for (i = 0; i < links . length; i++) { Eine Schleife wird generiert, um die einzelnen Links im gerade erzeugten Array nacheinander zu bearbeiten.
7 textAlt = links[i] . getAttribute("title"); Mit der getAttribute-Methode wird das aktuelle title-Attribut eines Links aus dem Arrayfestgestellt und in einer neuen Variable gespeichert.
8 if (textAlt && (textAlt . indexOf(externerLinkText) != -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.
9 Zusatz = 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.
10 links[i] . 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. Im ersten Teil dieser Zeile wird dieser Text mittels setAttribute dem aktuellen Link aus dem Array als title-Attribut dynamisch zugewiesen.
11 links[i] . onclick = links[i] . onkeypress = erzeugePopup; Die (noch zu erläuternde) Funktion die den Link im neuen Fenster aufgehen lässt, wird jetzt mit den beiden Event-Handlern onclick und onkeypress dem aktuellen Link im Array dynamisch beigefügt.
12 links[i] . style . borderTop = "1px solid #000000"; Hier wird beispielhaft eine CSS-Eigenschaft ebenfalls dem aktuellen Link zugeordnet. Das Beispiel erzeugt eine dünne Linie oberhalb des Links, die Nutzern signalisieren soll, dass der Link im neuen Fenster aufgeht (funktioniert nicht in allen Browsern).
13, 14, 15 } } } Die Abfragen und die Funktion werden geschlossen

Einfache Funktion zum Öffnen neuer Fenster

Die zweite Funktion wird im Folgenden simple gehalten. Neben dem Aufruf der Seite können aber weitere Eigenschaften des zu öffnenden Pop-Ups berücksichtigt werden, etwa Fensterbreite und -höhe oder Position.

function erzeugePopup() {
    neuesFenster = window . open(this . href);
    neuesFenster . focus();
    return false;
}

Diese zweite Funktion wird den Links durch die erste Funktion über Event-Handler zugewiesen. Bei aktiviertem JavaScript wird bei Aufruf des Links die Seite in einem neuen Fenster geöffnet und der Fokus auf das neue Fenster gelegt.

Funktionen starten und Demonstrationsbeispiel

Es fehlt lediglich die Ingangsetzung der ersten Funktion. Dies erfolgt mit einer Zeile:

window.onload = sucheNeueFenster;

Der onload-Event-Handler kann dann Schwierigkeiten verursachen, wenn mehrere unabhängige Funktionen nacheinander diesem Event-Handler zugewiesen werden. Sollten Probleme auftauchen, können Sie anstatt der obigen Zeile auch die folgenden Anweisungen nutzen:

meineFunktionen = window.onload;
window.onload = function() {
  sucheNeueFenster();
  if (typeof meineFunktionen == "function") {
    meineFunktionen();
  }
}

Das komplette Beispiel ist in einer Demonstrationsdatei aufbereitet. Dort werden gleich zwei verschiedene Pop-Up-Fenster bereitgestellt: das eine ist wie oben beschrieben und das zweite enthält Erweiterungen, die das Pop-Up-Fenster in Größe und Position verändern.