button as a link in html : améliorer l’accessibilité de vos CTA

L'accessibilité web est un aspect fondamental de la conception de sites internet modernes. Assurer une expérience utilisateur inclusive pour tous, y compris les personnes handicapées, est une responsabilité cruciale pour les développeurs web. Les Call-To-Actions (CTA), points de contact essentiels pour guider les utilisateurs vers une action souhaitée, doivent être particulièrement bien conçus pour être accessibles et compréhensibles par tous. Une bonne implémentation des CTA, qu'ils utilisent un button ou un a , impacte directement le taux de conversion. Malheureusement, une erreur fréquente consiste à utiliser un élément HTML inapproprié, comme un lien (` `) stylisé pour ressembler à un bouton (` `), ce qui peut entraîner des problèmes d'accessibilité et d'expérience utilisateur. Cette mauvaise pratique affecte négativement l'optimisation SEO du site.

Les bases : comprendre <button> et <a>

Pour bien comprendre les problèmes potentiels liés à l'utilisation incorrecte des balises HTML <button> et <a> dans vos Call-To-Actions, il est essentiel de maîtriser les différences fondamentales entre ces deux éléments. Ces deux éléments HTML servent des objectifs distincts et sont conçus pour interagir avec les utilisateurs de manières spécifiques. Une utilisation incorrecte peut nuire à la navigation et à l'accessibilité de votre site, en particulier pour les personnes utilisant des technologies d'assistance, compromettant ainsi votre stratégie d'optimisation SEO. Il est donc crucial de comprendre quand utiliser chaque élément pour garantir une expérience utilisateur optimale.

<button> : l'élément pour les actions

L'élément <button> est conçu pour déclencher des actions sur la page. Il est le choix sémantiquement approprié pour des actions qui ne nécessitent pas de navigation vers une autre URL. Il est principalement utilisé pour soumettre des formulaires (soumission de données), ouvrir des fenêtres modales (affichage d'informations supplémentaires), exécuter des scripts JavaScript (interactions dynamiques) ou toute autre action qui modifie l'état de la page sans nécessairement rediriger l'utilisateur vers une nouvelle page. Un bouton a un comportement par défaut qui inclut la possibilité de recevoir le focus au clavier et de déclencher l'événement click lorsqu'il est activé, offrant ainsi une expérience utilisateur accessible et intuitive. L'utilisation correcte du <button> contribue à une meilleure accessibilité et, par conséquent, à une amélioration du SEO.

Par défaut, un bouton soumettra un formulaire si il est présent dans un balisage <form> , mais cela peut être contrôlé avec l'attribut type . Il possède des attributs importants comme type , qui spécifie le type de bouton (par exemple, submit , button , reset ); disabled , qui désactive le bouton et l'empêche d'être cliqué; et les attributs aria- , qui permettent d'ajouter des informations sémantiques pour améliorer l'accessibilité, notamment pour les utilisateurs de lecteurs d'écran. Ces attributs sont essentiels pour une optimisation SEO efficace.

• Attribut type="submit" : Indique que le bouton est utilisé pour la soumission d'un formulaire.
• Attribut disabled : Permet de désactiver temporairement un bouton, par exemple, en attendant que les champs obligatoires soient remplis.
• Attributs aria- : Offrent une description sémantique pour les lecteurs d'écran, améliorant l'accessibilité pour les utilisateurs malvoyants et contribuant à un meilleur positionnement SEO.

<a> : l'élément pour la navigation

L'élément <a> , ou lien hypertexte, est utilisé pour naviguer vers une autre page ou ressource, que ce soit à l'intérieur ou à l'extérieur du site web courant. Sa fonction première est la navigation, et il est donc utilisé pour créer des liens vers d'autres sections du site ou vers des sites externes. L'attribut essentiel de l'élément <a> est href , qui spécifie l'URL de la destination du lien. Un bon usage de la balise <a> et de l'attribut href est primordial pour l'optimisation SEO et l'expérience utilisateur.

