Catégories
Nouvelles

L’accessibilité : Pourquoi ne pas tout cacher en CSS ?

Après quelques années dans le domaine du développement de sites WordPress, j’en ai vu de toutes les couleurs. Si on calcule toutes les dizaines de recherches que j’ai effectué sur internet durant les 5 dernières années dans le but de trouver une réponse à mes questions, je dirais que j’ai probablement dépassé les millions de recherches dans le cadre de mon travail.

Ça fait beaucoup, et pourtant, la réponse la plus commune pour la plupart des problèmes d’affichage est celle-ci : « met un display:none; sur l’élément X dans Apparence > Customize dans ton panneau d’administration WordPress ».

Pourquoi est-ce que je critique cette méthode vous vous demandez ? Parce qu’en terme de développement web, cela ne fait absolument aucun sens de cacher, en CSS, tous les éléments qu’on ne voudrait pas afficher.

Laissez-moi vous présenter les différents contextes qui sont affectés par cette méthode, lorsqu’on en abuse.

1. La sémantique

Le World Wide Web Consortium (W3C) a mis des standards en place, dans le but de respecter une certaine façon de travailler, qui permet à tous et chacun de pouvoir utiliser le web à sa guise.

2. L’expérience utilisateur

Vous, comme bien des gens, ne vous rendez probablement pas compte de tout l’impact que cela peut avoir sur l’expérience utilisateur. L’expérience utilisateur ne se vit pas simplement sur votre ordinateur, votre tablette électronique ou bien votre téléphone mobile. L’expérience utilisateur, pour une personne ayant un handicap physique ou mental, temporaire ou permanent, est bien différente de la vôtre.

Si on cache tous les éléments qu’on ne trouve pas pertinent avec une simple ligne de feuille de style (CSS), un usager aveugle navigant à l’aide d’un appareil d’assistance sera tout de même en mesure de voir (d’une certaine façon) l’élément en question qui a été caché. Il ne faut pas prendre pour acquis qu’un élément non visible de votre œil ne sera pas visible et navigable.

3. L’indexation (SEO)

De plus, bien que l’élément soit caché en CSS, les moteurs de recherche vont tout de même lire cet élément et vous pénaliser puisque l’élément n’a aucune pertinence et est caché. Le truc c’est que le CSS est chargé après le HTML. Si l’élément est toujours dans le HTML, c’est certain qu’il s’affiche sur la page et qu’il est indexé. Donc pourquoi cacher un élément qui sera visible de toute façon par les moteurs de recherche ?

4. La performance

Quand on pense accessibilité, la première chose qui nous vient en tête n’est pas la performance. Et pourtant, si votre site prend plusieurs secondes à charger chacune des pages, on ne peut pas dire qu’il est très accessible. Imaginez si un utilisateur avec une connexion internet lente navigue votre site, son expérience en sera grandement affectée.

C’est pour cette raison qu’il est préférable de retirer, complètement du code, l’élément non utilisé plutôt que le cacher en CSS. En cumulant trop d’éléments cachés de cette façon, cela ne fait que continuer, sans cesse, d’affecter négativement la performance.

Faire les choses de la bonne façon

L’idée derrière tout ça, c’est de vous amener à faire une réflexion sur le fait de bien faire les choses. Plutôt que de répondre sans cesse, dans les forums et les groupes de discussion de cacher un élément en CSS, posez-vous les questions suivantes :

– Est-ce la seule solution ou peut-on éviter de le faire en CSS ?
– Peut-on modifier le fichier PHP et retirer définitivement l’élément en question ?
– Existe-t-il un Hook pour retirer cet élément ?
– Y a-t-il une configuration dans les options de votre thème qui offre la possibilité de cacher cet élément ?
– Avez-vous réellement les compétences nécessaires pour prendre la meilleure décision et en comprendre les implications ?

Si tout ce qui a été expliqué plus haut dépasse votre champ de connaissances, il n’est pas recommandé de simplement cacher votre élément en CSS parce que quelqu’un, dans un forum de discussion, vous a dit de le faire. Si vous ne comprenez pas réellement l’impact de ce que vous êtes en train de faire, demandez les conseils d’un expert en accessibilité.

La conclusion

J’aimerais développer mon opinion concernant le point le plus important de cet article : « La compréhension de ce que vous faites ». Le web et même juste WordPress, n’est pas quelque chose qui s’apprend facilement et rapidement. Cela prend du temps et beaucoup de patience. Si vous n’avez pas les compétences requises pour comprendre ce que vous faites, ne le faites pas. La meilleure solution reste toujours d’engager quelqu’un de compétent pour le faire à votre place. Certaines personnes pensent que parce qu’ils sont en mesure de faire quelque chose, qu’ils sont forcément expert en la matière. Je sais comment changer l’huile de mon moteur et comment changer mes pneus, et pourtant, je ne m’improvise pas mécanicien pour autant. J’engage plutôt un mécanicien pour faire tout l’entretien à ma place. Pour un site web, c’est la même chose. Cela ne devrait pas être le travail du président de l’entreprise de monter son site, celui-ci devrait faire affaire avec un développeur web compétant.

Par Nicolas Johnson

Nicolas a débuté sa carrière en tant qu'intégrateur web dans une agence web sur la Rive-Nord où il a appris à toucher un peu à tout, principalement au CMS WordPress. Avec les années, il en a fait une spécialisation, travaillant sur des sites de petite et grande envergure. Il a suivi plusieurs formations en accessibilité et s'assurer de transmettre son savoir à ses collègues suite à chaque découverte. Nicolas s'implique régulièrement dans la communauté WordPress Montréal, puisqu'aider les gens est ce qu'il apprécie le plus de son travail.