L’accessibilité numérique : une composante essentielle pour un site WordPress de qualité

L’accessibilité numérique permet aux personnes en situation de handicap d’utiliser votre site WordPress comme tout le monde, sans blocage, sans perte d’information et en utilisant tous les services que vous mettez à la disposition des internautes.

D’après l’organisme commun des institutions de rente et de prévoyance (ocirp), 20 % de la population en France est touchée par le handicap. D’après les statistiques publiées par w3techs, au mois d’octobre 2017, 29% des sites web sur Internet basés sur un gestionnaire de contenu ont été réalisés avec la plateforme WordPress.

WordPress est très présent sur le Net et pour obtenir un site de qualité qui répond aux attentes de tous les utilisateurs, l’accessibilité numérique doit être intégrée dans votre processus de création de site WordPress, au même titre que l’ergonomie, l’architecture du contenu, le référencement naturel, la sécurité, la performance…

Comme nous l’explique Thierry Pigot dans son article «WordPress, ce n’est pas que pour du blog », WordPress est utilisé dans les secteurs de l’hôtellerie et de la gastronomie, pour les cours en ligne, par des grandes marques, pour récolter des dons, pour des sites de e-commerce et pour des sites d’informations… Autant de sites pouvant être consultés par des internautes en situation de handicap qui ont les mêmes besoins que tout autre utilisateur, et qui sont de gros clients des sites de e-commerce, solution très pratique pour faire ses achats lorsque les déplacements physiques sont difficiles.

Beaucoup de préjugés persistent autour de l’accessibilité : ça coûte cher, un site accessible est moche, ce n’est pas ma cible. Comme nous le montre Thomas Villain lors de sa conférence « Un design accessible » présenté au WordCamp Marseille, un site ayant un bon niveau d’accessibilité peut également être agréable à regarder et à utiliser. L’accessibilité a un coût comme peut l’avoir le référencement, la sécurité, la qualité… Tout dépend du niveau que vous souhaitez atteindre mais le niveau permettant de lever les blocages et de permettre à tous d’accéder à l’information et aux services doit faire partie de votre prestation de base comme pour les autres composantes de votre site WordPress.

Après cette introduction, attardons-nous sur les usages et découvrons ensemble quels sont les internautes concernés par l’accessibilité, leurs problèmes rencontrés lorsqu’un site WordPress n’a pas pris en compte l’accessibilité ?

Les internautes concernés par l’accessibilité

L’accessibilité numérique s’adresse aux personnes malvoyantes, aux daltoniens, aux aveugles, aux malentendants, aux sourds, au handicap moteur, aux personnes dyslexiques, au handicap mental mais aussi aux séniors.

Il ne s’agit pas de créer un site pour chaque type de handicap, voué à l’échec car une version alternative de votre site ne sera jamais mise à jour aussi fréquemment que la version officielle. Il s’agit de rendre compatible votre site WordPress avec les matériels et logiciels que les personnes en situation de handicap utilisent en plus de leur navigateur sur leur poste de travail.

Quels sont ses outils d’assistance, ces usages à prendre en considération et comment y répondre?

Les usages à prendre en compte

Lecteur d’écran

Un lecteur d’écran est un logiciel utilisé par les personnes aveugles et très malvoyantes, qui permet de vocaliser le contenu de votre site grâce à une synthèse vocale ou bien transmettre ce contenu à un afficheur braille. Cette aide technique se base sur votre code HTML qui doit alors suivre des règles pour assurer la compatibilité. Elle possède des fonctionnalités avancées pour se déplacer de titre en titre, de région en région, de liste en liste, d’obtenir la liste des liens d’une page, encore faut-il avoir intégré ces éléments correctement dans vos pages web. Par exemple, lorsqu’un utilisateur de lecteur d’écran rencontre un lien ou un bouton qui n’a pas d’intitulé, il ne comprend pas son utilité, il entend « lien ». Pour connaître sa nature, il doit l’activer mais est-ce bien raisonnable de naviguer ou de déclencher une action au hasard !

Prenons l’exemple d’un site de e-commerce proposant plusieurs moyens de paiement. Voici un exemple de lien sans signification :

Voici le code de ce lien vide :

Pour améliorer l’accessibilité de ce code, la solution est de rajouter un texte caché mais vocalisé par les lecteurs d’écran, en utilisant la classe CSS « screen-reader-text » présente dans le code généré par WordPress et dans les thèmes livrés par défaut comme « twentyseventeen ». Pour intégrer cette classe dans la feuille de style de votre thème WordPress, vous trouverez le code de la classe CSS « screen-reader-text » sur le site make WordPress Core.

Voici le code corrigé :

 

Les utilisateurs de lecteur d’écran ont la possibilité d’extraire les titres et d’obtenir ainsi l’équivalent de la table des matières de la page consultée. C’est pourquoi, la hiérarchie des titres doit être correcte d’un point de vue sémantique et sans rupture.

Loupe d’écran

La loupe d’écran est un logiciel qui permet de grossir le contenu d’une page web, bien plus que le zoom page standard des navigateurs. La loupe d’écran oblige les utilisateurs à balayer de gauche à droite, de haut en bas, pour pouvoir lire le contenu des pages, un peu comme si vous consultiez un site web non responsive sur votre smartphone. Par exemple, une étiquette de formulaire qui serait affichée à gauche de son champ et qui serait trop éloignée visuellement poserait des problèmes à l’utilisateur d’une loupe d’écran pour remplir correctement le formulaire.

