SSL - Einheitlicher Standard für Links

Definitionen

Der SSL-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionslogik von Links fest.

Struktur und Semantik

Links und Navigation

• Für die Navigation zu einer anderen Adresse wird <a href="/destination"> verwendet. Für eine Aktion ohne Navigation ist <button> vorgesehen.
• Ein <div> oder <span> mit Click-Handler sollte keinen Link ersetzen: Dabei gehen die native Linksemantik, die übliche Tastaturbedienung und Browserfunktionen wie das Öffnen in einem neuen Tab oder das Kopieren des Links verloren.

Linkzweck und Linktext

• Der Zweck eines Links muss sich aus dem Linktext allein oder zusammen mit dem programmatisch zugeordneten Kontext ergeben. Formulierungen wie Mehr erfahren oder Hier klicken eignen sich nur, wenn der umgebende Kontext das Ziel eindeutig erkennen lässt.
• Der Linktext sollte das Ziel oder die Aktion beschreiben. Das Attribut title kann ergänzende Informationen liefern, ersetzt jedoch keinen aussagekräftigen Linktext; Verfügbarkeit und Darstellung hängen vom Gerät und der Art der Interaktion ab.
• Ein Link, der ausschließlich ein Symbol oder Bild enthält, benötigt einen zugänglichen Namen durch Linktext, visuell verborgenen Text oder aria-label; bei Bildern wird außerdem alt verwendet. aria-label ist sinnvoll, wenn keine sichtbare Beschriftung vorhanden ist, und sollte vorhandenen Linktext nicht unnötig ersetzen. Dekorative Symbole sind vor Screenreadern zu verbergen.

URL-Adresse und Aufbau

• Für interne Navigation eignen sich relative URLs wie /about. Externe Ressourcen erhalten eine vollständige URL; sofern verfügbar, ist https:// vorzuziehen.

• Eine URL sollte der kanonischen Form des Zielsystems entsprechen. Ein abschließender / sollte nicht willkürlich hinzugefügt oder entfernt werden: Die richtige Form hängt vom Routing sowie der Server- oder Framework-Konfiguration ab. Einheitliche interne URLs vermeiden unnötige Weiterleitungen.

  <!-- Interner Link -->
  <a href="/about">Über uns</a>
  
  <!-- Externer Link -->
  <a href="https://example.com/pricing">Preise</a>

Fragmentlinks und zulässige Ziele

• Ein Link zu einem Abschnitt verwendet eine Fragmentkennung wie href="#kontakt". Der Wert muss mit einer eindeutigen id des Zielelements übereinstimmen.
• Ein leeres href, href="#" als Platzhalter und das Schema javascript: werden nicht verwendet. Für Aktionen ohne Navigation ist ein Button vorgesehen.
• Adressen aus einem CMS, einer Nutzereingabe oder einer anderen externen Quelle sind anhand einer Liste zulässiger Schemas zu prüfen. Eine ungeprüfte Adresse kann zu einem unsicheren Protokoll führen.

Links zu Dateien

• Der Linktext oder der umgebende Kontext nennt den Dateityp; die Dateigröße wird angegeben, wenn sie für die Download-Entscheidung relevant ist.

• Für eine Datei, die heruntergeladen werden soll, kann das Attribut download verwendet werden. Es funktioniert bei Ressourcen desselben Origins sowie mit den Schemas blob: und data:; Antwortheader und Browsereinstellungen können das Ergebnis beeinflussen. Bei externen Ressourcen garantiert das Attribut allein keinen Download.

  <a href="/files/guide.pdf" download>Anleitung (PDF, 2 MB)</a>

Barrierefreiheit und Sicherheit

Visuelle Unterscheidung und Fokus

• Links im Fließtext müssen sich nicht nur durch Farbe vom normalen Text unterscheiden, etwa durch eine Unterstreichung oder ein anderes dauerhaftes visuelles Merkmal. Ein Effekt nur beim Überfahren mit der Maus reicht nicht aus.
• Der Tastaturfokus muss sichtbar bleiben. :focus-visible eignet sich zur Gestaltung; das native outline sollte nicht ohne einen gleichwertig sichtbaren Ersatz entfernt werden.

Wiederkehrende Inhalte überspringen

• Zum Überspringen wiederkehrender Blöcke, etwa der Navigation, sollte ein Mechanismus vorhanden sein. Ein Link zum Hauptinhalt ist eine gängige Umsetzung: Sein Fragment muss mit einer vorhandenen id des Hauptbereichs übereinstimmen; ist der Link zunächst verborgen, muss er bei Fokus deutlich sichtbar werden.

Status besuchter Links

• Die Pseudoklasse :visited kann Links kennzeichnen, deren Ziele im aktuellen Browser bereits geöffnet wurden. Sie gilt für interne und externe Links; die Einschränkungen der Browser schützen den Browserverlauf und hängen nicht von der Art des Ziels ab.
• Aus Datenschutzgründen beschränken Browser die für :visited verfügbaren Formatierungen und das programmgesteuerte Auslesen des Status. Die Kennzeichnung ist optional und darf nicht die einzige Möglichkeit sein, wichtige Informationen zu vermitteln. Farbe darf nicht das einzige visuelle Merkmal sein, das einen Link vom umgebenden Text unterscheidet.

Öffnen externer Links

• Externe Links werden üblicherweise im aktuellen Tab geöffnet. target="_blank" kommt nur bei nachvollziehbarem Nutzen für die Bedienung zum Einsatz; das Öffnen eines neuen Tabs oder Fensters wird vorab angekündigt.

• Bei target="_blank" wird rel="noopener" ausdrücklich empfohlen. Moderne Browser verhindern bereits, dass die neue _blank-Seite auf window.opener zugreift; das explizite Attribut dokumentiert die Anforderung und unterstützt ältere Implementierungen.

