Comment assurer l'accessibilité de son site web

Eh bien, sachez qu’il existe des logiciels de lecture d’écran capables de leur lire les textes affichés sur le site web, ainsi que les interactions possibles, du moment que votre site est correctement configuré. Pour désigner ce type de configuration à destination des personnes handicapées, on parle d’« accessibilité web ». Voyons ce que cela implique.  

Règles pour l’accessibilité des contenus Web (WCAG) 

Les WCAG (Web Content Accessibility Guidelines) énoncent un ensemble de normes et de recommandations élaborées par le W3C (l’organisme international de standardisation pour la création des sites web) pour vous aider à proposer des sites adaptés aux personnes handicapées. Il existe de nombreux types de handicaps : visuels, auditifs, physiques, vocaux, cognitifs, linguistiques et neurologiques, ainsi que les troubles de l’apprentissage. 

Ces handicaps apparaissent parfois avec l’âge. Lorsque les marques adaptent leur site à ces catégories de personnes, l’utilisabilité s’améliore de facto pour tous les utilisateurs. Prenons l’exemple des textes alternatifs associés aux images qui en décrivent le contenu. Ils sont utiles aux personnes qui ont recours à un logiciel de lecture d’écran, mais s’imposent aussi comme une solution très pratique dans le cas où les images ne s’affichent pas. 

Ainsi, en veillant à la bonne accessibilité de votre site, vous pourrez attirer une plus grande diversité d’utilisateurs. Et comme cette démarche peut être mise en œuvre à peu de frais (le digital étant le canal le moins onéreux pour atteindre les personnes handicapées), nous vous conseillons de l’adopter de manière systématique. De plus, l’accessibilité de votre site boostera vos performances SEO, car Google prend en compte ce paramètre dans le classement des résultats de recherche ! 

Très bien, mais concrètement, que faut-il faire pour améliorer l’accessibilité ? 

Les WCAG reposent sur 4 principes : PERCEPTIBLE, UTILISABLE, COMPRÉHENSIBLE ET ROBUSTE. Dans cet article, je vais vous présenter les facteurs à prendre en compte pour chacun de ces principes.  Avant toute chose, notez qu’en matière d’accessibilité, la perfection n’existe pas : nous déconseillons ainsi aux entreprises ou aux services de promettre un site « 100 % accessible », mais elles peuvent malgré tout prendre des mesures pour améliorer leur accessibilité.  

Accessibilité Web - Principe 1 : perceptible 

La perceptibilité, c’est le fait que les informations et les composants de l’interface utilisateur doivent être présentés aux utilisateurs d’une manière qu’ils peuvent percevoir. Lorsqu’un utilisateur s’appuie sur une technologie d’assistance pour naviguer sur un site Web (par exemple, les aveugles utilisent un logiciel de lecture d’écran pour les guider), il doit pouvoir reconnaître les composants interactifs du site (un bouton qui mène à une page de contact, par exemple). 

Tout contenu non textuel présenté à l’utilisateur doit proposer une alternative textuelle qui remplit la même fonction. Pour cela, nous pouvons utiliser différentes techniques lors de la création de notre code HTML. 

Quelques exemples : 

• Balises Aria sur les boutons, par ex. : « ce bouton envoie un e-mail » 

• Balises Alt sur les images, par ex. : « photo d’un chien » 

• Balises Name sur les champs à renseigner, par ex. : « date de naissance » 

• Utilisation des couleurs, par ex. contraste élevé pour les personnes daltoniennes. 

Accessibilité Web - Principe 2 : utilisable 

Ce principe implique que tous les composants et la navigation doivent être exploitables. Vous devez pouvoir accéder à chaque élément du contenu non seulement avec une souris, mais aussi avec un clavier, puisque certaines personnes ne peuvent pas utiliser de souris.  

Vous devez également laisser aux utilisateurs suffisamment de temps pour lire et utiliser le contenu. L’ajout d’animations mobiles ou défilantes doit être mûrement réfléchi, car elles pourraient nuire à l’utilisation du site Web. En règle générale, toute animation qui se lance automatiquement devrait :  