En plus de l'attribut href , l'élément <a> possède d'autres attributs importants, tels que target , qui spécifie où ouvrir le lien (par exemple, dans un nouvel onglet ou la même fenêtre); rel , qui définit la relation entre la page courante et la page liée (par exemple, , ); et encore une fois, les attributs aria-* pour l'accessibilité, qui permettent de fournir des informations supplémentaires aux technologies d'assistance. L'utilisation correcte de ces attributs améliore la navigation et l'accessibilité, contribuant à un meilleur référencement SEO.

• Attribut href : Indique l'URL de destination du lien, essentiel pour la navigation et le SEO.
• Attribut target : Spécifie la fenêtre cible pour l'ouverture du lien, permettant de contrôler le comportement de la navigation.
• Attribut rel : Définit la relation entre le document courant et la ressource liée, important pour indiquer aux moteurs de recherche comment interpréter le lien.

En 2023, les sites web utilisant correctement les balises <button> et <a> ont constaté une amélioration de 18% de leur taux de rebond, soulignant l'importance de l'optimisation SEO et de l'accessibilité. De plus, 65% des utilisateurs abandonnent un site web en raison d'une mauvaise expérience utilisateur, ce qui met en évidence la nécessité de bien choisir les éléments HTML pour les CTA.

Le piège du style : pourquoi on utilise <button> comme <a> et vice-versa (et l'impact SEO)

L'utilisation incorrecte de <button> et <a> , en particulier pour les CTA, est une pratique malheureusement courante, et ce malgré les conséquences sur l'accessibilité et l'optimisation SEO. Elle découle souvent de la simplicité qu'offre le style CSS pour modifier l'apparence de ces éléments. Un lien peut facilement être stylisé pour ressembler à un bouton, et inversement, un bouton peut être modifié pour avoir l'apparence d'un lien. Cependant, cette facilité apparente masque des conséquences importantes pour l'accessibilité, l'expérience utilisateur, et le référencement naturel (SEO) de votre site web.

Cette pratique est souvent encouragée, même involontairement, par certains frameworks CSS qui facilitent le style des liens en boutons, sans pour autant garantir une accessibilité optimale. Par ailleurs, un manque de compréhension de la sémantique HTML et de ses implications en termes d'accessibilité peut également conduire à ces erreurs. Le développeur se concentre sur l'apparence visuelle sans tenir compte du rôle sémantique de l'élément et de son impact sur les utilisateurs de technologies d'assistance, ainsi que sur la capacité des moteurs de recherche à comprendre la structure et le contenu de la page. L'optimisation SEO passe par une compréhension et un respect de la sémantique HTML.

• Simplicité de mise en forme CSS: La flexibilité du CSS permet de modifier l'apparence des éléments HTML sans tenir compte de leur rôle sémantique.
• Habitudes de développement: Certains développeurs ont pris l'habitude d'utiliser un seul type d'élément pour tous les CTA, sans considérer les implications pour l'accessibilité et le SEO.
• Frameworks CSS facilitant le style: Certains frameworks CSS encouragent l'utilisation de liens stylisés comme des boutons, ce qui peut nuire à l'accessibilité si cela n'est pas fait correctement.
• Manque de conscience de la sémantique HTML: Une compréhension superficielle du rôle sémantique des éléments HTML peut conduire à des erreurs d'implémentation et à une mauvaise optimisation SEO.

Les conséquences négatives sur l'accessibilité sont multiples. Un lecteur d'écran annoncera un lien stylisé comme un bouton comme étant un lien, ce qui peut induire l'utilisateur en erreur et rendre la navigation difficile. De plus, si le focus visible n'est pas correctement géré, la navigation au clavier peut devenir confuse et difficile, rendant l'interaction avec le site impossible pour les personnes qui ne peuvent pas utiliser une souris. Enfin, la perte de sémantique nuit à la compréhension du rôle de l'élément, rendant le site moins accessible et plus difficile à utiliser. Du point de vue de l'optimisation SEO, l'utilisation incorrecte des éléments HTML peut rendre plus difficile pour les moteurs de recherche de comprendre la structure et le contenu de la page, ce qui peut nuire à son positionnement dans les résultats de recherche. Le choix de la bonne balise HTML contribue à un meilleur référencement.

Quand utiliser <button> et quand utiliser <a> ? l'importance sémantique pour le SEO.

La clé pour une utilisation correcte de <button> et <a> réside dans la compréhension de leur rôle sémantique, et cette compréhension est cruciale pour l'optimisation SEO de votre site web. Chaque élément a une fonction spécifique, et il est crucial de choisir celui qui correspond le mieux à l'action que l'utilisateur doit effectuer. Ignorer cette distinction peut nuire à l'accessibilité, à la navigation, à l'expérience utilisateur globale et, par conséquent, à votre positionnement dans les résultats des moteurs de recherche. L'optimisation SEO et l'accessibilité vont de pair.

En règle générale, utilisez <button> pour les actions qui modifient l'état de la page courante, sans nécessairement rediriger l'utilisateur vers une nouvelle page. Ces actions peuvent inclure la soumission d'un formulaire (envoi de données vers le serveur), l'ouverture d'une fenêtre modale (affichage d'informations supplémentaires sans navigation), l'affichage ou le masquage de contenu (interactions dynamiques sur la page), ou l'ajout d'un élément au panier sans redirection immédiate (gestion du panier d'achat). En résumé, toute action qui est gérée par JavaScript et qui ne provoque pas de navigation doit être associée à un bouton. L'utilisation sémantiquement correcte du <button> aide les moteurs de recherche à comprendre l'objectif de l'action, ce qui contribue à une meilleure optimisation SEO.

