<a> : l'élément d'ancre - HTML (HyperText Markup Language)

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez également contribuer en rejoignant la communauté francophone sur MDN Web Docs.

`Créer des liens vers des URL relatives`

`HTML`

html URL relative au schéma URL relative à l'origine URL relative au répertoire a { display: block; margin-bottom: 0.5em; } Résultat

`Créer un lien vers un élément de la même page`

html


 Passez à la rubrique ci-dessous 


Section plus bas

Résultat Note : Vous pouvez utiliser href="#top" ou le fragment vide (href="#") pour créer un lien vers le haut de la page actuelle, comme défini dans la spécification HTML.

`Créer un lien avec une adresse électronique`

Pour créer des liens qui s'ouvrent dans le programme de messagerie de l'utilisateur, pour lui permettre d'envoyer un nouveau message, utilisez le schéma mailto: :

html Envoyer un courriel nulle part Résultat Pour plus de détails sur les URL mailto:, comme l'inclusion d'un sujet ou d'un corps de message, voir Liens de courrier électronique ou RFC 6068.

`Créer un lien avec les numéros de téléphone`

html

+49 157 0156
(555) 5309

Résultat tel: le comportement du lien varie en fonction des capacités du périphérique : Les appareils cellulaires composent automatiquement le numéro. La plupart des systèmes d'exploitation disposent de programmes permettant de passer des appels, comme Skype ou FaceTime. Les sites web peuvent passer des appels téléphoniques avec registerProtocolHandler, comme web.skype.com. Les autres comportements comprennent l'enregistrement du numéro dans les contacts, ou l'envoi du numéro à un autre appareil. Voir RFC 3966 pour la syntaxe, les fonctionnalités supplémentaires et d'autres détails sur le schéma URL tel:.

`Utilisation de l'attribut de téléchargement pour enregistrer un`

Pour enregistrer le contenu d'un élément sous forme d'image, vous pouvez créer un lien avec un attribut download et les données du canvas sous forme d'une URL data: :

Exemple d'application de peinture avec lien de sauvegarde HTML html Peignez en maintenant le bouton de la souris enfoncé et en le déplaçant. Télécharger ma peinture CSS css html { font-family: sans-serif; } canvas { background: #fff; border: 1px dashed; } a { display: inline-block; background: #69c; color: #fff; padding: 5px 10px; } JavaScript js var canvas = document.querySelector("canvas"), c = canvas.getContext("2d"); c.fillStyle = "hotpink"; function draw(x, y) { if (isDrawing) { c.beginPath(); c.arc(x, y, 10, 0, Math.PI * 2); c.closePath(); c.fill(); } } canvas.addEventListener("mousemove", (event) => draw(event.offsetX, event.offsetY), ); canvas.addEventListener("mousedown", () => (isDrawing = true)); canvas.addEventListener("mouseup", () => (isDrawing = false)); document .querySelector("a") .addEventListener( "click", (event) => (event.target.href = canvas.toDataURL()), ); Résultat

`Sécurité et vie privée`

Les éléments peuvent avoir des conséquences sur la sécurité et la vie privée des utilisateurs. Voir Referer header : privacy and security concerns pour plus d'informations.

L'utilisation de target="_blank" sans rel="noreferrer" et rel="noopener" rend le site web vulnérable aux attaques d'exploitation de l'API window.opener (description de la vulnérabilité), bien qu'il faille noter que, dans les versions plus récentes du navigateur, la définition de target="_blank" fournit implicitement la même protection que la définition de rel="noopener". Voir la compatibilité des navigateurs pour plus de détails.

`Accessibilité`

`Texte de lien fort`

Le contenu d'un lien doit indiquer où va le lien, même hors contexte.

Texte inaccessible, lien faible Une erreur tristement courante consiste à ne relier que les mots « cliquez ici » ou « ici » : html En savoir plus sur nos produits ici. Résultat Texte de lien fort Heureusement, il s'agit d'une solution facile, et elle est en fait plus courte que la version inaccessible ! html En savoir plus à propos de nos produits. Résultat Les logiciels d'assistance disposent de raccourcis permettant de lister tous les liens d'une page. Cependant, un texte de lien fort profite à tous les utilisateurs − le raccourci « liste de tous les liens » imite la façon dont les utilisateurs voyants parcourent rapidement les pages.

`Évènements onclick`

