Accessibilité et WordPress, comment tester son thème

Publié le : 15 février 2016

Retour sur ma conférence au WordCamp Paris, par Claire Bizingre, Accesbilis.

WordCamp Paris, un événement incontournable

Les 5 et 6 février 2016 s’est tenu le WordCamp Paris, 9e édition de l’événement annuel ‎incontournable en France autour du CMS WordPress, deux jours de conférences sur WordPress avec 32 orateurs et 500 participants. C’est toujours un moment de convivialité, de partage au sein d’une communauté WordPress généreuse et bienveillante.

Mon intervention en tant qu’oratrice

J’ai eu l’honneur et le plaisir d’animer la conférence « Tester le niveau d’accessibilité d’un thème WordPress ». Une heure de conférence et de questions.

J’avais déjà animé un atelier sur l’accessibilité et WordPress en 2015. Participer à nouveau à cet événement en temps qu’oratrice, fut un vrai plaisir mais aussi un moment intense de stress, suivi d’une grande joie d’avoir reçu autant de retours positifs sur ma conférence.

L’accessibilité numérique est un sujet encore bien méconnu mais nous progressons et je ne désespère pas voir l’accessibilité intégrée dans la checklist des bonnes pratiques pour réussir son site WordPress.

Tester le niveau d’accessibilité de votre thème WordPress

Les objectifs

L’objectif de ma conférence a été de fournir les moyens de tester soi-même le niveau d’accessibilité de son thème WordPress, grâce à un ensemble d’outils et une liste de points à vérifier. Le thème peut être téléchargé gratuitement, ou bien acheté sur des plateformes de thèmes payants ou encore développé par soi-même.

Rappels des usages

J’ai commencé par rappeler les usages des internautes en situation de handicap, de la nécessité d’utiliser du matériel et des logiciels spécifiques pour leur permettre d’accéder aux sites Web. Il s’agit de lecteur d’écran, du contraste élevé, d’agrandisseur, de clavier adapté. Mais il ne faut pas oublier les internautes qui ne peuvent pas utiliser la souris à cause de problèmes de dextérité dans les mouvements mais aussi parce que l’internaute n’arrive plus à voir le pointeur de la souris à l’écran.

La méthode

À partir d’un ensemble de thèmes récupérés sur le répertoire WordPress ou sur les plateformes de vente de thèmes premium, j’ai examiné les défauts d’accessibilité les plus fréquents, ce qui m’a permis de définir une liste de 15 points à tester, issus du Référentiel Général d’Accessibilité pour les Administrations (RGAA) et les Web Content Accessibility Guidelines (WCAG). Les points concernent le design et l’intégration des gabarits, rôle principal d’un thème, en excluant les fonctionnalités, traités par les plugins et la rédaction de contenus, tâche réservée aux rédacteurs.

Les outils

Pour tester le 15 points identifiés, j’ai utilisé des extensions du navigateur Firefox, telles que des outils automatiques comme Opquast Desktop, aXe DevTools, Tenon check, mais aussi les extensions Firebug, Web Developer, HeadingsMap, WCAG Contrast Checker. J’ai également utilisé la feuille de style « a11y.css » de Gaël Poupard qui visualise directement sur la page les erreurs, les avertissements, les conseils.

Les 15 points à tester

J’ai ensuite présenté chaque point de la liste, sa thématique, comment le tester avec les outils, comment le corriger en cas de défaut d’accessibilité

Les points testés sont :

1. Le zoom est autorisé sur les mobiles
2. Le site comporte aux moins 5 régions, atteignables directement par les utilisateurs de lecteurs d’écran
3. La hiérarchie des titres est pertinente et sans rupture
4. Le site propose au moins deux moyens de navigation (menu, plan de site, moteur de recherche)
5. Les liens doivent avoir un intitulé
6. L’info bulle ne doit pas être identique au lien et complète l’intitulé si nécessaire
7. Les liens doivent être explicites
8. L’ouverture de nouvelle fenêtre ou onglet est signalée
9. La prise du focus à la navigation clavier doit être visible (pointillé autour des éléments interactifs)
10. Un menu de navigation ainsi que les sous-menus sont utilisables au clavier
11. Il existe au moins un lien d‘évitement « Aller au contenu » pour accéder directement au contenu principal de la page
12. Le formulaire de recherche a une étiquette (cachée ou non) reliée au champ de saisie
13. Le contraste entre la couleur du texte et la couleur du fond est suffisant
14. Les liens sont identifiables dans un contenu éditorial
15. La présentation du texte doit suivre des règles telles que : pas de texte justifié, interlignage suffisant, espacement entre les paragraphes suffisant, pas d’unité pixel pour la taille des caractères, possibilité d’augmenter de 200% la taille des caractères sans perte d’information

Mais aussi, ne pas oublier de traduire son thème, de valider le code, de spécifier la langue principale de la page, de fournir un titre de page pertinent, de prévoir d’installer un fil d’Ariane (utilisation d’un plugin).

Comment modifier son thème ?

Vous développez vous-même des thèmes sur mesure, vous pouvez prévoir un thème « starter » qui prend en compte les critères d’accessibilité.

Vous avez téléchargé un thème gratuit ou payant, vous avez constaté des défauts d’accessibilité, vous pouvez créer un thème enfant et ne modifier que les parties du thème parent à corriger. Si les modifications sont trop importantes, il est plus efficace de faire une copie du thème en entier sans passer par un thème enfant qui rajoute une couche dans le traitement des pages.

Mes slides

Pour aller plus loin, voici ma présentation :

Tester le niveau d’accessibilité d’un thème WordPress par Claire Bizingre