Pour rendre votre page plus accessible et conviviale, vous pouvez créer des liens cliquables pour des textes spécifiques. Il peut s’agir d’un numéro de téléphone, d’un e-mail, d’un SMS, etc.
Dans cet article, j’aimerais vous montrer comment vous pouvez améliorer l’accessibilité d’une page en implémentant uniquement des modifications HTML sémantiques (en plus, pour indiquer le but du lien, vous pouvez lui ajouter un style spécifique).
Pour créer des liens avec des actions spécifiques, vous devez utiliser une balise d’ancrage avec un href attribut qui contient certains paramètres (suivant la syntaxe URI).
Lien email cliquable
À l’intérieur de href attribut spécifier mailto paramètre et l’email qui est séparé par deux-points
<a href="mailto:email@example.com">email@example.com</a>
Cliquer sur ce lien ouvrira un client de messagerie sur l’appareil d’un utilisateur avec une adresse e-mail spécifiée à laquelle l’envoyer.
Vous pouvez spécifier plusieurs e-mails, séparez-les simplement par une virgule :
<a href="mailto:email@example.com, secondemail@example.com">Send us an email</a>
Vous pouvez utiliser d’autres paramètres pour envoyer des e-mails comme cc et bcc.
- mailto : adresse e-mail du destinataire
- cc : l’adresse e-mail qui recevra la copie carbone du courrier (facultatif)
- cci : l’adresse e-mail qui recevra la copie carbone cachée du courrier (optionnel)
- objet : l’objet de l’e-mail (facultatif)
- body : le contenu de l’email (optionnel)
- ? : le premier délimiteur de paramètre (optionnel).
- & : l’autre délimiteur de paramètre (optionnel).
L’ensemble complet de ces paramètres pourrait ressembler à ceci :
<a href="mailto:email@example.com?cc=secondemail@example.com, thirdemail@example.com, &bcc=lastemail@example.com&subject=Mail from my site&body=Hello!">Send us an email</a>
Lien téléphone cliquable
Avoir une action de clic sur un numéro de téléphone est aussi important que le précédent. En cliquant sur un numéro de téléphone, vous passerez instantanément un appel téléphonique.
Vous devrez spécifier le tel paramètre séparé par deux-points d’un numéro de téléphone :
<a href="tel:+012345678910">0-123-45678910</a>
Un clic sur un tel lien déclenchera un appel téléphonique.
Lien sms cliquable
Pour envoyer un message SMS, utilisez la syntaxe suivante.
<a href="sms:+012345678910">Send us a message</a>
Vous pouvez ajouter un paramètre body pour définir le texte initial du message :
<a href="sms:+012345678910?body=Hello!%20How%20are%20you%3F">Send us a message</a>
L’attribut body doit contenir une valeur codée en URL.
Lien géolocalisation cliquable
Pour les appareils Android OS, vous pouvez spécifier la géolocalisation via le schéma d’URI géo "geo:latitude,longitude" spécifié par la RFC 5870.
Cliquer sur un tel lien ouvrira une application cartographique avec des coordonnées données.
<a href='geo:47.26769008051434, 11.407943002524679'>Our location</a>
💡 CONSEIL : Assurez-vous que ces liens sont facilement cliquables sur les appareils mobiles. Pour ce faire, vous pouvez augmenter l’espacement entre les liens en ajoutant une marge et augmenter la zone de frappe en ajoutant un rembourrage.