Lien externe
Mène vers un autre domaine et s'ouvre dans un nouvel onglet.
sap.comtarget="_blank" rel="noopener noreferrer"
Lien d'ancrage
Fait défiler vers une section de la même page.
Bonnes pratiques<a href="#best-practices">
Lien e-mail
Ouvre le client de messagerie par défaut avec une adresse pré-remplie.
info@spectrumconsulting.ch<a href="mailto:...">
Lien de téléchargement
Télécharge un fichier au lieu de l'ouvrir dans le navigateur.
Broschüre.pdf<a href="..." download>
Lien désactivé
Représente une action momentanément indisponible — pas de vrai href.
Lien interne<span aria-disabled="true">
Bonnes pratiques
Lien ou bouton ?
Un lien navigue vers une URL (autre page, ancre, fichier, client mail). Si un élément déclenche une action à la place (envoyer un formulaire, ouvrir une modale, changer un état), il doit être balisé en <button> — pas en <a href="#"> ni <a href="javascript:void(0)">.
rel="noopener noreferrer" avec target="_blank"
Un lien qui s'ouvre dans un nouvel onglet devrait porter rel="noopener noreferrer". Sans noopener, la page ouverte a accès à la fenêtre d'origine via window.opener — un risque de sécurité. Un signe visuel (icône) devrait aussi annoncer qu'un nouvel onglet va s'ouvrir.
Bien baliser les liens désactivés
Un <a> sans attribut href n'est pas focalisable au clavier et se comporte de façon incohérente pour les lecteurs d'écran. Pour une action momentanément indisponible, mieux vaut un <span aria-disabled="true"> ou un vrai <button disabled>, selon qu'il s'agit réellement d'une navigation ou d'une action.
Un texte de lien explicite
Le texte du lien doit être compréhensible seul (« Télécharger la brochure » plutôt que « cliquez ici »), car les utilisateurs de lecteurs d'écran parcourent souvent la liste de tous les liens de la page, isolés de leur contexte.