Verwendung
Links sind Interaktionselemente, die zur Navigation zwischen verschiedenen Masken oder zum Aufruf externer Angebote eingesetzt werden. Sie können innerhalb von Fließtexten oder auch alleinstehend eingesetzt werden.
Je nach Kontext kann bestimmten Links ein Icon vorangestellt werden. Um eine einheitliche und barrierefreie Darstellung sowie Erweiterbarkeit zu gewährleisten, ist die Verwendung einer einheitlichen Icon-Bibliothek zwingend.
Interne Links verweisen auf Seiten innerhalb des Portals und der angeschlossenen Fachverfahren und werden im selben Browser-Fenster bzw. -Tab dargestellt. In Fließtexten werden in der Regel keine zusätzlichen Icons verwendet; Ausnahmen kann es für Muster wie Linklisten geben.
Externe Links verweisen auf Inhalte außerhalb des Portals und der angeschlossenen Fachverfahren. Sie können in einem eigenen Fenster bzw. Browser-Tab geöffnet und optional mit einem vorangestellten Icon gekennzeichnet werden. Bitte beachten Sie, dass diese Regel bewusst weich formuliert ist, da sich nicht mit absoluter Verlässlichkeit definieren lässt, ab wann es sich bei einem Link um einen externen Link handelt.
Download-Links verweisen auf direkte Downloads wie z. B. PDF-Dokumente. Download-Links werden wie Text-Links dargestellt, jedoch zusätzlich mit einem vorangestellten Download-Icon gekennzeichnet.
Weitere Details zu Icons finden Sie in der bereitgestellten Icon-Bibliothek.
Einschränkung
Links in Fließtexten müssen immer blau und unterstrichen sein; auf keinen Fall dürfen Links in der Textfarbe Anthrazit gesetzt werden. Bei alleinstehenden Links kann die Pflicht zur Unterstreichung entfallen, allerdings ist dann ein sinnbildendes Icon zur Kenntlichmachung zwingend erforderlich. Alleinstehende Links erhalten aber auch zwingend einen Unterstrich als :hover-Indikator sowie die gleiche Outline wie Links in Fließtexten bei :focus.
Links in den Meta-, Haupt-, Footer, Hamburger-Navigationen werden nicht unterstrichen, da hier schon alleine durch die Gestaltung und Anordnung sowie für Screenreader im Markup deutlich wird, dass es sich um Navigations-Links handelt. Trotzdem gelten hier die gleichen Regen für Interaktions-Indikatoren: So muss bei :hover und :focus ein weiteres Merkmal hinzukommen, welches den Maus- oder Tastatur-Fokus hervorhebt.
Erlaubt, aber nicht zwingend erforderlich sind Icons wie z. B. in der Meta- bzw. Service-Navigation zur zusätzlichen Verdeutlichung des Linkziels.
Abgrenzung
Links und Buttons sind semantisch und funktional deutlich voneinander abgegrenzt. Button-Elemente dienen nicht der Navigation, hierfür müssen Links benutzt werden. In begründeten Ausnahmefällen wie z. B. in Kacheln können Links aber optisch wie Buttons gestaltet werden. Hierzu werden die entsprechenden Klassen vorgehalten.
Bitte beachten Sie, dass Link-Buttons nur in Ausnahmefällen eingesetzt werden sollten, da die Tastatur-Bedienung von Links (reagieren nur auf Enter) und Buttons (Enter oder Leertaste wenn fokussiert) unterschiedlich ist. Wenn beide, Links und Buttons, gleich aussehen, dann kann dies für Tastaturnutzer verwirrend sein.
Do’s and Dont’s
So:
- Verweise auf hilfreiche weiterführende Inhalte
- Gruppen von alleinstehenden Links in Infoboxen
So nicht:
- Ganze Textabsätze oder längere Passagen verlinken.
- Scripting verwenden, um Aktionen auszulösen