Mode contraste élevé

L’usage du mode contraste élevé de Windows ou de Mac permet de modifier la couleur de fond lorsque le blanc est trop éblouissant, rendant impossible la lecture du texte, de changer la couleur du texte, la taille et la police des caractères. Chaque utilisateur a alors la possibilité de configurer son poste de travail pour l’adapter à sa propre vision, via le panneau de configuration. Mais attention, les images en background CSS ne sont pas affichées. Il faut donc réserver ces images pour de la décoration.

Navigation au clavier

Pour un internaute voyant ne pouvant pas se servir d’une souris (tremblement, usage difficile des membres supérieurs…),  pour un internaute malvoyant ne pouvant plus distinguer le pointeur de souris, la navigation au clavier devient le seul moyen d’utiliser votre site web. L’internaute se sert alors de la touche TAB et SHIFT TAB pour accéder aux liens, aux boutons, aux éléments de formulaire, à tous les éléments qui reçoivent le focus clavier. Pour cela, la visibilité du focus clavier ne doit pas être supprimée ou altérée pour que la navigation au clavier soit possible. Tous les navigateurs ont prévu cette visibilité dans leur feuille de style, avec la propriété outline. Mais cette visibilité est souvent supprimée, rendant la navigation au clavier impossible.

De même, pour diminuer le nombre d’appuis sur la touche TAB, des liens d’accès rapide ou d’évitement doivent être intégrés en début du code, par exemple pour accéder directement au contenu principal de la page et sauter ainsi les menus de navigation. Ces liens peuvent être cachés mais apparaissent à la navigation au clavier.

Modification de la taille des caractères

Certains internautes ont besoin d’augmenter ou de diminuer uniquement la taille des caractères sans perte d’information. À ce titre, l’usage des pixels sur la propriété font-size en CSS ne permet pas à tous les navigateurs de changer la taille des caractères. De même, fixer la hauteur de ligne avec une unité non relative rendra illisible le texte agrandi, l’interlignage n’étant pas calculé en fonction de la taille des caractères.

Les problèmes de lecture

L’alignement à gauche et à droite de vos textes sur le web est actuellement mal géré et peut provoquer des espaces irréguliers entre les mots, rendant par exemple la lecture difficile pour les personnes dyslexiques. L’éditeur WordPress de rédaction de contenu ne propose plus par défaut la possibilité de justifier le texte. Il est préférable d’opter systématiquement pour l’alignement à gauche.

Pour aider les personnes dyslexiques et pour compenser les mauvais choix des sites web, la société Orange propose en Open Source l’extension « Confort + », à installer sur Firefox, Chrome, Internet Explorer. Elle propose notamment la possibilité d’aligner le texte à gauche.

L’information par la couleur

Pour les daltoniens qui représentent 8% de la population masculine et moi de 1% de la population féminine, il s’agit de « ne pas fournir l’information que par la couleur ». Par exemple, dans le résultat d’un quiz, d’un QCM, vous indiquez en rouge les mauvaises réponses et en vert les bonnes réponses. Les daltoniens qui ne distinguent pas ces deux couleurs ne pourront pas prendre connaissance de leurs résultats. Mais si par exemple, en plus de la couleur vous rajoutez le symbole « V » pour valide et la « croix » pour indiquer une erreur, les résultats seront alors accessibles.

Le besoin d’alternatives

C’est aussi fournir des sous-titres aux vidéos, des transcriptions textuelles aux vidéos et à l’audio.

C’est fournir des alternatives textuelles aux images en décrivant leur contenu si l’information véhiculée par cette image n’est pas présente dans le reste du contenu. C’est décrire textuellement une image complexe avec du texte, une infographie.

C’est prévoir un mode « contraste amélioré », si la charte graphique propose un contraste insuffisant entre la couleur du texte et la couleur du fond, ne pouvant pas être modifié.

L’accessibilité dans un projet WordPress

L’accessibilité est une thématique transversale qui concerne tous les intervenants d’un projet WordPress : les webdesigners, les intégrateurs, les développeurs, les rédacteurs de contenus.

Il existe des plugins WordPress dédiés à l’accessibilité. Par exemple, WP Accessibility permet l’installation de liens d’accès rapide pour aller directement au contenu principal de la page, à la navigation au clavier. C’est un bon début mais ça ne suffit pas pour rendre un site accessible.

Le Web a besoin de plus d’accessibilité, les sites WordPress par conséquent. Alors allez-y, formez-vous, mettez en œuvre l’accessibilité, faites des projets pilotes, développer vos thèmes starters où l’accessibilité sera prise en compte. Faites-vous aider par des spécialistes qui vous permettrons de vous approprier les bonnes pratiques. Intégrez un référent accessibilité dans vos projets.

Pour aller plus loin

• WordCamp Paris 2015 « Pourquoi et comment améliorer l’accessibilité des sites WordPress »
• WordCamp Paris 2016 « Tester le niveau d’accessibilité d’un thème WordPress»
• Podcast VeryFrenchTrip sur l’accessibilité numérique
• WP Paris, Meetups parisiens, atelier « Accessibilité dans WordPress »