Infos zur Barrierefreiheit für:

Externe Links gesondert kennzeichnen

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.

Das Problem

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?

Die Lösung

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):

Bild-Beispiel

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.

Endergebnis

Wenn Sie alles richtig eingestellt haben, erhalten Sie folgende Darstellungsweisen:

Bei deaktiviertem CSS beziehungsweise in Screenreadern wird der Zusatztext angezeigt:
Beispiellink (externer Link)
Bei aktiviertem CSS wird stattdessen das Bild angezeigt:
Beispiellink (externer Link)

Hinweis

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.

zum Seitenanfang