• Soumission de formulaire: Envoi des données saisies par l'utilisateur vers le serveur.
• Ouverture de modal: Affichage d'une fenêtre superposée pour présenter des informations supplémentaires ou demander une action à l'utilisateur.
• Affichage/Masquage de contenu: Modification dynamique du contenu de la page sans rechargement.
• Ajout au panier (sans redirection): Mise à jour du panier d'achat sans navigation vers une autre page.

À l'inverse, utilisez <a> pour les liens qui mènent à une autre page ou section du site. Cela inclut les liens vers la page "Contact" (navigation vers une page de contact), les liens vers des produits (navigation vers une page de détail du produit), les liens vers une ancre sur la même page (navigation interne à la page), et les liens de téléchargement (téléchargement d'un fichier). En d'autres termes, tout élément qui provoque une navigation vers une nouvelle URL, que ce soit à l'intérieur ou à l'extérieur du site, doit être implémenté avec un lien. L'utilisation appropriée de la balise <a> et de ses attributs (comme `href` et `rel`) permet aux moteurs de recherche de comprendre la structure de votre site et de suivre les liens vers d'autres pages, ce qui est essentiel pour l'optimisation SEO.

• Lien vers la page "Contact": Permet aux utilisateurs de contacter l'entreprise ou l'organisation.
• Lien vers un produit: Dirige l'utilisateur vers la page de détail d'un produit spécifique.
• Lien vers une ancre: Facilite la navigation interne au sein d'une même page.
• Lien de téléchargement: Permet aux utilisateurs de télécharger des fichiers, tels que des documents ou des images.

Selon une étude récente, 82% des développeurs web affirment que l'accessibilité est un facteur important dans leurs projets, mais seulement 54% intègrent des pratiques d'accessibilité dès le début de la conception. Il y a donc une marge de progression significative pour améliorer l'accessibilité des sites web. Par ailleurs, l'utilisation correcte des balises HTML <button> et <a> peut améliorer la vitesse de chargement d'une page de 5%, ce qui a un impact positif sur l'optimisation SEO. L'accessibilité est donc synonyme de performance.

Améliorer l'accessibilité d'un lien stylé comme un bouton (problèmes et solutions pour le SEO)

Dans certaines situations, il peut être nécessaire de styliser un lien <a> pour qu'il ressemble visuellement à un bouton. Par exemple, un site web pourrait utiliser un style de bouton uniforme pour tous les CTA, y compris ceux qui mènent vers d'autres pages. Dans ce cas, il est crucial de prendre des mesures pour améliorer l'accessibilité du lien et s'assurer qu'il est correctement interprété par les technologies d'assistance, ainsi que par les moteurs de recherche pour une optimisation SEO adéquate. L'accessibilité et le SEO sont deux aspects interdépendants de la conception web.

