Externe Links

Notwendigkeit von Metainfos für Links

Metainfos für Links als Thema der Useability

Das Erfolgskriterium 2.4.4 (Zielrichtung eines Links im Kontext) fordert eine Linkbeschriftung, die normalerweise zumindest innerhalb des Elements aussagekräftig ist, in das sie eingebettet ist. Das Erfolgskriterium 2.4.9 (Zielrichtung eines Links allein stehend) verlangt in der Konformitätsstufe AAA (Triple A) darüber hinaus eine verständliche Beschriftung des Links selbst.

Bedeutet das aber auch, dass Metainformationen, wie die Verklinkung zu einem anderen Webauftritt, in die Beschriftung aufgenommen werden sollte? Ich habe zu dieser Fragestellung im Februar 2019 die WebAIM Mailing Liste befasst. Der Diskussionsfaden ist unter folgendem Link nachzulesen:

[WebAIM] Meta Infos necessary in links? (Diskussion in der Mailingliste)

Das Fazit scheint klar und unumstritten: Metainformationen zu Links sind keine grundsätzliche Anforderung in Bezug auf Barrierefreiheit. Sie gehören in das Reich der Useability, das wohlgemerkt nicht weniger relevant für das Web Design sein sollte.

Metainfos für Links als Thema der WCAG

Die explizite Kennzeichnung von Linktypen wird also in den Web Content Accessibility Guidelines WCAG nicht ausdrücklich verlangt, auch nicht in den Erfolgskriterien 2.4.4 (Zielrichtung eines Links im Kontext) und dessen verschärfter Variante 2.4.9 (Zielrichtung eines Links allein stehend).

Werden jedoch visuelle Indikatoren zur Kennzeichnung von externen Links eingesetzt, so müssen diese in ihrer Bedeutung auch für Screen Reader in einer textuellen Form verfügbar sein. (Alternativtexte für Grafiken, aria-label, …)

Darüber hinaus empfiehlt es sich natürlich, die jeweiligen Indikatoren für spezielle Linktypen konsistent über einen Webauftritt hin einzusetzen (Erfolgskriterium 3.2.4 Konsistente Identifikation (Level AA)).

Überlegungen zum Einsatz von Indikatoren für Linktypen

Vorteile von Indikatoren für Linktypen

• Wer ohne Warnung bei der Nutzung eines Screen Readers auf einen Link zu einem externen Webauftritt klickt, wird überrascht sein, dass sich Navigationsmöglichkeiten und Funktionalitäten geändert haben. Sehende merken auf einen Blick, dass ein neuer Webauftritt erscheint. Ein vorheriger Hinweis auf den Wechsel des Kontextes kann jedoch auch für Menschen ohne Sehbeeinträchtigungen von Vorteil sein, insbesondere bei kognitiven Wahrnehmungsproblemen.
• Wer bei einem Link gleich darauf hingewiesen wird, dass das Ziel in einer Fremdsprache erscheint, kann die eigenen Sprachkenntnisse vor einem Klick abschätzen und auf den Klick gegebenenfalls verzichten. Bei der Nutzung von Screen Readrern kann gegebenenfalls auch rascher auf Konfigurationsbedürfnisse der Sprachausgabe reagiert werden.
• Spezielle Dateiformate bieten gelegentlich für die Wahrnehmung Vorteile, häufiger aber Tücken in sich. Das Laden kann länger dauern, insbesondere, wenn etwa eine PDF-Datei erst für einen Screen Reader vorbereitet werden muss. Links zu anderen Dateiformaten sollten daher gekennzeichnet werden, sei es um positive, aber auch um negative Erwartungen zu bedienen.
• Dass ein Link mit dem Attribut target="_blank" in einem neuen Fenster öffnet, wird von Screen Readrern mittlerweile schon technisch erkannt und verlautet. Wer jedoch nicht mit einem Screen modernen Reader arbeitet, wird überrascht sein, wenn die Rückkehr zur vorherigen Seite nicht mit den gewohnten Tastaturbefehlen oder Mausklicks möglich ist. Ich empfehle daher, auf dieses Attribut weithin zu verzichten und den Link im Bedarfsfall mit einem entsprechenden Indikator zu versehen. Wer ein Link in einem neuen Fenster öffnen möchte, sollte selbst darüber entscheiden können. Üblicherweise gelingt das in Browsern, indem beim Klicken auf den Link die SHIFT-Taste niedergedrückt wird.
• Mein Screen Reader erkennt und verlautet technisch einen Link, der zu einem Bereich innerhalb der Webseite führt als Link dieser Seite (In Side Links). Ich empfinde diese Zusatzinformation als hilfreich, weiß jedoch, dass manche dies als störend einschätzen. Ob für solche Links auch visuelle Indikatoren eingesetzt werden sollten, hängt wohl stark vom Umfang einer Webseite und der Zielgruppe ab. Respektive gilt wohl die Einschätzung der User Experience als Kriterium.

