targettitle-Attributtitle-AttributsDer direkte Zugriff
Laut der strict-Dokumententyp-Definition und der ![[extern, englisch]](../../lib/img/en.gif)
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 ![[intern]](../../lib/img/intern.gif){kind=small}
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 ist der gelbe Kreis oben links auf dieser Seite anklickbar und führt dann zur Startseite, obwohl es sich nicht um einen Link handelt. Dies war erforderlich, weil viele Nutzer intuitiv mit der Maus darauf klickten, in der Erwartung, sie kommen so zur Startseite.
Generell lautet die Faustregel: Wenn JavaScript eingesetzt wird, dann muss die Funktion auch ohne JavaScript gewährleistet sein bzw. eine Information muss auch bei fehlender Unterstützung von JavaScript verfügbar sein.
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">Text des Links</a>
Dieses Grundgerüst eines Links muss grundsätzlich immer 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:...">Text des Links</a>
führt zwangsläufig zu einer Barriere.
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;">Text des Links</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:
Bedingung 9.3 wird die Verwendung von logischen Event-Handlern gefordert. Allerdings gibt es derzeit keinen Event-Handler, der sowohl den Klick auf einen Link als auch die Auswahl eines Links durch die Eingabetaste erfasst. Faktisch ist es so, dass sämtliche gängigen Browser den Aufruf eines Links mit der Eingabetaste wie einen Mausklick behandeln. Bedingung 6.4 beachtet werden. Die vom Eingabegerät unabhängige Behandlung des Linkaufrufs müsste mit dem Pendant zu onclick, nämlich onkeypress ergänzt werden. Dieser Event-Handler müsste genau dieselbe Funktion enthalten wie der onclick-Event-Handler.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-AttributWas im title-Attribut enthalten sein soll, ist nicht genau definiert, auch nicht in der BITV. Einige Aspekte der Barrierefreiheit sind jedoch:
Bedingung 13.1 das Ziel eines jeden Links auf eindeutige Weise gekennzeichnet sein. Bedingung 4.1 in jedem Fall angegeben werden. Wenn von einer deutschen beispielsweise auf eine englische Seite verlinkt wird und der Nutzer ist der englischen Sprache nicht mächtig, so würde er möglicherweise den Link gar nicht erst auswählen. Auch für Sprachausgaben ist dies sinnvoll, damit die Software entsprechend von der einen zur anderen Aussprache wechseln kann. Für die Ankündigung des Sprachwechsels für Sprachausgaben ist allerdings das hreflang-Attribut vorgesehen.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">Text des Links</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">Text des Links</a>
Das title-Attribut ist allerdings nur dann 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.
title-AttributsDie 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:
| 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 Variable 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, 10, 11 | } } } |
Die Abfragen und die Funktion werden geschlossen |
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);">Text des Links</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 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);">Text des Links</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.
Lesen Sie, warum ich mich an die Standards halte und warum das Layout mit Cascading Style Sheets statt Tabellen oder Frames gestaltet wurde. Sollten Sie Probleme mit dem Layout haben, so finden Sie in der Liste standardkonformer Browser Links zu entsprechenden Download-Seiten.
Die ![[intern]](../../lib/img/intern_hellblau.gif){kind=small}
Gesamtübersicht dieses Webauftrittes erreichen Sie jederzeit über das AccessKey-Pad mit Alt+6.
Verwenden Sie Tastenkürzel, etwa Alt mit der entsprechenden Zahl, um auf diesem Webauftritt zu navigieren.
![[intern]](../../lib/img/intern_dunkelblau.gif){kind=small}
