Externe Links

Zuletzt geändert: 20.03.2026

Links, die zu anderen Webauftritten führen, sollten aus Gründen der Nutzungsfreundlichkeit über eine entsprechende Kennzeichnung verfügen. Vorhandene Indikatoren benötigen ausreichend Kontrast und Textalternativen.

Ergänzender Text als Hinweis

Seitentitel als Hinweistext

Das <title>-Element der Zielseite enthält üblicherweise eine Selbstbezeichnung in Ergänzung zum individuellen Inhalt einer Unterseite. Diese Selbstbezeichnung oder eine Kurzform dessen kann als Hinweis auf einen externen Auftritt hinzugefügt werden („Wikipedia“, „W3C“, „MDN“, …). Auf Zweiter Blick erfolgt dies vor dem eigentlichen Linktext und einem | als Trennzeichen. Dies kann folgendermaßen aussehen:

Wikipedia | Tirol (Bundesland)

Suffix als Text

Der Hinweis auf die Verlinkung zu einem anderen Webauftritt kann allgemein der Beschriftung des Links in einem Suffix folgen. Der HTML-Code sieht dabei etwa folgendermaßen aus:

<a
  href=[URL]>
  [Linkbeschriftung] (extern)
</a>

CSS Anweisung für Suffix

Mit der CSS-Eigenschaft content kann Inhalt zu einem Element hinzugefügt werden. Auf diese Weise kann einfach und einheitlich für einen Webauftritt zu einem externen Link ein Hinweis ergänzt werden. Typischerweise befindet sich der Hinweis hinter dem Linktext. Dies wird durch das Pseudoelement ::after erzielt.

Der Eintrag in eine CSS-Datei kann etwa folgendermaßen aussehen:

a[href^="http"]::after { 
  content: "(extern)" ; 
}

Wenn Stylesheets aus irgendeinem Grund deaktiviert sind, wird der ergänzende Hinweis nicht angezeigt.

Script-Anweisung für Suffix

Auch mit JavaScripts kann einfach und einheitlich für einen Webauftritt zu einem externen Link ein Hinweis ergänzt werden. Das Script kann etwa folgendermaßen aussehen:

document.addEventListener("DOMContentLoaded", function () {
  const links = document.querySelectorAll("a[href^='http']");
  links.forEach(function (link) {
    link.textContent = link.textContent + " (extern)";
  });
});

Wenn JavaScript deaktiviert ist, wird der ergänzende Hinweis nicht angezeigt.

Icon als Indikator

CSS-Icon mit Textalternative

Mit der CSS-Eigenschaft content kann auch ein Bild eingefügt werden. Der Inhalt besteht zunächst aus dem Pfad zur Grafik. Hinter einem Schrägstrich wird der Text festgelegt, der anstelle des Bildes von einem Screen Reader ausgegeben werden soll. Der Alternativtext für das Icon besteht natürlich nicht aus einer Beschreibung der Grafik, sondern informiert über die Eigenart des Links.

Der Eintrag in eine CSS-Datei kann etwa folgendermaßen aussehen:

a[href^="http"]::after { 
  content: url("[Bildpfad]") / "extern" ; 
}

Icon mit Ausweichmechanismus

Um auch bei deaktivierten Stylesheets einen Hinweis auf die Eigenart des Links zu gewährleisten, sollte ein Fallback-Mechanismus bereitgestellt werden. Dieser kann etwa auf folgende Weise realisiert werden:

Das Icon wird durch eine CSS-Klasse (externIcon) in einem span-Element eingebunden.
Das Icon wird mittels aria-hidden für Screen Reader verborgen.
Die textuelle Alternative wird als Text in einem weiteren span-Element realisiert und nicht nur mittels CSS.
Die Textalternative wird durch eine CSS-Klasse vorerst vom Bildschirm verborgen, bleibt jedoch für Screen Reader wahrnehmbar ( sr-only ).

Bei deaktivierten Stylesheets verschwindet das Icon, der mittels CSS verborgene Text wird jedoch eingeblendet (extern).

