Externer Link
Führt auf eine andere Domain und öffnet sich in einem neuen Tab.
sap.comtarget="_blank" rel="noopener noreferrer"
E-Mail-Link
Öffnet das Standard-E-Mail-Programm mit einer vorausgefüllten Adresse.
info@spectrumconsulting.ch<a href="mailto:...">
Download-Link
Lädt eine Datei herunter, statt sie im Browser zu öffnen.
Broschüre.pdf<a href="..." download>
Deaktivierter Link
Zeigt eine momentan nicht verfügbare Aktion – kein echtes href.
Interner Link<span aria-disabled="true">
Best Practices
Link oder Button?
Ein Link navigiert zu einer URL (andere Seite, Anker, Datei, E-Mail-Programm). Löst ein Element stattdessen eine Aktion aus (Formular absenden, Modal öffnen, Zustand ändern), gehört es als <button> ausgezeichnet – nicht als <a href="#"> oder <a href="javascript:void(0)">.
rel="noopener noreferrer" bei target="_blank"
Ein Link, der sich in einem neuen Tab öffnet, sollte rel="noopener noreferrer" tragen. Ohne noopener erhält die geöffnete Seite über window.opener Zugriff auf das ursprüngliche Fenster – ein Sicherheitsrisiko. Ein visuelles Zeichen (Icon) sollte zudem ankündigen, dass sich ein neuer Tab öffnet.
Deaktivierte Links richtig auszeichnen
Ein <a> ohne href-Attribut ist für Tastatur- und Screenreader-Nutzer nicht fokussierbar und verhält sich inkonsistent. Für eine momentan nicht verfügbare Aktion eignet sich eher ein <span aria-disabled="true"> oder ein echter <button disabled>, je nachdem, ob es sich eigentlich um eine Navigation oder eine Aktion handelt.
Aussagekräftiger Linktext
Der Linktext sollte für sich allein verständlich sein ("Preisliste herunterladen" statt "hier klicken"), da Screenreader-Nutzer oft eine Liste aller Links auf der Seite durchgehen, losgelöst vom umgebenden Text.