Les ancres sont souvent détournées avec l'évènement onclick afin de créer des pseudo-boutons avec l'attribut href qui vaut "#" ou "javascript:void(0)" pour empêcher le rafraîchissement de la page.

Ces valeurs produisent des résultats inadéquats lorsqu'on copie/déplace des liens, qu'on ouvre des liens dans de nouveaux onglets ou fenêtres, qu'on ajoute des marque-pages ou lorsque le JavaScript est encore en train d'être téléchargé. De plus, la sémantique exposée par le document, utilisée par les outils d'assistance, est incorrecte. Dans ces cas, on privilégiera plutôt l'utilisation d'un bouton

`Liens externes, liens vers des ressources non-HTML`

Les liens qui ouvrent un nouvel onglet ou une nouvelle fenêtre grâce à target="_blank", ainsi que les liens qui ouvrent des fichiers devraient fournir une indication sur ce qui se produira lorsqu'on cliquera sur ces liens.

Les personnes qui utilisent des outils d'assistance à la navigation comme des lecteurs d'écran et/ou qui souffrent de troubles de la vision, cognitifs peuvent être confuses lorsqu'un nouvel onglet, fichier ou une nouvelle fenêtre s'ouvre de façon inattendue. Les anciennes versions des lecteurs d'écran peuvent également ne pas annoncer ce comportement. Lien vers un nouvel onglet ou une nouvelle fenêtre html Wikipédia (s'ouvre dans une nouvelle fenêtre) Lien vers une ressource non-HTML html Rapport annuel 2017 (PowerPoint) Si une icône est utilisée en lieu et place du texte pour indiquer ce comportement, on s'assurera qu'elle contient bien une description alternative. html Wikipédia Rapport annuel 2017 (PowerPoint) WebAIM : Liens et hypertexte (en anglais) Comprendre les règles WCAG 3.2 G200 : Ouvrir de nouvelles fenêtres et onglets à partir d'un lien lorsque c'est strictement nécessaire - WCAG 2.0 (en anglais) G201 : Fournir un avertissement aux utilisateurs lorsqu'ils ouvrent une nouvelle fenêtre WCAG 2.0 (en anglais)

`Skip links - liens pour l'accès rapide au contenu`

Un skip link (aussi appelé skipnav en anglais) est un élément a qui est placé le plus près possible de l'élément et qui renvoie au début du contenu principal de la page.

html Skip to main content … Résultat Ce lien permet alors de passer plus facilement le contenu qui se répète sur l'ensemble des pages (l'en-tête et la barre de navigation par exemple). Les skip links sont particulièrement utiles pour les personnes qui naviguent à l'aide d'outils d'assistance (commande vocale, stylets buccal ou frontal) pour lesquels devoir passer par des liens répétés peut freiner la lecture du document. WebAIM: "Skip Navigation" Links (en anglais) Comment utiliser les skip links - The A11Y Project (en anglais) Comprendre les règles WCAG 2.4 Understanding Success Criterion 2.4.1 - W3C Understanding WCAG 2.0 (en anglais)

`Dimensionnement et proximité`

`La taille`

Les éléments interactifs tels que les liens doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteur, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44x44 pixels CSS. Les liens en texte seul dans le contenu en prose sont exemptés de cette exigence, mais il est toujours bon de s'assurer qu'il y a suffisamment de texte hyperlié pour être facilement activé. Comprendre le critère d'accessibilité 2.5.5 sur la taille des cibles - Comprendre WCAG 2.1 (en anglais) Taille des cibles et critère 2.5.5, (en anglais) d'Adrian Roselli (an anglais) Test rapide : cibles tactiles suffisamment grande - Projet A11Y (en anglais) La proximité Lorsque plusieurs contenus interactifs (y compris les ancres) sont placés les uns à côté des autres, il est nécessaire de les espacer suffisamment pour minimiser le risque d'activer le mauvais contenu lors de la navigation. Un tel espacement peut être obtenu grâce à la propriété CSS margin. Les tremblements de la main et le problème du bouton géant - Axess Lab (en anglais)

`Spécifications`

Specification
HTML # the-a-element

`Compatibilité des navigateurs`

Voir aussi est similaire à , mais représente des hyperliens de métadonnées qui sont invisibles pour les utilisateurs. :link est une pseudo-classe CSS qui correspondra aux éléments avec des attributs href valides. Help improve MDN Was this page helpful to you? Learn how to contribute.This page was last modified on 1 janv. 1970 by MDN contributors. View this page on GitHub • Report a problem with this content