Nachteile von Indikatoren für Linktypen

• Der konsistente Einsatz von Indikatoren für spezielle Linktypen erfordert einen höheren technische Vorbereitung und mehr Reflexionen bei der Erstellung redaktioneller Inhalte.
• Metainformationen zu Links werden bei der Nutzung von Screen Readrern vereinzelt als zu geschwätzig erachtet.
• Die Metainformationen überlagern vor der eigentlichen Linkbeschriftung die Wiedergabe des Linktextes, was bei der Auflistung aller Links durch Screen Reader Funktionalitäten zweifellos als störend empfunden werden kann.

Hintergrundgrafik als visuelle Indikatoren für spezielle Links

Problematik von Hintergrundgrafiken

Eine gängige Methode zur Kennzeichnung spezieller Links ist es, den visuellen Indikator mittels CSS-Anweisungen dem Linktext beizufügen. Dies birgt jedoch folgende potentielle Probleme in sich:

• Für Screen Reader ist die Hintergrundgrafik nicht wahrnehmbar.
• Wenn Stylesheets aus irgendeinem Grund abgeschaltet sind, wird die Hintergrundgrafik als visueller Indikator nicht angezeigt.

Lösungsansatz zur Problematik von Hintergrundgrafiken

Eine effiziente Methode, beide Probleme mit einem Schlag zu lösen, ist folgende:

Die Funktion des visuellen Indikators wird textuell mittels CSS-Anweisungen außerhalb des Bildschirms hinterlegt. Dies ist eine zulässige Methode, um Inhalte explizit für Screen Reader bereitzustellen. Wenn jedoch Stylesheets deaktiviert sind, wird der Off-Screen Text auch für alle am Bildschirm ergänzend zum Linktext dargestellt.

Der Code könnte etwa folgendermaßen aussehen:

<a href="https://...">
    <span
      class="icon-external-link"
      title="Extern">
    </span>
    <span class="off-screen">
      Extern
    </span>
    [Linkbeschriftung]
  </a>
</li>

Die CSS-Klasse icon-external-link muss dem Linktext ein Icon beifügen, das externe Links indiziert.

Die CSS-Klasse off-screen muss den Text extern außerhalb des Bildschirms platzieren. Für Screen Reader bleibt er dabei trotzdem wahrnehmbar und bei ausgeschalteten Stylesheets wird er eingeblendet.

Grafiken als visuelle Indikatoren

Werden mit dem <img>-Element Grafiken zur Indikation des Linktyps verwendet, müssen die Bilder mit einem entsprechenden Alternativtext versehen werden. Der Code zur Indikation einer Verknüpfung zu einer PDF-Datei könnte etwa folgendermaßen aussehen:

<a href="down/handbuch.pdf">
  Handbuch 
  <img
    alt="PDF"
    class="link-indicator"
    src="icons/pdf.png" >
</a>

Textuelle Erläuterungen zu Links (Plain Text Indication)

Metainformationen ergänzend zum Linktext können natürlich auch schlicht als Text beigefügt werden. Eine gebräuchliche Methode zur Kennzeichnung solcher Metainformationen ist die Umrandung mit eckigen Klammern ([ ]).

Für diese Methode sprechen folgende Punkte:

• Es sind bei der Wahrnehmung keine Vorkenntnisse oder intuitiven Assoziationen zu den Icons erforderlich.
• Der technische Aufwand zur Einbindung der Metainformationen ist minimal.
• Eine höhere Präzisierung der Metainformationen ist möglich (Kurzinfo zum Webauftritt des externen Links, …).

Allerdings gilt es auch folgende Bedenken zu berücksichtigen:

• Icons sind visuell auffälliger als ein weiterer Text neben dem Linktext.
• Icons sind, sofern sie einmal bekannt sind, rascher in ihrer Funktion wahrnehmbar.
• Der redaktionelle Aufwand bei der textlichen Formulierung der Indikation ist erhöht. Mehr Möglichkeiten erfordern mehr Reflexionen (So wenig Differenzierung wie möglich. So hohe Präzisierung wie nötig.).

Ich habe mich im Blick auf meine Zielgruppe bei externen Links auf Zweiter Blick für eine textliche Indikation des Linktyps mit differenzierteren Kurzinfos zum externen Webauftritt entschieden. ([W3C], [WAI], [WebAIM], …) Ich bin offen für Feedback und Diskussion dieses Ansatzes.