Plusieurs problèmes d'accessibilité peuvent survenir lorsqu'un lien est utilisé comme un bouton. Premièrement, il manque de la sémantique propre à l'élément button , ce qui rend difficile pour les lecteurs d'écran de comprendre sa fonction. Deuxièmement, il ne prend pas en charge le focus au clavier par défaut, ce qui rend la navigation impossible pour les personnes qui ne peuvent pas utiliser une souris. Troisièmement, il est annoncé incorrectement par les lecteurs d'écran comme étant un lien, et non un bouton, ce qui crée une confusion pour l'utilisateur. Enfin, il n'intègre pas nativement un état disabled , ce qui limite les possibilités d'interaction. Tous ces problèmes ont un impact négatif sur l'expérience utilisateur et, indirectement, sur le référencement SEO.

• Absence de sémantique button : Les lecteurs d'écran ne comprennent pas la fonction de l'élément.
• Manque de focus clavier par défaut: La navigation au clavier est impossible.
• Annonce incorrecte par les lecteurs d'écran: L'utilisateur est induit en erreur.
• Absence d'état disabled : Les possibilités d'interaction sont limitées.

Pour résoudre ces problèmes et améliorer l'accessibilité du lien stylisé comme un bouton, plusieurs solutions peuvent être mises en œuvre. L'ajout de l'attribut role="button" indique au lecteur d'écran que l'élément doit être interprété comme un bouton. L'attribut tabindex="0" permet de rendre l'élément focusable au clavier. Des événements clavier doivent être écoutés pour déclencher l'action du bouton lorsque l'utilisateur appuie sur les touches "Entrée" ou "Espace". Enfin, l'attribut aria-disabled="true" peut être utilisé pour indiquer que le lien est désactivé. Ces corrections contribuent à améliorer l'expérience utilisateur et l'accessibilité, ce qui peut indirectement améliorer le positionnement SEO du site. Un site accessible est un site performant.

L'année 2023 a vu une augmentation de 15% des plaintes liées à l'accessibilité web en France, démontrant l'importance croissante de ce sujet et la nécessité d'adopter des pratiques de développement web accessibles. Par ailleurs, 75% des utilisateurs de lecteurs d'écran rencontrent des difficultés de navigation sur les sites web non optimisés pour l'accessibilité, ce qui souligne l'importance de tester l'accessibilité des sites web. Les sites web accessibles ont un taux de conversion supérieur de 20% à ceux qui ne le sont pas.

Exemples concrets et code (accessibilité et optimisation SEO)

Pour illustrer les concepts précédents, voici quelques exemples concrets de code HTML, avec et sans corrections d'accessibilité, ainsi que des considérations pour l'optimisation SEO.

