Vous voyez peut-être l’accessibilité web comme une liste de contraintes (limiter les animations sympas et les effets de navigation), mais personnellement, elle m’évite de partir d’une page blanche. Quand je fais quelque chose de créatif, j’ai besoin d’instructions ou de limites pour avoir un cadre dans lequel travailler. Pourquoi ne pas considérer les recommandations d’accessibilité de la même façon ? Elles intègrent l’accessibilité dans votre design dès le départ. Dans cet article, je veux partager quelques bonnes pratiques d’accessibilité, rapides à mettre en place, et qui améliore aussi le référencement de votre site sur des moteurs de recherche comme Google ou Bing – c’est-à-dire à votre SEO (Search Engine Optimisation).
Une bonne structure de titres clarifie le contenu
La structure des titres est probablement l’un des éléments les plus importants à soigner – pas seulement pour l’accessibilité, mais pour votre site en général, l’expérience utilisateur (UX) et son SEO. Elle aide les visiteur·euses qui utilisent un lecteur d’écran à mieux naviguer sur votre site, à passer d’une section à l’autre, à comprendre comment le contenu s’articule. Et vous savez quoi ? Elle aide tout le monde. Les titres et sous-titres créent de l’ordre et une structure logique – pour les vrais utilisateur·rices, mais aussi pour les robots d’indexation (ces bots qui scannent vos pages pour décider si elles doivent apparaître sur Google).
Mais qu’est-ce qu’une bonne structure ? Commencez par un titre 1 (avec la balise HTML H1) pour le titre principal de votre page (il ne devrait y en avoir qu’un seul par page). Utilisez ensuite un titre 2 (H2) pour les titres de section, et un titre 3 pour tout ce qui est imbriqué en dessous. Ça peut sembler d’une simplicité excessive, mais même si vous êtes tenté·e de choisir un H4 plutôt qu’un H2 parce que c’est visuellement plus joli, ne le faites pas. Vraiment, ne le faites pas. Les robots d’indexation ne sont pas humains. Ils ont besoin d’une structure logique pour comprendre comment le contenu de votre page est organisé, et comment les sections sont liées entre elles. Le style n’est pas une raison suffisante pour casser votre hiérarchie de titres.
Le texte alternatif, pas que pour les lecteurs d’écran
Le texte alternatif (« alt text ») est la description que vous attachez à une image de votre site. Elle décrit l’image pour les personnes qui ne peuvent pas la voir. Cela semble concerner un très faible pourcentage de vos visiteur·euses, non ? En fait, pas vraiment. Si les images ne se chargent pas correctement, le texte alternatif apparaît à leur place, ce qui permet à vos visiteur·euses de comprendre malgré tout de quoi parlait l’image manquante. Le texte alternatif aide aussi les robots d’indexation à comprendre ce qui se trouve sur votre site, puisqu’ils ne peuvent pas « lire » les images comme le font les humains.
Les images purement décoratives devraient avoir un attribut alt vide (alt= » »), pour que les lecteurs d’écran les ignorent. Les images porteuses de sens (tout ce qui véhicule une information) devraient avoir un texte alternatif clair et descriptif. Un site où toutes les images importantes sont correctement décrites sera mieux compris par les robots d’indexation, et aura de meilleures chances d’apparaître dans les résultats de recherche.
Accompagnez vos icônes d’un texte
Comme pour le texte alternatif, ajouter un label court et simple à vos icônes ou pictogrammes bénéficie à tout le monde. Les icônes sont de bons repères visuels pour les visiteur·euses, elles peuvent aussi être utilisées de façon cohérente sur tout votre site, aider à créer du sens, et participer à la reconnaissance de votre marque. Mais n’oubliez pas qu’elles ne sont pas toujours universelles, et qu’une seule icône peut avoir plusieurs significations. Pensez à une roue dentée ⚙️ – souvent utilisée pour représenter les « paramètres », mais qui peut aussi vouloir dire « stratégie », « productivité », « travail d’équipe », « résolution de problèmes », voire littéralement une pièce de machine. Certains symboles deviennent aussi datés ou obsolètes – les plus jeunes ne connaissent pas forcément la signification de l’icône de disquette 💾 pour « sauvegarder », ni pourquoi le symbole d’appel a cette forme bizarre 📞.
Un label textuel enlève toute ambiguïté. L’icône devient alors décorative, et c’est très bien comme ça. Votre contenu devient plus clair, votre site plus accessible, et comme les robots d’indexation lisent le texte de façon bien plus fiable que les icônes ou les images, vous leur donnez davantage de contenu utile à exploiter.
Les animations : une arme à double tranchant
Les animations peuvent donner de la personnalité à votre site et augmenter l’engagement de vos visiteur·euses. J’adore parcourir des sites expérimentaux ou de designers avec tous leurs effets spéciaux, c’est vraiment engageant, voire amusant. Mais je finis souvent par ne plus prêter attention au contenu lui-même.
Des animations mal conçues peuvent rendre votre site inaccessible de plusieurs façons : elles peuvent casser la mise en page, mal fonctionner sur mobile, cacher du contenu, ou ralentir la page au point que les visiteur·euses abandonnent et partent. Tout cela affecte votre SEO. La vitesse de chargement est un facteur de classement direct pour Google, et un site lent est moins bien classé. Si des animations cachent du contenu aux robots d’indexation, ce contenu risque tout simplement de ne pas être indexé du tout. Utilisez-les avec intention, et testez toujours la performance de votre site pendant qu’elles tournent.
Rédigez des libellés de liens descriptifs
C’est un point facile à négliger. Quand vous ajoutez un lien dans votre contenu, le texte que vous utilisez pour l’ancrer est important – à la fois pour l’accessibilité et pour le SEO. « Cliquez ici » ou « en savoir plus » n’indique ni à votre visiteur·euse ni à un robot ce qu’il ou elle va trouver. « Consultez notre rapport d’impact 2024 » ou « découvrez nos services » est immédiatement clair, et donne aux moteurs de recherche un contexte utile sur la page de destination.
Les personnes utilisant un lecteur d’écran naviguent souvent une page en passant d’un lien à l’autre, donc « cliquez ici » répété cinq fois est réellement déroutant. Un libellé de lien descriptif est l’une des corrections les plus simples et les plus rapides à faire – et son effet est bien réel.