Lien vs Bouton en HTML (Accessibilité web)

Sur le web, s'il existe des liens ET des boutons, c'est pour une bonne raison ! Chacun de ces éléments HTML a son propre contexte d'utilisation. Dans cet article, je vais vous expliquer :

• Pourquoi il est important de savoir quand utiliser un lien ou un bouton en HTML.
• La différence "technique" et les meilleures pratiques d'utilisation des liens et des boutons.
• Comment contourner le problème des "faux" éléments boutons si vous utilisez le CMS Webflow.

1. Pourquoi il est important de comprendre la différence ?

Si vous souhaitez mettre en place les meilleures pratiques web sur votre site internet, il y a au minimum trois bonnes raisons d'utiliser correctement la sémantique "a" vs "button" :

1.1 Amélioration de l'accessibilité:

• Amélioration de l'expérience utilisateur pour les personnes utilisant des technologies d'assistance.
• Navigation au clavier facilitée, essentielle pour les utilisateurs ne pouvant pas utiliser une souris.

1.2 Optimisation de la sémantique HTML :

• Meilleure compréhension du contenu par les moteurs de recherche, ce qui peut améliorer le référencement naturel (SEO).

1.3 Conformité aux standards web:

• Respect des standards du W3C, assurant une meilleure compatibilité avec les différents navigateurs et appareils (ordinateurs, tablettes, mobiles).

En résumé, l'utilisation correcte des éléments "a" et "button" améliore l'accessibilité de votre site internet, la qualité de votre sémantique et se conforme aux standards du web. Chez Digidop, agence webflow experte en SEO, nous sommes convaincus que le SEO est aussi une histoire de "bon sens", et donc, que l'intégration de ces bonnes pratiques sur votre site peut avoir un impact positif sur l'indexation de votre site sur les moteurs de recherche comme Google.

En savoir plus sur le SXO et comment le SEO fonctionne de façon "logique".

2. Lien vs Button : Le guide simplifié

ℹ️ Note : Je passe dans cette section les aspects "techniques" liés à l'utilisation des différents éléments (ahref, focus, ancre, etc.), qui sont généralement des fonctionnalités intégrées par défaut dans tous les CMS modernes comme Webflow, Wordpress ou Wix.

Sans rentrer dans les détails techniques, nous allons dans cette seconde partie nous concentrer sur les cas d'utilisations spécifiques à chacun des éléments et répondre à la question :

→ Quand dois-je utiliser un lien ou un bouton ?

1.1 Les Liens ("a")

Usage Principal: Les liens sont principalement utilisés pour la navigation. Ils sont destinés à diriger l'utilisateur vers une autre page ou une autre section de la page actuelle.

Bonnes pratiques (SEO & Accessibilité): Le texte du lien doit être descriptif et indiquer clairement la destination ou la fonction du lien.

1.2 Les Boutons ("button")

Usage Principal: Les boutons sont utilisés pour déclencher une action (sur la même page), comme soumettre un formulaire, ouvrir une modale, ou déclencher une fonction JavaScript.

Bonnes pratiques (Accessibilité): Le texte sur le bouton doit clairement indiquer l'action qu'il va déclencher.

⚠️ Deux spécificités liés aux boutons

• Aucun attribut href nécessaire: Les boutons n'ont pas besoin de l'attribut href.
• Utiliser "<button type="submit">Action</button>" pour les actions comme la soumission de formulaires.

1.3 [En bref] La principale distinction d'utilisation :

La principale distinction à retenir dans le cas d'utilisation des éléments "a" et "button" est comportementale :

→ Les liens déplacent vers une autre ressource tandis que les boutons déclenchent une action sur la même page.

2. Comment bien les utiliser sur Webflow ?

Si vous écrivez votre code "from scratch", vous savez donc maintenant que vous devez être vigilant dans la rédaction de votre HTML. Mais si vous utilisez des outils no-code ou low-code, comment bien utiliser la sémantique "a" et "button" ?

Plongeons dans le cas Webflow !

2.1 Le "problème" des éléments Link et Button sur Webflow

Sur Webflow, lorsque vous utilisez les éléments proposés "par défaut" par l'outil - les Link ou Button - il y a un petit problème.

Les deux éléments ont en réalité le même balisage HTML = "a" (Cf. image screen reader). Et comme vu précédemment, cela ne répond donc pas aux enjeux d'accessibilité et aux meilleures pratiques recommandées par les navigateurs en 2023.

Heureusement, il existe deux solutions pour corriger cette erreur.

2.2 [Option 1] Utiliser des attributs :

L'utilisation d'un attribut aria permet de donner une indication supplémentaire aux navigateurs à la lecture de votre code HTML. Vous pouvez donc venir "changer" le rôle d'un élément en ajoutant une nouvelle information.

Ajouter des valeurs aria de descriptions afin de définir les rôles (type) des éléments Link & Buttons est donc une solution qui fonctionne afin que les moteurs de recherche fassent bien la distinction. C'est par exemple ce que fait Webflow avec son "Button Submit" pour ses formulaires.

Bref, une option qui fonctionne... mais pas optimale. Car il est maintenant possible de le faire sans ajout de balise manuelle, ni utilisation d'attribut aria, en créant nativement un vrai bouton HTML.

En savoir plus sur les Aria Labels →

2.3 [Option 2 : Recommandée] Comment créer un "vrai" "button" sur Webflow ?

[Cette option est notre recommandation si vous souhaitez utiliser un bouton pour déclencher une action sur votre page, comme par exemple l'ouverture d'un pop-up.]

Pour créer un bouton avec les meilleures pratiques HTML "button" sur Webflow, il vous faudra utiliser une alternative aux Link & Buttons : l'élément DOM "Custom element".

Avec le Custom Element de Webflow, vous allez pouvoir, en quelques étapes, développer votre propre sémantique HTML.

→ Créer un "button" sur Webflow :

1. Ajouter un Custom Element sur votre projet.
2. Accéder à ses Settings.
3. Modifier la balise Tag de l'élément : Div → Button.

Et voilà ! 🥳

Et pour aller plus loin :

• Ajouter une classe CSS à l'élément pour lui donner le style (design) de votre choix.
• Ajouter un trigger sur votre élément pour déclencher une animation JavaScript avec ce bouton.
• Ou bien définifinez son type en suivant les recommandations W3

Conclusion

Les liens sont à utiliser pour déplacer l'utilisateurs vers un nouveau "lieux" (action de navigation) alors que les boutons servent à déclencher une action (sur la même page). Utiliser le bon élément HTML permet d'améliorer l'accessibilité globale de votre site internet.

Si vous utilisez Webflow, l'élément bouton par défaut n'a en réalité pas une sémantique HTML correcte, mais vous pouvez personnaliser le "rôle" de ce lien avec l'utilisation des attributs Aria - ou - , vous pouvez créer un bouton avec la bonne sémantique HTML grâce au custom élément (DOM element), puis personnaliser son style grâce aux classes CSS.

Bonus : Plus de ressources ?

• ‍Washington Edu article sur le sujet ↗

Pour en apprendre plus sur le webdesign et les nouveaux outils, découvrez nos ressources gratuites :

• Newsletter →
• Chaîne YouTube de Digidop ↗
• 3 cas d'utilisations pour améliorer la qualité de vos développements avec le nouveau DOM élément de Webflow → (A venir)