1. Durer plus de 5 secondes  
2. Être présentée parallèlement au contenu 
3. Pouvoir être mise en pause, arrêtée ou masquée par l’utilisateur 

En ce qui concerne les animations non indispensables, il convient également de faire preuve de prudence, car de nombreuses personnes souffrent d’épilepsie et de réactions physiques aux contenus clignotants. La grande règle à suivre est d’éviter les animations lorsqu’elles ne sont pas essentielles. Malgré tout, cela pourrait nuire considérablement au visuel de votre site Web. Pour remédier à ce problème, vous pouvez alors envisager de programmer des animations uniquement pour les appareils qui les autorisent. Par exemple, saviez-vous que dans vos feuilles de style en cascade (CSS), vous pouvez cibler les agents utilisateurs et les systèmes d’exploitation pour lesquels la fonction de mouvement réduit est activée ? Découvrez comment limiter le mouvement en CSS. 

Voici quelques conseils pour rendre vos animations accessibles : 

• Utilisez un paramètre qui permettra de désactiver toutes les animations sur l’ensemble de votre site (défilement parallaxe, animations de survol, animations de changement de page, etc.). 

• Tirez parti de la requête média CSS « reduce motion » pour désactiver les animations sur les appareils pour lesquels cette fonction est activée. 

La navigation du site web doit pouvoir se faire entièrement à l’aide d’onglets. L’ordre de mise en évidence et la visibilité sont donc de la plus haute importance ! Veillez à ce que les utilisateurs puissent accéder de manière logique à certaines parties de la navigation et qu’ils puissent savoir sur quel élément ils se trouvent. Étant donné qu’ils naviguent à l’aide d’un clavier, ils n’ont pas de curseur de souris qui leur indique leur position. Veillez également à tester vos formulaires en essayant d’y accéder et de les envoyer uniquement avec votre clavier. 

Accessibilité Web - Principe 3 : compréhensible 

Vous devez vous assurer que vous utilisez correctement les agents utilisateurs lorsqu’il s’agit de parties multilingues de votre site web. Vous pouvez définir la balise « lang » dans le code HTML pour indiquer la langue utilisée, mais vous pouvez aller beaucoup plus loin. Par exemple, si vous avez une partie du contenu dans une autre langue (une citation en allemand, mettons), il faudrait indiquer à l’agent utilisateur que cet élément est en « allemand » de sorte que les lecteurs d’écran adaptent la prononciation !  

Du côté des formulaires, pensez à prévoir des libellés corrects et des fonctions d’identification d’erreurs ou de suggestion pour bien accompagner l’utilisateur qui remplit le formulaire.  

Accessibilité Web - Principe 4 : robuste 

Ce quatrième et dernier principe suggère que votre site web soit suffisamment robuste pour être interprété par toutes sortes d’agents utilisateurs, y compris les technologies d’assistance. Vous devez disposer d’un document HTML valide et sans erreur, et votre site web doit être testé sur tous les navigateurs et appareils. Cela peut vous sembler évident et facile à faire dans l’absolu, mais bien souvent, ces tâches sont repoussées au fur et à mesure du projet par « manque de temps ». En réalité, il faudrait s’en occuper sur le moment, à chaque fois que vous finissez de traiter un ticket. De plus, chaque ticket devrait être testé séparément sur chaque navigateur et appareil.  

Pourquoi devrais-je attacher de l’importance à l’accessibilité web ? 

Si vous vous posez cette question, réfléchissez donc aux rampes d’accès dans les centres commerciaux, aux livres en braille, ou même à la langue des signes... C’est tout simplement une question de respect et de civisme. Je vous invite donc à y réfléchir sérieusement la prochaine fois que vous créerez un site web, car si vous ne le faites pas, toutes celles et ceux ayant des problèmes d’accessibilité préfèreront un site qui a prévu cette « rampe d’accès ». 

Pour vous aider à améliorer votre accessibilité, voici une checklist pratique.