User nicht durch unklare/unseriöse Links in die Irre führen

Wer kennt sie nicht: Webseiten, auf denen sich zahlreiche "Hier"-Links tummeln. Diese werden oft in Texten genutzt, um PDFs oder Unterseiten/externe Webseiten zu verlinken. Die Verlinkung über das Wort "Hier" birgt jedoch Gefahren und Probleme.

 "Hier"-Links sehen in der Regel unprofessionell aus. Im Text eingebettete Links müssen sprechend/eindeutig sein. Sprich der verlinkte Text sagt, zu welchem Ziel der Link führen wird. Wir schaffen auf diese Weise Transparenz. Dem User ist ersichtlich, wohin der Link führt. Bleibt er auf einer Seite der EUF oder erfolgt eine Weiterleitung auf eine externe Seite. Zudem kann der User selber entscheiden, ob er der Weiterleitung zustimmt oder nicht.

Nachteil schlechter Verlinkungen im Detail

Kurze sprechende Links dienen ebenfalls der Orientierung. Ein Nutzer kann Seiten schnell nach Schlagwörtern scannen. Screenreader erfassen alle Links einer Seite und lesen sie der Reihe nach vor. Personen, welche die Website mit Tastatur anstelle Maus bedienen, bewegen sich mit der Tabulator-Taste von Link zu Link. Nur mit "Hier", "Hier" und "Hier" gekennzeichnete Links, sind für Nutzer von Hilfsmitteln unverständlich. Es wird nicht ersichtlich, wo welcher Link hinführen wird. Die Personen werden nie, an die für sie relevanten, Informationen kommen.

Lange nichts sagende Links sind ebenfalls nicht barrierearm. Solche Links werden oftmals von der Allgemeinheit als unseriös oder unsicher empfunden. Links die aus einer zusammengewürfelten Folge von Zeichen bestehen, könnten in der Regel überall hinführen. Dem User ist nicht ersichtlich, ob zu einer Seite der EUF oder zu einer externen evtl. unsicheren Website weitergeleitet wird. Personen, die einen Screenreader nutzen, bekommen derartig lange unzusammenhängende Links Buchstabe für Buchstabe vorgelesen und wissen am Ende nicht, wo der Link sie hinführt.

Schlechte Verlinkungen im Fließtext

Gute Verlinkungen

Im Fließtext:

Als Buttons:

Nützliche Informationen zur Anreise

PDFs und Co. korrekt verlinken

Screenshot zeigt eine Liste mit TYPO3-Inhaltselementen aus der Kategorie "Spezielle". Hervorgehoben ist das Element "Dateilinks".
TYPO3 Inhaltselement Dateilinks

Wenn Sie einen Link zu einer PDF, Excel-Datei oder ähnlichem setzen, machen Sie das Dateiformat im Link-Text deutlich. Nutzer brauchen für verschiedene Formate oft spezielle Programme oder Plugins. Diese sollten Sie nicht einfach voraussetzen.

PDFs müssen barrierefrei sein. Wenn Sie eine PDF hochladen, die nicht barrierefrei ist, müssen Sie das im Link angeben.

Beispiel-Texte für verlinkte PDFs:

  • Informationen zum Studienstart (PDF)
  • Liste mit wichtigen Büchern im Biologie-Studium (PDF - nicht barrierefrei)

Best-Practice wäre es, wenn Sie zur Bereitstellung von Dateien das TYPO3-Inhaltselement "Dateilinks" nutzen. Dieses gewährleistet eine optische Hervorhebung von Dateien, in Form von Kacheln oder einer Liste, und stellt einen Vorlesebutton zur Verfügung.

Weiter zum Thema "Barrierefreie PDFs" 

Title-Attribut für Links ausfüllen

Das Title-Element ist sowohl für Sehende als auch Beeinträchtigte nützlich. Bilder und Links können mit einem title-Attribut versehen werden. Dieses wird sichtbar, wenn mit der Maus über das Bild oder den Link langsam gefahren wird (hovern) (Abb. 1). Im Titel können sich ergänzende Informationen finden, wie "Weiterleitung zur PDF XY". Im Reiter "Allgemein" des Inhaltselements "Texte, Tabellen und Bilder" lässt sich bei jedem Link ein Titel hinterlegen. Dafür wählen Sie den Link im Text aus und klicken das Klammer-Symbol in der Zeile mit den Textoptionen (Abb. 2).

Füllen Sie das Title-Attribut in Typo3 aus, falls der Link zu einer externen Seite führt oder ein separates Browser-Fenster/Browser-Tab öffnen wird. Die Angabe im Title-Attribut sollte wie folgt aussehen:

  • Im neuen Fenster: Seite XY
  • Weiterleitung zu XY
  • Weiterleitung zu XY (öffnet PDF)
  • Externer Link: XY
  • Externer Link: XY (öffnet neues Fenster)
  • Verlinkung zu XY
Screenshot zeigt, wie sich das Title-Element bei Hovern über den Link sichtbar macht.
Abb. 1: So schaut das ausgefüllte Title-Element beim Hovern über den Link aus
Screenshot aus dem Linkbrowser, der zeigt wie man bei einem Link das Title-Element ausfüllt.
Abb. 2: Link-Titel im Link-Browser hinterlegen

Mehr zum Thema in unseren TYPO3-Schulungsmaterialien

Dateien mit TYPO3 verlinken Buttons in TYPO3 nutzen