• rel="noreferrer" unterdrückt zusätzlich den Referer-Header und schließt noopener ein. Das Attribut ist zu ergänzen, wenn das Zurückhalten der Referrer-Information eine eigenständige Datenschutzanforderung ist, nicht automatisch bei jedem externen Link.

• Ein Symbol für externe Ressourcen ist optional. Ein dekoratives Symbol neben dem Linktext ist aus dem zugänglichen Namen auszuschließen. Das Öffnen eines neuen Tabs ist auch für Screenreader-Nutzende kenntlich zu machen.

  <a href="https://partner.example" target="_blank" rel="noopener">
    Partner-Website
    <span aria-hidden="true">↗</span>
    <span class="sr-only">(wird in einem neuen Tab geöffnet)</span>
  </a>

sr-only ist ein Beispiel für eine Utility-Klasse, die Text visuell verbirgt; im Projekt ist die entsprechende Klasse des Designsystems zu verwenden.

rel-Werte für die Suchmaschinen-Kennzeichnung

• sponsored kennzeichnet bezahlte oder gesponserte Links, ugc Links in nutzergenerierten Inhalten. nofollow dient der Kennzeichnung für Suchmaschinen, wenn ein Link nicht befürwortet wird oder anderweitig qualifiziert werden soll.
• Diese rel-Werte ersetzen noopener nicht und schützen nicht vor window.opener. Für gewöhnliche externe Links ist nofollow nicht standardmäßig erforderlich.
• Für Google Search sind diese Werte Hinweise und keine Garantie dafür, dass eine URL nicht gefunden oder indexiert wird.

E-Mail- und Telefonlinks

mailto:-Links

• Zum Öffnen eines neuen E-Mail-Entwurfs wird das Schema mailto: verwendet.
• Mehrere Empfänger werden durch Kommas ohne Leerzeichen getrennt. Zusätzliche Felder lassen sich über URI-Parameter wie subject und body vorbelegen.
• Parameterwerte werden als UTF-8 mit Prozentkodierung für URIs kodiert. Zeilenumbrüche im Nachrichtentext werden als %0D%0A dargestellt. Beim Erzeugen einer URI in JavaScript ist jeder Parameterwert einzeln zu kodieren, nicht der gesamte Link.
• In HTML-Markup wird das & zwischen Parametern als & geschrieben. Der Link ruft das auf dem Gerät konfigurierte E-Mail-Programm auf; dessen Verfügbarkeit und Verhalten kann die Website nicht garantieren.

tel:-Links

• Zum Einleiten eines Anrufs wird das Schema tel: verwendet. Für href wird eine normalisierte internationale Nummer empfohlen: ein führendes + und anschließend Ziffern ohne Leerzeichen, Klammern oder Bindestriche.

• RFC 3966 erlaubt visuelle Trennzeichen in Telefonnummern. Zur Vereinheitlichung verwendet dieser Standard eine normalisierte Schreibweise ohne Trennzeichen.

• Telefonnummern in den Beispielen werden durch die Maske xxx-xxx-xxx ersetzt. tel:[normalized-number] in href ist ein Platzhalter und muss vor der Verwendung durch eine echte normalisierte Nummer ersetzt werden. Die sichtbare Maske ist nicht anwählbar.

  <!-- Vorlage: [normalized-number] vor Verwendung durch eine echte Nummer ersetzen -->
  <a href="tel:[normalized-number]">xxx-xxx-xxx</a>

Prüfung

• Der Linkzweck ist anhand des Linktexts oder des zugänglichen Kontexts verständlich.
• Links sind per Tastatur erreichbar und weisen einen sichtbaren Fokuszustand auf.
• Der Status :visited hängt nicht von Skripten ab und legt den Browserverlauf nicht offen; Farbe ist nicht das einzige Linkmerkmal.
• Neue Tabs werden angekündigt; bei target="_blank" kommt noopener zum Einsatz.
• Fragmente verweisen auf vorhandene Elemente; Dateilinks funktionieren und nennen das Format; externe und nutzerseitig eingegebene URLs sind geprüft.
• URLs entsprechen der vereinbarten kanonischen Form; Werte für mailto: und tel: sind korrekt aufgebaut.

Beispiele

Interner Link:

<a href="/about">Über uns</a>

Link zu einem Seitenabschnitt:

<a href="#kontakt">Kontakt</a>
<section id="kontakt">...</section>

Link zum Überspringen wiederkehrender Navigation:

<a class="skip-link" href="#main-content">Zum Hauptinhalt</a>
<main id="main-content">...</main>

Link zu einer herunterladbaren Datei:

<a href="/files/guide.pdf" download>Anleitung (PDF, 2 MB)</a>

Externer Link im selben Tab:

<a href="https://example.com">Website der Organisation</a>

Externer Link mit Hinweis auf den neuen Tab:

<a href="https://partner.example" target="_blank" rel="noopener">
  Partner-Website
  <span aria-hidden="true">↗</span>
  <span class="sr-only">(wird in einem neuen Tab geöffnet)</span>
</a>

E-Mail an zwei Empfänger mit Betreff und Nachricht:

<a href="mailto:manager@example.com,ceo@example.com?subject=Frage%20zum%20Projekt%20XYZ&amp;body=Guten%20Tag!%0D%0A%0D%0AIch%20habe%20eine%20Frage.">
  Management kontaktieren
</a>

Anruflink (Vorlage):

<!-- Vorlage: [normalized-number] vor Verwendung durch eine echte Nummer ersetzen -->
<a href="tel:[normalized-number]">xxx-xxx-xxx</a>