Ein neues Fenster für den Link

Ein Link, der ein neues Fenster oder eine neue Registerkarte im Browser öffnet, enthält das Attribut target=“_blank“ im <a>-Element. Dadurch wird der Browser angewiesen, das neue Fenster oder die Registerkarte zu öffnen, anstatt dem Link in der aktuellen Registerkarte zu folgen. Das sieht dann so aus:

<a href="https://meinesite.de" target="_blank" rel="noopener">Eine schicke Website</a>

Wenn ein Link ein neues Fenster oder eine neue Registerkarte öffnet, kann dies für Personen mit einer eingeschränkten visuellen Wahrnehmung oder bestimmten kognitiven Behinderungen verwirrend sein. Blinde oder sehbehinderte Personen, die zur Navigation einen Screenreader verwenden, werden erst einmal nicht bemerken, dass sich ein neues Fenster oder eine neue Registerkarte geöffnet hat. Es ist daher grundsätzlich eine gute Idee, auf das Öffnen von Fenstern oder neuen Registerkarte zu verzichten. Wir machen das bei externen Links nicht, da wir in dem zusätzlichen Fenster/Reiter durchaus auch Vorteile erkennen. Aus unserer Sicht erleichtert ein neuer Tab durchaus die Arbeit und da es die meisten Website seit vielen Jahren machen, ist entspricht es der Erwartungshaltung der Nutzer:innen. Darüber kann man aber streiten.

Praktisch greifen zwei Erfolgskriterien der WCAG unter der Richtlinie 3.2 – die fordert, dass „…Webseiten auf vorhersehbare Weise erscheinen und funktionieren.“. Konkret sind es die Erfolgskriterien 3.2.2 („On Input“, Stufe AA) und 3.2.5 („On Request“, Stufe AAA). Und es gibt ergänzende Erklärungen zu 3.2 die sich G200 öffnet sich in einem neuen Tab und G201 öffnet sich in einem neuen Tab nennen und hier findet sich „Es wird empfohlen, vor dem Öffnen von Links in einem neuen Fenster zu warnen“. Kein Verpflichtung, nur eine Empfehlung. Trotzdem markieren viele automatisierte Test-Werkzeuge das fehlen einer Warnung als Fehler.

Wenn denn Links in einen neuen Fenster erscheinen sollen, ist es eine gute Idee eine entsprechende Information mitzugeben. Etwas wie „öffnet sich in einem neuen Fenster“ als ergänzende Information. Nur wohin damit?

Eine Variante ist ganz einfach umzusetzen – einfach den Hinweis in den Linktext packen. Das sieht nicht ganz so schön aus, funktioniert aber bestens:

<a href="https://meinesite.de" target="_blank" rel="noopener">Eine schicke Website (öffnet sich in einem neuen Fenster)</a>

Wenn noch ein Icon den Sprung in ein neues Fenster visualisieren soll, dann sieht das HTML dazu so aus:

<a href="https://meinesite.de" target="_blank" rel="noopener">Eine schicke Website<i class="fas fa-external-link-alt" aria-hidden="true"></i> (öffnet sich in einem neuen Fenster)</a>

Wenn die Warnung vor dem neuen Fenster exklusiv an einen Screenreader übermittelt werden soll, können wir den Text auch visuell verstecken. Der einzige Nachteil dieses Ansatzes besteht darin, dass sehende Benutzer nicht erkennen können, welche Links sich in einem neuen Fenster öffnen. Diesen Aspekt könnte das gerade vorgestellte Icon lösen:

<a href="https://meinesite.de" target="_blank" rel="noopener">Eine schicke Website <i class="fas fa-external-link-alt" aria-hidden="true"></i><span class="screenreaderonly"> (öffnet sich in einem neuen Fenster)</span></a>

Das passende CSS dazu sieht so aus:

.screenreaderonly {
    overflow: hidden;
    clip: rect(0,0,0,0);
    position: absolute !important;
    width: 1px;
    height: 1px;
    border: 0;
    word-wrap: normal !important;
}

Das ist die robuste Lösung für unser Problem. Funktioniert mit allen Screenreadern die wir probiert haben. Aber es ist nicht der einzige, mögliche Weg.
Eine Alternative setzt auf ein ARIA-LABEL Attribut:

<a href="https://meinesite.de" target="_blank" rel="noopener" aria-label="Eine schicke Website, öffnet sich in einem neuen Fenster">Eine schicke Website</a>

Bei diesem Beispiel kann es durchaus vorkommen, dass ein Screenreader sowohl das Aria-Label und den Linktext liest. Das wäre dann in Teilen die gleiche Information gleich zweimal. Es kann aber auch sein, dass bei einem aria-label der Screenreader nur dieses Label liest. Dann muss der Hinweis auf das Ziel rein.

Eigentlich wäre das title Attribut für Links öffnet sich in einem neuen Tab eine prima Stelle um den Hinweis unterzubringen. Für einen Tooltip auf dem Link eine prima Sache, aber nicht für Screenreader und Tastaturbedienung.

<a href="http://meinesite.de" title="öffnet sich in einem neuen Fenster">Eine schicke Website</a>

Das title Attribut ist auf keinen Fall ein guter Platz um die Beschreibung (Label) für den Link unterzubringen. Es ist dafür gedacht, zusätzliche Hinweise abzulegen. Würde für unsere Zwecke daher gut passen. Leider funktioniert die Kombination von title-Attribut, Tastatur und Screenreader nicht gut. Das title-Attribut kann in bestimmten Fällen durchaus helfen. Aber aufgrund einiger schlechter Praktiken und inkonsistenter Unterstützung sind viele Anwendungsfälle des title-Attributs bestenfalls sinnlos – oder sogar schädlich für die Barrierefreiheit einer Lösung.

Noch eine Möglichkeit bittet CSS. Wir suchen alle Links die ein target Attribut aufweisen und hängen unseren Hinweis an den Linktext. Diese Lösung ist aber ebenfalls nicht ohne Nachteile. Schwer die Mehrsprachigkeit sicherzustellen und es kann mit anderen CSS Anweisungen kollidieren:

main a[target^="_"]::after {
	content: " (öffnet sich in einem neuen Fenster)";
}

Wir nutzen den versteckten Text und das Icon und halten es für den besten Kompromiss. Aber es gibt durchaus Alternativen.