Links and Buttons Guide

Links

Links sind einer der grundlegendsten, aber zutiefst fundamentalen und grundlegenden Bausteine des Webs. Klicken Sie auf einen Link, und Sie gelangen zu einer anderen Seite oder werden zu einer anderen Stelle innerhalb derselben Seite verschoben.

Inhaltsverzeichnis

• HTML-Implementierung
• Styling- und CSS-Überlegungen
• JavaScript-Überlegungen
• Barrierefreiheitsüberlegungen

HTML-Implementierung

Ein einfacher Link

<a href="https://css-tricks.de">CSS-Tricks</a>

Das ist ein Link zu einer „vollqualifizierten“ oder „absoluten“ URL.

Ein relativer Link

Sie können auch „relativ“ verlinken

<!-- Useful in navigation, but be careful in content that may travel elsewhere (e.g. RSS) -->
<a href="/pages/about.html">About</a>

Das kann nützlich sein, zum Beispiel in der Entwicklung, wo der Domainname wahrscheinlich anders ist als die Produktionsseite, aber Sie trotzdem auf Links klicken möchten. Relative URLs sind am nützlichsten für Dinge wie Navigation, aber seien Sie vorsichtig bei der Verwendung in Inhalten – wie Blog-Posts –, wo diese Inhalte möglicherweise außerhalb der Website gelesen werden, z. B. in einer App oder einem RSS-Feed.

Ein Sprunglink

Links können auch „Hash-Links“ oder „Sprunglinks“ sein, indem sie mit einem # beginnen

<a href="#section-2">Section Two</a>
<!-- will jump to... -->
<section id="section-2"></section>

Das Klicken auf diesen Link springt (scrollt) zum ersten Element im DOM mit einer übereinstimmenden ID, wie das Section-Element oben.