Der HTML-Code ist dabei folgendermaßen aufgebaut:

<a
  href="https://…">
  [Linkbeschriftung]
  <span
    class="externIcon"
    aria-hidden="true">
  </span>
  <span
    class="sr-only">
    (extern)
  </span>
</a>

Dieser Code wird auf Zweiter Blick mittels JavaScript auf alle Links angewendet, die auf einen externen Webauftritt verweisen. Ausgenommen sind davon fremdsprachige Auftritte, die mit einem hreflang -Attribut versehen sind. Diese werden mit einer Flagge als Indikator versehen.

Script für barrierefreie Kennzeichnung von Links zu externen Auftritten auf Zweiter Blick

Kontexthinweise auf Links

Dass ein Link zu einem anderen Webauftritt führt, kann auch aus dem Kontext hervorgehen. Insbesondere Listen zu externen Auftritten benötigen bei entsprechenden Vorkehrungen keinen Indikator, der explizit auf den Wechsel zu einer anderen Seite hinweist.

Überschrift für Linkliste

Handelt es sich um eine Sammlung von Links zu externen Auftritten, kann dies durch eine Überschrift kenntlich gemacht werden:

Externe Ressourcen

Logos als Indikatoren für externe Links

Sei es eine Liste von Social Media Verknüpfungen, Sponsoren, Netzwerkpartner*innen oder eine Imagemap. Das jeweilige Logo, Ländergrenzen oder Ähnliches können bereits auf externe Webauftritte hinweisen. In diesen Fällen können das Logo, ein Länderwappen oder eine Fahne schon als visueller Indikator für eine Verlinkung zu externen Inhalten gelten.

Das Icon muss jedoch über eine Textalternative verfügen:

Wird das Icon als HTML img-Element eingebunden muss die Zielseite im alt-Attribut beschrieben werden.
Wird das Icon mittels CSS als Hintergrundgrafik eingebettet, stehen folgende Optionen zur Verfügung.
1. Die Textalternative wird in einem span-Element mittels CSS off-screen dargestellt (sr-only).
2. Die Textalternative wird mittels der CSS-Eigenschaft content realisiert.

WCAG Erfolgskriterien

Folgende Erfolgskriterien der WCAG können für Indikatoren für externe Links relevant sein:

1.1.1 Nicht-textueller Inhalt: Icons innerhalb von Links, welche die Bedeutung der Zielseite beschreiben, benötigen textuelle Alternativen.
1.4.3: Kontrast (Minimum): Schriften benötigen einen minimalen Helligkeitskontrast von 4,5∶1 zum Hintergrund. Dies gilt auch für Hinweise zum Linkziel in Textform.
1.4.11 Nicht-textueller Kontrast: Icons müssen als Indikatoren in ihrer visuellen Präsentation ein Kontrastverhältnis von mindestens 3∶1 aufweisen.
2.4.4 Linkzweck (Im Kontext): Die Beschriftung eines Links muss zumindest im engen technischen Kontext den Inhalt des Linkziels beschreiben.; Die Eigenart einer Zielseite kann dabei von Relevanz sein (Dateiformat, externe Ressource, fremdsprachiger Inhalt).
2.4.9 Linkzweck (Allein): Konformitätsstufe AAA; Die Beschriftung eines Links muss für sich den Inhalt der Zielseite beschreiben.; Die Eigenart einer Zielseite kann dabei von Relevanz sein (Dateiformat, externe Ressource, fremdsprachiger Inhalt).
3.2.4 Konsistente Identifikation: Die Darstellung von Links zu externen Auftritten muss innerhalb eines Webauftritts gleichbleiben.
3.2.5 Änderung auf Anfrage: Änderungen des Kontexts bedürfen einer Vorinformation. Eine fehlende Information über die Verlinkung zu einem anderen Webauftritt dürfte jedoch „lediglich“ ein allgemeines Problem der Nutzungsfreundlichkeit darstellen.