Page Content
There is no English translation for this web page.
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?
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.
Ansprechpartner/in
Corporate Design & Online-Design: Pressestellee-mail query [3]
e-mail query [4]
00710/Dokumentationen/Styleguide/Markup/linklisten.gif
aterial/corporate_designdesign_guidelines/online_style_
guide/markup/css_arten_und_grundaufbau/parameter/en/fon
t4/maxhilfe/
parameter/en/font4/maxhilfe/id/4576/?no_cache=1&ask
_mail=Yr8swAAI%2F2VIVrl0MxKpMa3499LL6ErjZAfF203AGqPLnxM
N7iLbKw%3D%3D&ask_name=Corporate%20Design%20&%2
0Online-Design%3A%20Pressestelle=
parameter/en/font4/maxhilfe/id/4576/?no_cache=1&ask
_mail=Yr8swAAJPAt1u5j8ihQCTSVGVnUMANABc3wTQhfM6XdcOltXo
DR4VQ%3D%3D&ask_name=Technik%3A%20ZE%20Campusmanage
ment