Exemple 1 : lien qui ouvre une modal (à éviter, mais corrigé pour l'accessibilité et le SEO).

Code HTML initial (problématique):

<a href="#" class="button" id="open-modal">Ouvrir la modal</a>

Code HTML corrigé (avec accessibilité):

<a href="#" class="button" id="open-modal" role="button" tabindex="0" aria-label="Ouvrir la modal">Ouvrir la modal</a>

Dans cet exemple, l'attribut role="button" indique au lecteur d'écran que l'élément est un bouton, l'attribut tabindex="0" le rend focusable au clavier, et l'attribut aria-label fournit une description textuelle pour les lecteurs d'écran. Pour l'optimisation SEO, il est important de s'assurer que le texte du lien ("Ouvrir la modal") est pertinent et contient des mots-clés recherchés par les utilisateurs.

Exemple 2 : bouton qui redirige vers une autre page (à éviter, mais corrigé pour le SEO).

Code HTML initial (problématique):

<button class="link-button" onclick="window.location.href='/contact'">Contactez-nous</button>

Code HTML corrigé (solution préférentielle - meilleur SEO):

<a href="/contact" class="link-button">Contactez-nous</a>

Dans ce cas, la meilleure solution consiste à utiliser directement l'élément <a> , car l'action principale est une redirection vers une autre page. L'élément <button> est donc inapproprié. Pour l'optimisation SEO, il est essentiel d'utiliser des mots-clés pertinents dans le texte du lien ("Contactez-nous") et dans l'attribut `href` ("/contact").

Exemple 3 : bouton désactivé (état disabled avec un <a> et impact SEO)

Code HTML initial:

<a href="#" class="button disabled">Continuer (indisponible)</a>

Code HTML corrigé:

<a href="#" class="button disabled" role="button" aria-disabled="true">Continuer (indisponible)</a>

L'attribut aria-disabled="true" indique aux lecteurs d'écran que le lien est désactivé. Il est également nécessaire d'ajouter du code JavaScript pour empêcher le lien d'être cliqué lorsque cet attribut est présent. Pour l'optimisation SEO, il est important de s'assurer que le texte du lien ("Continuer (indisponible)") est clair et informatif. L'état désactivé peut également être utilisé pour signaler aux moteurs de recherche que la page n'est pas encore disponible.

Tests d'accessibilité : vérifier votre implémentation (et optimiser le SEO)

Une fois les corrections d'accessibilité mises en œuvre, il est crucial de tester l'implémentation pour s'assurer qu'elle fonctionne correctement avec les technologies d'assistance. Les tests d'accessibilité permettent de valider que le site est accessible à tous les utilisateurs, y compris ceux qui utilisent des lecteurs d'écran ou qui naviguent au clavier. Un site accessible est un site bien positionné dans les résultats des moteurs de recherche. L'accessibilité améliore votre SEO.

Environ 3,7 millions de personnes en France sont atteintes d'un handicap visuel, soulignant la nécessité d'adopter des pratiques de développement web accessibles. De plus, 15% de la population mondiale est atteinte d'une forme de handicap, ce qui représente un marché potentiel important pour les entreprises qui investissent dans l'accessibilité. La France compte plus de 12 millions de personnes handicapées, représentant 20% de la population totale.

Outils de test (pour l'accessibilité et le SEO)

Plusieurs outils peuvent être utilisés pour tester l'accessibilité d'un site web, ainsi que son optimisation SEO. Les navigateurs modernes offrent des outils de développement qui permettent d'inspecter le code HTML et de vérifier les attributs ARIA. Des extensions de navigateur comme Lighthouse, WAVE et axe DevTools peuvent également être utilisées pour détecter les problèmes d'accessibilité. Enfin, il est essentiel de tester le site avec des lecteurs d'écran comme NVDA, VoiceOver et JAWS. Des outils d'analyse SEO comme Google Search Console et SEMrush peuvent être utilisés pour identifier les problèmes d'optimisation et suivre les performances du site dans les résultats de recherche.

• Lighthouse (Google Chrome): Un outil d'audit web qui permet de mesurer la performance, l'accessibilité, les bonnes pratiques et le SEO d'une page web.
• WAVE (Web Accessibility Evaluation Tool): Une extension de navigateur qui permet d'identifier les problèmes d'accessibilité d'une page web.
• axe DevTools: Un outil de test d'accessibilité automatisé qui peut être intégré dans le processus de développement.

Points de contrôle importants (accessibilité et performance SEO)

Lors des tests d'accessibilité, plusieurs points de contrôle doivent être vérifiés. Il faut s'assurer que le lecteur d'écran annonce correctement l'élément (bouton ou lien), que le focus est visible au clavier, que les événements clavier fonctionnent comme prévu, et que l'état disabled est correctement géré. Pour l'optimisation SEO, il est important de vérifier que le site est mobile-friendly, que les balises title et meta description sont optimisées, que la vitesse de chargement est rapide, et que le contenu est pertinent et de qualité. Un site accessible et bien optimisé pour le SEO est un site performant.

En moyenne, un développeur passe 20 heures par mois à corriger les problèmes d'accessibilité, ce qui représente un coût important pour les entreprises. Les entreprises qui investissent dans l'accessibilité web voient une augmentation de 10% de leur taux de conversion et une amélioration de leur image de marque. Investir dans l'accessibilité est un atout marketing.

Adopter une approche proactive en matière d'accessibilité web peut réduire les coûts de maintenance à long terme de 30% et améliorer la satisfaction des utilisateurs. Un site web accessible est un site web durable.

L'intégration de pratiques d'accessibilité dès la conception d'un site web permet de diminuer le temps de développement de 15% et de réduire le risque de litiges liés à la discrimination. L'accessibilité est donc une question de responsabilité et de rentabilité. La non conformité à la réglementation sur l'accessibilité peut entrainer une amende allant jusqu'à 50 000 euros.