direkt zum Inhalt springen

direkt zum Hauptnavigationsmenü

Sie sind hier

TU Berlin

Inhalt des Dokuments

Links und Linkkennzeichnung

Linkkennzeichnung

Alle Links - außer Überschriften und Textlinks, die auf seiteninterne Dokumente verweisen - sind mit einem Icon ausgezeichnet, das kommuniziert, um welche Art von Link es sich handelt. Die Nutzer erhalten wichtige Zusatzinformationen über das Zieldokument: Wohin führt der Link? Ist es ein externer Link? Welches Dokument erwartet den Nutzer?

Arten von Links

  • Interne Links
  • Externe Links
  • Downloads
  • Links zum Kontaktformular
Linklisten
Lupe

Linklisten eines Linktypus' in der Randspalte

Bei Linklisten, die den gleichen Typus von Links enthalten - z.B. eine Linksliste mit externen Links - wird der Linklisten-Typ per Klasse in die ul geschrieben.

  • interne Linkliste: <ul>
  • externe Linkliste: <ul class="extern">
  • Linkliste mit Downloads: <ul class="download">

Gemischte Linklisten in der Randspalte

Besteht eine Linkliste aus unterschiedlichen Linktypen, so steht in der ul keine Klasse, sondern jedes a ist indivduell mit einer Klasse versehen, die den Linktyp beschreibt.

<ul>
<li><a class="intern" href="#">ein Link</a></li>
<li><a class="extern" href="#">ein Link</a></li>
<li><a class="download" href="#">ein Link</a></li>
</ul>

Textlinks

Ähnlich wie bei gemischten Linklisten werden Textlinks je nach Typ mit einer Klasse ausgezeichnet. Interne Links müssen nicht mit einer Klasse ausgezeichnet werden. Dann werden sie auch nicht mit einem Icon ausgezeichnet.

Links in Teaserlisten oder anderen Modulen

Diese Links werden automatisch über den Kontext mit den richtigen Link-Icons versehen.

Barrierefreie Mehr-Links

Das Link-Ziel von Mehr-Links ist häufig unklar, besonders wenn sie mit Hilfe von Screenreadern außerhalb ihres Kontextes zum Beispiel in einer Liste mit Links der Seite angezeigt werden. Lösung: Mehr Komfort für blinde Menschen durch ausgeblendete Zusatzinformationen.

HTML: Nach dem "mehr" steht "zu: und die Überschrift des Teasers/Zieldokuments" <span class="mehr"><a href="#">Mehr<span class="aural">zu: ##Überschrift wiederholen##</span><a></span>. So ist der Link auch außerhalb des Kontexts verständlich.

CSS: Die Inhalte innerhalb des <span class="aural"> werden auch in den sichtbaren Bereich geschoben.

Title-Tags

Vermeidung der Doppelung von: Link-Texte und Title-Tags: Ein Title ist eine Zusatzinformation zum Link. Wenn es keine sinnvollen und nützlichen weiteren Informationen zu dem Link gibt, sollte der Title-Text weglassen werden.

nächstes Kapitel:

Zusatzinformationen / Extras

Direktzugang

Schnellnavigation zur Seite über Nummerneingabe

Diese Seite verwendet Piwik für anonymisierte Webanalysen. Mehr Informationen und Opt-Out-Möglichkeiten unter Datenschutz.

Ansprechpartner/in

Corporate Design & Online-Design: Pressestelle

Technik: tubIT