💥 Kleiner Trick: Die Verwendung eines Hash-Links (z. B. #0) in der Entwicklung kann nützlich sein, damit Sie auf den Link klicken können, ohne zum Anfang der Seite zurückgeleitet zu werden, wie es bei einem Klick auf einen #-Link geschieht. Aber Vorsicht, Links, die nirgendwohin verlinken, sollten niemals in die Produktion gelangen.

💥 Kleiner Trick: Sprunglinks können manchmal von sanftem Scrollen profitieren, um den Benutzern zu helfen zu verstehen, dass die Seite von einem Ort zum anderen wechselt.

Es ist eine ziemlich übliche UI/UX-Praxis, auf Websites einen Link „Zurück nach oben“ zu sehen, insbesondere dort, wo wichtige Navigationselemente oben sind, aber viel Inhalt zum Scrollen (oder anderweitig zum Navigieren) vorhanden ist. Um einen Sprunglink zu erstellen, verlinken Sie auf die ID eines Elements, das sich oben auf der Seite befindet und an den der Fokus zurückgegeben werden soll.

<a href="#top-of-page">Back to Top</a>

Sprunglinks werden manchmal auch verwendet, um auf andere Anker- (<a>) Elemente zu verlinken, die kein href-Attribut haben. Diese werden als „Platzhalterlinks“ bezeichnet

<a id="section-2"></a>
<h3>Section 2</h3>

Es gibt Barrierefreiheitsüberlegungen zu diesen, aber insgesamt sind sie akzeptabel.

Deaktivierte Links

Ein Link ohne href-Attribut ist die einzige praktische Möglichkeit, einen Link zu deaktivieren. Warum einen Link deaktivieren? Vielleicht ist es ein Link, der erst nach dem Einloggen oder Anmelden aktiv wird.

a:not([href]) {
  /* style a "disabled" link */
}

Wenn ein Link kein href hat, hat er keine Rolle, keine Fokussierbarkeit und keine Tastaturereignisse. Das ist beabsichtigt. Man kann es sich wie ein <span> vorstellen.

Soll der Link in einem neuen Fenster oder Tab geöffnet werden?

Sie können das target-Attribut dafür verwenden, aber es wird dringend abgeraten.

<a href="https://css-tricks.de" target="_blank" rel="noopener noreferrer">
  CSS-Tricks
</a>

Der Teil, der es funktionieren lässt, ist target="_blank", aber beachten Sie das zusätzliche rel-Attribut und die Werte dort, die sicherer und schneller machen.

Das Öffnen von Links in neuen Tabs ist eine wichtige UX-Diskussion. Wir haben einen ganzen Artikel darüber, wann er verwendet werden sollte. Zusammengefasst

Verwenden Sie ihn nicht

• Weil Sie oder Ihr Kunde es persönlich bevorzugen.
• Weil Sie versuchen, Ihre Verweildauer auf der Website zu erhöhen.
• Weil Sie zwischen internen und externen Links oder Inhaltstypen unterscheiden.
• Weil es Ihre Art ist, mit Problemen des unendlichen Scrollens umzugehen.

Verwenden Sie ihn

• Weil ein Benutzer auf der aktuellen Seite etwas tut, z. B. aktiv Medien wiedergibt oder ungespeicherte Arbeit hat.
• Sie haben einen obskuren technischen Grund, warum Sie dazu gezwungen sind (selbst dann sind Sie wahrscheinlich immer noch die Regel, nicht die Ausnahme).

Soll der Link einen Download auslösen?

Das download-Attribut auf einem Link weist den Browser an, die verlinkte Datei herunterzuladen, anstatt sie im aktuellen Fenster/Tab zu öffnen. Das ist eine nette UX-Geste.

<a href="/files/file.pdf" download>Download PDF</a>

Das rel-Attribut

Dieses Attribut gibt die Beziehung des Links zum Ziel an.

Das rel-Attribut wird auch häufig für das <link>-Element verwendet (das nicht zum Erstellen von Hyperlinks verwendet wird, sondern für Dinge wie das Einbinden von CSS und das Vortäuschen von Ladevorgängen). Wir beziehen hier keine rel-Werte für das <link>-Element ein, nur Ankerlinks.

Hier sind einige grundlegende Beispiele

<a href="/page/3" rel="next">Next</a>
<a href="/page/1" rel="prev">Previous</a>

<a href="http://creativecommons.org/licenses/by/2.0/" rel="license">cc by 2.0</a>

<a href="/topics/" rel="directory">All Topics</a>

• rel="alternate": Alternative Version des Dokuments.
• rel="author": Autor des Dokuments.
• rel="help": Eine Ressource zur Hilfe bei der Bearbeitung des Dokuments.
• rel="license": Lizenz- und rechtliche Informationen.
• rel="manifest": Web App Manifest-Dokument.
• rel="next": Nächstes Dokument in der Serie.
• rel="prev": Vorheriges Dokument in der Serie.
• rel="search": Ein Dokument, das zur Suche im aktuellen Dokument dient.

Es gibt auch einige rel-Attribute, die speziell dazu dienen, Suchmaschinen zu informieren

• rel="sponsored": Kennzeichnet Links, die Anzeigen oder bezahlte Platzierungen sind (häufig als bezahlte Links bezeichnet), als gesponsert.
• rel="ugc": Für nicht besonders vertrauenswürdige benutzergenerierte Inhalte wie Kommentare und Forenbeiträge.
• rel="nofollow": Weist die Suchmaschine an, diesen Link zu ignorieren und diese Website nicht mit dem Linkziel zu verknüpfen.

Und auch einige rel-Attribute, die sich am stärksten auf die Sicherheit konzentrieren

• rel="noopener": Verhindert, dass ein neuer Tab die JavaScript-Funktion window.opener nutzt, die potenziell auf die Seite mit dem Link (Ihre Website) zugreifen könnte, um bösartige Dinge zu tun, wie z. B. Informationen zu stehlen oder infizierten Code zu teilen. Die Verwendung mit target="_blank" ist oft eine gute Idee.
• rel="noreferrer": Verhindert, dass andere Websites oder Tracking-Dienste (z. B. Google Analytics) Ihre Seite als Quelle eines angeklickten Links identifizieren.

Sie können mehrere durch Leerzeichen getrennte Werte verwenden, wenn Sie dies benötigen (z. B. rel="noopener noreferrer")

Und schließlich stammen einige rel-Attribute aus dem Microformats-Standard oder dem Indieweb wie

• rel="directory": Zeigt an, dass das Ziel des Hyperlinks eine Verzeichnisliste ist, die einen Eintrag für die aktuelle Seite enthält.
• rel="tag": Zeigt an, dass das Ziel dieses Hyperlinks ein vom Autor zugewiesener „Tag“ (oder Schlüsselwort/Thema) für die aktuelle Seite ist.
• rel="payment": Zeigt an, dass das Ziel dieses Hyperlinks eine Möglichkeit bietet, die aktuelle Seite zu unterstützen oder zu bezahlen.
• rel="help": Gibt an, dass die verlinkte Ressource eine Hilfedatei oder eine FAQ für das aktuelle Dokument ist.
• rel="me": Gibt an, dass sein Ziel dieselbe Person oder Entität wie die aktuelle Seite darstellt.

ARIA-Rollen

Die Standardrolle eines Links ist link, daher müssen Sie dies *nicht* tun

<a role="link" href="/">Link</a>

Das bräuchten Sie nur, wenn Sie einen Link faken würden, was eine seltsame/seltene Sache wäre, die man jemals tun müsste, und Sie müssten zusätzlich dazu JavaScript verwenden, damit er tatsächlich dem Link folgt.

<span class="link" tabindex="0" role="link" data-href="/">
  Fake accessible link created using a span
</span>

Schon ein Blick nach oben zeigt, wie viel zusätzliche Arbeit das Faken eines Links ist, und das ist, bevor man bedenkt, dass es das Rechtsklicken kaputt macht, das Öffnen in einem neuen Tab nicht zulässt, nicht mit dem Windows High Contrast Mode und anderen Lesermodi und assistiven Technologien funktioniert. Ziemlich schlecht!

Eine nützliche ARIA-Rolle, um die aktuelle Seite anzuzeigen, wie z. B.

<a href="/" aria-current="page">Home</a>
<a href="/contact">Contact</a>
<a href="/about">About/a></a>

Sollten Sie das title-Attribut verwenden?

Wahrscheinlich nicht. Sparen Sie dies für die Benennung eines iframe mit einem kurzen, beschreibenden Titel.

<a title="I don't need to be here" href="/">
  List of Concerts
</a>

title bietet einen durch Hover ausgelösten UI-Popup, der den von Ihnen geschriebenen Text anzeigt. Sie können ihn nicht stylen, und er ist nicht wirklich gut zugänglich.

Durch Hover ausgelöst ist die Schlüsselphrase hier. Er ist auf Geräten, die nur Touchscreen-fähig sind, unbrauchbar. Wenn ein Link zusätzliche kontextbezogene Informationen benötigt, stellen Sie diese im eigentlichen Inhalt um den Link herum bereit oder verwenden Sie beschreibenden Text im Link selbst (im Gegensatz zu etwas wie „Hier klicken“).

Nur-Icon-Links

Wenn ein Link nur ein Icon enthält, wie z. B.

<a href="/">😃</a>

<a href="/">
  <svg> ... </svg>
</a>

Das reicht nicht an kontextuellen Informationen über den Link, insbesondere aus Barrierefreiheitsgründen, aber möglicherweise auch für jeden. Links mit Text sind fast immer klarer. Wenn Sie Text absolut nicht verwenden können, können Sie ein Muster wie dieses verwenden

<a href="/">
  <!-- Hide the icon from assistive technology -->
  <svg aria-hidden="true" focusable="false"> ... </svg>
  <!-- Acts as a label that is hidden from view -->
  <span class="visually-hidden">Useful link text</span>
</a>

visually-hidden ist eine Klasse, die verwendet wird, um den Beschriftungstext mit CSS visuell zu verbergen

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Im Gegensatz zu aria-label kann visuell versteckter Text übersetzt werden und hält sich besser in spezialisierten Browser-Modi.

Links um Bilder

Bilder können Links sein, wenn Sie sie in einen Link einbetten. Es ist nicht notwendig, den Alt-Text zu verwenden, um zu sagen, dass das Bild ein Link ist, da assistive Technologien dies bereits tun werden.

<a href="/buy/puppies/now">
  <img src="puppy.jpg" alt="A happy puppy.">
</a>

Links um größere Inhaltsblöcke

Sie können einen ganzen Inhaltsbereich verlinken, wie z. B.

<a href="/article/">
  <div class="card">
    <h2>Card</h2>
    <img src="..." alt="...">
    <p>Content</p>
  </div>
</a>

Aber natürlich gibt es UX-Implikationen. Zum Beispiel kann es schwieriger sein, Text auszuwählen, und das gesamte Element benötigt ziemlich komplexe Styling, um klare Fokus- und Hoverzustände zu erzeugen. Es gibt auch Barrierefreiheitsimplikationen, wie die Tatsache, dass der Inhalt der gesamten Karte gelesen wird, bevor er als Link angekündigt wird.

Hier ist ein Beispiel mit zwei Ansätzen. Der erste umschließt die gesamte Karte mit einem Link. Das ist gültig, aber denken Sie an die Implikationen. Der zweite hat einen Link im Titel, und der Link hat ein Pseudoelement, das die gesamte Karte abdeckt. Auch das hat Implikationen (z. B. etwas umständlich, Text auszuwählen), ist aber für assistive Technologien vielleicht erwartungsgemäßer.

Das zweite Beispiel eröffnet auch die Möglichkeit, mehrere Links einzubinden. Sie können Links nicht verschachteln, daher wird es etwas knifflig, wenn Sie müssen. Es ist jedoch möglich, indem Sie die einzelnen Links mit z-index über dem kartenabdeckenden Link positionieren.

Styling- und CSS-Überlegungen

Hier ist das Standardaussehen eines Links

Wahrscheinlich werden Sie das Styling Ihrer Links ändern, und wahrscheinlich werden Sie CSS dazu verwenden. Ich könnte alle meine Links in CSS rot färben, indem ich tue

a {
  color: red;
}

Manchmal ist das Auswählen und Stylen *aller* Links auf einer Seite etwas zu stark, da Links in der Navigation möglicherweise ganz anders behandelt werden als Links im Text. Sie können Selektoren immer beschränken, um Links in bestimmten Bereichen anzusprechen, wie z. B.

/* Navigation links */
nav a { }

/* Links in an article */
article a { }

/* Links contained in an element with a "text" class */
.text a { }

Oder wählen Sie den Link direkt aus, um ihn zu stylen.

.link {
  /* For styling <a class="link" href="/"> */
}

a[aria-current="page"] {
  /* You'll need to apply this attribute yourself, but it's a great pattern to use for active navigation. */
}

Link-Zustände

Links sind fokussierbare Elemente. Mit anderen Worten, sie können mit der Tab-Taste auf der Tastatur ausgewählt werden. Links sind vielleicht das häufigste Element, bei dem Sie die verschiedenen Zustände sehr bewusst gestalten werden, einschließlich eines :focus-Zustands.

• :hover: Zum Stylen, wenn ein Mauszeiger über dem Link schwebt.
• :visited: Zum Stylen, wenn der Link besucht wurde, so gut der Browser es sich merken kann. Aufgrund von Sicherheitsbeschränkungen hat er begrenzte Styling-Möglichkeiten.
• :link: Zum Stylen, wenn ein Link *nicht* besucht wurde.
• :active: Zum Stylen, wenn der Link gedrückt wird (z. B. die Maustaste gedrückt ist oder das Element auf einem Touchscreen angetippt wird).
• :focus: Sehr wichtig! Links sollten immer einen Fokusstil haben. Wenn Sie die Standard-Blaue-Umrandung entfernen, die die meisten Browser anwenden, verwenden Sie auch diesen Selektor, um einen visuell deutlichen Fokusstil wieder anzuwenden.

Diese sind, wie alle Pseudo-Klassen, verkettbar, sodass Sie etwas wie das hier tun könnten, wenn es für Ihr Design/UX nützlich ist.

/* Style focus and hover states in a single ruleset */
a:focus:hover { }

Sie können einen Link so gestalten, dass er wie ein Button aussieht

Vielleicht ist etwas von der Verwirrung zwischen Links und Buttons so etwas wie das hier

Das sieht sicherlich wie ein Button aus! Jeder würde das als Button bezeichnen. Sogar ein Designsystem würde das wahrscheinlich Button nennen und vielleicht eine Klasse wie .button { } haben. Aber! Ein Ding, das man klicken kann und das „Mehr erfahren“ sagt, ist sehr wohl ein Link, kein Button. Das ist völlig in Ordnung, es ist nur eine weitere Erinnerung, das semantisch und funktional korrekte Element zu verwenden.

Farbkontrast

Da wir Links oft mit einer deutlichen Farbe gestalten, ist es wichtig, eine Farbe mit ausreichendem Farbkontrast für die Barrierefreiheit zu verwenden. Es gibt eine Vielzahl von Sehbehinderungen (siehe das Tool WhoCanUse zur Simulation von Farbkombinationen mit verschiedenen Beeinträchtigungen) und hoher Kontrast hilft fast allen von ihnen.

Vielleicht setzen Sie eine blaue Farbe für Links

Während das für Sie gut aussehen mag, ist es besser, Tools zum Testen zu verwenden, um sicherzustellen, dass die Farbe ein ausreichend starkes Verhältnis gemäß recherchierten Richtlinien aufweist. Hier schaue ich in Chrome DevTools und es wird mir sagen, dass diese Farbe nicht konform ist, da sie nicht genug Kontrast zum Hintergrund hat.

Farbkontrast ist eine wichtige Überlegung bei Links, nicht nur, weil sie oft in einer einzigartigen Farbe gefärbt sind, die überprüft werden muss, sondern weil sie all diese verschiedenen Zustände (Hover, Fokus, Aktiv, Besuch) haben, die ebenfalls unterschiedliche Farben haben können. Kombinieren Sie dies mit der Tatsache, dass Text ausgewählt werden kann, und Sie haben viele Stellen, an denen der Kontrast berücksichtigt werden muss. Hier ist ein Artikel über all das.

Styling von „Arten“ von Links

Wir können in CSS mit Attributselektoren clever werden und herausfinden, auf welche Art von Ressource ein Link verweist, vorausgesetzt, der href-Wert enthält nützliche Informationen.

/* Style all links that include .pdf at the end */
a[href$=".pdf"]::after {
  content: " (PDF)";
}

/* Style links that point to Google */
a[href*="google.com"] {
  color: purple;
}

Links für den Druck stylen

CSS hat eine „At-Rule“ für die Deklaration von Styles, die nur für gedruckte Medien wirksam werden (z. B. das Ausdrucken einer Webseite). Sie können sie in jedem CSS wie folgt einfügen

@media print {
  /* For links in content, visually display the link */ 
  article a::after { 
    content: " (" attr(href) ")";
  }
}

Styles zurücksetzen

Wenn Sie alle Styles eines Links (oder eigentlich jedes anderen Elements) entfernen müssten, bietet CSS eine Möglichkeit, alle Styles mithilfe der all-Eigenschaft zu entfernen.

.special-area a {
  all: unset;
  all: revert;
  
  /* Start from scratch */
  color: purple;
}

Sie können auch einzelne Styles mit Schlüsselwörtern entfernen. (Auch hier ist dies nicht wirklich einzigartig für Links, sondern generell nützlich)

a {
  /* Grab color from nearest parent that sets it */
  color: inherit;

  /* Wipe out style (turn black) */
  color: initial;

  /* Change back to User Agent style (blue) */
  color: revert;
}

JavaScript-Überlegungen

Nehmen wir an, Sie möchten verhindern, dass das Klicken auf einen Link das tut, was er normalerweise tut: zu diesem Link gehen oder auf der Seite herumspringen. In JavaScript können Sie preventDefault verwenden, um das Herumspringen zu verhindern.

const jumpLinks = document.querySelectorAll("a[href^='#']");

jumpLinks.forEach(link => {
 link.addEventListener('click', event => {
    event.preventDefault();
    // Do something else instead, like handle the navigation behavior yourself
  });
});

Diese Art von Sache ist der Kern von „Single Page Apps“ (SPAs). Sie fangen Klicks ab, damit Browser nicht die Kontrolle übernehmen und die Navigation handhaben.

SPAs sehen, wohin Sie gehen möchten (innerhalb Ihrer eigenen Website), laden die benötigten Daten, ersetzen auf der Seite, was sie benötigen, und aktualisieren die URL. Es ist viel Arbeit, das zu replizieren, was der Browser kostenlos tut, aber Sie erhalten die Möglichkeit, Dinge wie Animationen zwischen den Seiten zu tun.

Ein weiteres JavaScript-Problem bei Links ist, dass beim Klicken auf einen Link zu einer anderen Seite diese verlassen wird und eine andere Seite geladen wird. Das kann problematisch sein für eine Seite, die ein Formular enthält, das der Benutzer ausfüllt, aber noch nicht abgeschlossen hat. Wenn er auf den Link klickt und die Seite verlässt, verliert er seine Arbeit! Ihre einzige Möglichkeit, zu verhindern, dass der Benutzer die Seite verlässt, ist die Verwendung des beforeunload-Ereignisses.

window.addEventListener("beforeunload", function(event) {
  // Remind user to save their work or whatever.
});

Ein Link, dessen Standardverhalten aufgehoben wurde, kündigt das neue Ziel nicht an. Das bedeutet, dass eine Person, die assistive Technologie verwendet, möglicherweise nicht weiß, wo sie gelandet ist. Sie müssen Dinge tun wie den Titel der Seite aktualisieren und den Fokus wieder an den Anfang des Dokuments verschieben.

JavaScript-Frameworks

In einem JavaScript-Framework wie React sehen Sie manchmal Links, die aus einer <Link />-Komponente anstelle eines nativen <a>-Elements erstellt werden. Die benutzerdefinierte Komponente erstellt wahrscheinlich ein natives <a>-Element, aber mit zusätzlicher Funktionalität, wie z. B. der Aktivierung des JavaScript-Routers und dem Hinzufügen von Attributen wie aria-current="page", wenn nötig, was eine gute Sache ist!

Letztendlich ist ein Link ein Link. Ein JavaScript-Framework kann eine gewisse Abstraktion bieten oder fördern, aber Sie sind immer frei, normale Links zu verwenden.

Barrierefreiheitsaspekte

Wir haben einige Barrierefreiheitsaspekte in den obigen Abschnitten behandelt (alles hängt zusammen!), aber hier sind noch ein paar Dinge zu bedenken.

• Sie benötigen keine Texte wie „Link“ oder „Gehe zu“ im Linktext selbst. Machen Sie den Text aussagekräftig („Dokumentation“ statt „Klicken Sie hier“).
• Links haben bereits standardmäßig eine ARIA-Rolle (role="link"), sodass Sie sie nicht explizit festlegen müssen.
• Versuchen Sie, nicht die URL selbst als Text zu verwenden (<a href="google.com">google.com</a>)
• Links sind *im Allgemeinen* blau und *im Allgemeinen* unterstrichen, und das ist *im Allgemeinen gut*.
• Alle Bilder im Inhalt sollten sowieso einen `alt`-Text haben, aber umso mehr, wenn das Bild in einem Link eingeschlossen ist, der sonst keinen Text hat.

Eindeutige zugängliche Namen

Einige assistive Technologien können Listen interaktiver Elemente auf der Seite erstellen. Stellen Sie sich eine Gruppe von vier Artikelkarten vor, die alle einen „Weiterlesen“-Link haben. Die Liste der interaktiven Elemente wird so aussehen:

• Weiterlesen
• Weiterlesen
• Weiterlesen
• Weiterlesen

Nicht sehr nützlich. Sie könnten die `visually-hidden`-Klasse verwenden, die wir besprochen haben, um die Links aussagekräftiger zu gestalten:

<a href="/article">
  Read More
  <span class="visually-hidden">
    of the article "Dancing with Rabbits".
  <span>
</a>

Jetzt ist jeder Link eindeutig und klar. Wenn das Design es zulässt, tun Sie es *ohne* die visuell ausgeblendete Klasse, um die Mehrdeutigkeit für alle zu beseitigen.