C’est concevoir des liens, boutons et autres zones interactives pour qu’ils soient facilement repérables, clairs, compréhensibles et utilisables.
L’objectif est de permettre aux utilisateurices, quel que soit son moyen d’interaction (souris, clavier, écran tactile, commande vocale, lecteur d’écran…), de savoir ce que fait l’élément, de le trouver et d’interagir avec sans difficulté.
Un élément interactif invisible, trop petit ou mal étiqueté est inutilisable et peut rapidement frustrer les utilisateurices, entraînant fausses manipulations, erreurs et même des départs intempestifs de ton site. Un lien ou bouton doit être un repère clair de navigation, pas une devinette ou un piège.
Pour garantir la facilité d’interaction, commence par rendre tes zones cliquables suffisamment grandes. Vise une taille de cible d’au moins 44×44 px, et évite les éléments minuscules comme des liens ou icônes trop petites.
Utilise toujours les éléments HTML sémantiques natifs adéquats : un lien doit être un <a href=""> et un bouton un <button>, et non des div stylisées.
Assure-toi que tous ces éléments interactifs sont atteignables avec la touche Tab et que leur focus clavier soit clairement visible (par un contour, une ombre ou un changement de couleur). Rends le texte de tes liens et boutons explicite, précisant l’action qu’ils déclenchent.
Le texte seul doit être compréhensible même hors de son contexte, évitant les « Cliquez ici » ou « En savoir plus ». Pour les cas où le texte seul d’un lien ou bouton n’est pas suffisant, utilise des attributs comme aria-label pour préciser la destination ou la fonction, notamment pour les technologies d’assistance.
Enfin, évite les zones de clic trop ambiguës, comme rendre une image ou une carte entière cliquable sans indication visuelle claire de l’action spécifique.
N°1.
N°2.
N°3.
N°4.
N°5.
