Links zu fremden Webseiten sollten für den Besucher möglichst speziell gekennzeichnet werden. Vor allem wenn sich der Link in einem neuen Fenster öffnet, sollte es darauf irgendeinen Hinweis geben. Es gibt dafür mehrere Lösungsansätze. Ich bevorzuge die folgende Lösung, die von der australischen Agentur Max Design in einem Artikel gut beschrieben worden ist. Dank der Genehmigung von Max Design, kann ich Ihnen hier die deutsche Übersetzung präsentieren. Sie entspricht nicht komplett dem Original, da sie teilweise zum besseren Verständnis mit Eigenanmerkungen versehen wurde.
Gibt es einen Weg um allen externen Links einen Beschreibungstext zuzuweisen und diesen mit einem kleinen Bild zu ersetzen, wenn der Besucher einen Browser mit CSS-Unterstützung benutzt?
Geben Sie dem externen Link eine eigene Klasse.
<a class="extern" href="#">Beispiellink</a>
Man könnte hier zwar das title-Attribut nutzen, aber diese Möglichkeit bringt einige größere
Nachteile mit sich (siehe weiterführende Links). Fügen Sie daher den Beschreibungstext als Bestandteil
der Linkbeschreibung ein.
<a class="extern" href="#">Beispiellink (externer Link)</a>
Umhüllen Sie diesen zusätzlichen Text mit einem Span-Element. Damit es zu keinen Verwechslungen mit anderen Span-Elementen kommt, fügen Sie diesem Span-Element auch noch eine eigene Klasse hinzu. Ohne diese eigene Klasse könnte es passieren, dass neben diesem Zusatztext auch andere Teile der Linkbeschreibung ausgeblendet werden (zum Beispiel: fremdsprachige Links).
<a class="extern" href="#">Beispiellink <span class="extlink">(externer Link)</span></a>
Kreieren Sie eine CSS-Regel um diesen
Beschreibungstext zu „verstecken“. Auch wenn display:none hier
als passende Lösung erscheinen würde, ist sie nicht sinnvoll. Diese Anweisung bewirkt, dass der Beschreibungstext in
Screenreadern gar nicht vorgelesen werden würde. Aus diesem Grund nutzen wir lieber die absolute
Positionierung um den Text aus dem sichtbaren Bereich des Bildschirms zu verschieben.
span.extlink {
position: absolute;
left: -3000px;
top: -3000px;
width: 0;
height: 0;
overflow: hidden;
display: inline;
}Damit das Bild für jeden relevanten Linkzustand anders aussieht, erstellen Sie eine Bilddatei in der Sie drei Variationen des Bildes untereinander platzieren. Zwischen den Versionen lassen Sie jeweils einen größeren Abstand. Das könnte zum Beispiel so aussehen (Die Rahmenfarbe dient nur dem besseren Verständnis):
Erstellen Sie nun eine CSS-Regel um dem externen Link ein Hintergrundbild hinzuzufügen.
a.extern:link {
background: url(external.gif) no-repeat 100% 0;
padding: 0 20px 0 0;
}Erstellen Sie eine CSS-Regel um bei besuchten Links ein Hintergrundbild hinzuzufügen. Das Hintergrundbild wird per CSS nun ein wenig verschoben, so dass das zweite Bild sichtbar wird.
a.extern:visited {
background: url(external.gif) no-repeat 100% -100px;
padding: 0 20px 0 0;
}Erstellen Sie eine CSS-Regel um auch bei allen anderen Linkzuständen ein Hintergrundbild hinzuzufügen. Durch Verschiebung sieht man nun das dritte Bild.
a.extern:hover, a.extern:active, a.extern:focus {
color: #fff;
background: #59586A url(external.gif) no-repeat 100% -200px;
padding: 0 20px 0 0;
}Falls Ihre Webseite eine Hilfeseite beinhaltet, sollten Sie dort erklären was ein externer Link ist und wie das Bild darauf hinweist.
Wenn Sie alles richtig eingestellt haben, erhalten Sie folgende Darstellungsweisen:
Wenn Links über zwei Zeilen führen, wird das Hintergrundbild in einigen Versionen des Windows Internet Explorers am Ende der ersten Zeile anstatt am Ende des Links angezeigt.
