Links in HTML
Jeder Link nennt sein Ziel
Fließtext, Symbol-Link, Linkliste: drei Stellen für einen Linktext.
Name trifft Ziel
Ein Link ist eine Wegbeschreibung
Der Text erklärt das Ziel. Der href-Wert legt den technischen Weg fest.
Planen Sie den Besuch: Anfahrt und Parkplätze.
Springen Sie direkt zum Lieferumfang.
Nutzen Sie die Preisliste (PDF) zur Vorbereitung.
Sie können den Service per E-Mail kontaktieren.
Abbildung, keine bedienbaren Links/kontakt/anfahrtneues Dokument#lieferumfangStelle im selben Dokument/dateien/preisliste.pdfPDF anzeigen oder ladenmailto:service@example.orgE-Mail-Anwendung öffnen- Anfahrt und ParkplätzeLink
- Zum LieferumfangLink
- Preisliste herunterladen (PDF)Link
- Service per E-Mail kontaktierenLink
Drei Teile ergeben einen belastbaren Link
Fehlt href, erzeugt das a-Element keinen Hyperlink.
Mit href entsteht ein Link, der mit Tab erreichbar und mit Eingabetaste aktivierbar ist.
Der Wert kann zu einer Seite, einer Stelle, einer Datei oder einem anderen URL-Schema führen.
Der Text bleibt auch beim Tabben oder in einer isolierten Linkliste verständlich.
Eine Unterstreichung kennzeichnet den Link im Fließtext auch ohne Farbwahrnehmung.
Die häufigsten Ziele als fertiges HTML
Format, Fensterwechsel und Kommunikationsweg gehören in den sichtbaren Text, wenn sie die Entscheidung vor dem Aktivieren beeinflussen.
target="_blank" nötig ist, kündigen Sie den Wechsel im Link an.<!-- Seite -->
<a href="/kontakt/anfahrt">Anfahrt und Parkplätze</a>
<!-- Abschnitt auf derselben Seite -->
<a href="#lieferumfang">Zum Lieferumfang</a>
<h2 id="lieferumfang">Lieferumfang</h2>
<!-- Symbol-Link mit zugänglichem Namen -->
<a href="/suche" aria-label="Suche öffnen">
<span aria-hidden="true">⌕</span>
</a>
<!-- Datei -->
<a href="/dateien/preisliste.pdf" download>
Preisliste herunterladen (PDF)
</a>
<!-- E-Mail-Anwendung -->
<a href="mailto:service@example.org">
Service per E-Mail kontaktieren
</a>
<!-- Neuer Tab mit sichtbarem Hinweis -->
<a href="https://www.w3.org/TR/WCAG22/"
target="_blank" rel="noopener">
WCAG 2.2 <span>(öffnet in neuem Tab)</span>
</a>
<!-- Linkliste -->
<nav aria-label="Service">
<ul>
<li><a href="/faq">Häufige Fragen</a></li>
<li><a href="/reparatur">Reparatur anmelden</a></li>
</ul>
</nav>Links im Absatz sichtbar lassen
Die Linie ist ein Formmerkmal. Sie trägt dieselbe Information wie die Farbe.
article p a {
text-decoration: underline;
text-decoration-thickness: 0.12em;
text-underline-offset: 0.18em;
}
article p a:focus-visible {
outline: 3px solid var(--one);
outline-offset: 3px;
}So prüfen Sie es
Prüfen Sie Name, Erkennbarkeit und Ziel getrennt.
- TabJeder Link erhält FokusDie Reihenfolge folgt dem Inhalt und der aktuelle Link ist deutlich markiert.
- ListeNamen ohne Absatz lesenKein Eintrag heißt nur „hier“, „mehr“ oder „Link“.
- GrauFarbe ausblendenUnterstreichungen halten Links im Fließtext erkennbar.
- EnterZiel kontrollierenSeite, Abschnitt, Datei oder Anwendung entsprechen der Ankündigung.
Aus dem Prüfbericht
Zwei Befunde am a-Element
Kritisch Ein Link ohne Text Regel link-name
Ein a, das nur ein Symbol oder gar nichts enthält, steht ohne Ziel in der Linkliste. Der Text gehört ins HTML des Links.
Kritisch Der Link im Absatz ist nur farbig Regel link-in-text-block
Unterscheidet den Link nur die Schriftfarbe, geht er beim Lesen unter. Eine Unterstreichung macht ihn unabhängig von Farbe erkennbar.
Zum Mitnehmen
Die Links, korrigiert
Ein Text im Link, ein Name am Symbol, eine Zeile CSS.
Korrektur in 3 Schritten ansehen
Das Ziel in den Linktext schreiben
Der Linktext trägt das Ziel. So bleibt er auch in einer Linkliste ohne den Satz davor verständlich.
KorrekturvergleichSchritt 1 · HTML Vorher
<p>Unsere Preise finden Sie <a href="/preise">hier</a>.</p>Nachher
<p><a href="/preise">Preise und Leistungen ansehen</a></p>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Jeder Eintrag nennt sein Ziel.
Symbol-Links benennen
Enthält der Link nur ein Symbol, gibt ein aria-label den Namen. Das Symbol selbst bleibt für Vorleseprogramme verborgen.
KorrekturvergleichSchritt 2 · HTML Vorher
<a href="/warenkorb"> <svg aria-hidden="true"><use href="#icon-korb"></use></svg> </a>Nachher
<a href="/warenkorb" aria-label="Warenkorb öffnen"> <svg aria-hidden="true"><use href="#icon-korb"></use></svg> </a>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit Tab auf das Symbol. Ein Vorleseprogramm sagt „Warenkorb öffnen, Link“.
Links im Fließtext unterstreichen
Die Unterstreichung macht den Link unabhängig von der Farbe erkennbar. Ein kleiner Abstand hält die Linie von den Buchstaben fern.
KorrekturvergleichSchritt 3 · CSS Vorher
article p a { color: #3b2bbd; text-decoration: none; }Nachher
article p a { color: #3b2bbd; text-decoration: underline; text-underline-offset: 0.15em; }Markierte Zeilen wurden geändert
So prüfen Sie es Schalten Sie die Seite auf Graustufen. Der Link bleibt im Absatz erkennbar.