L’ACCESSIBILITÉ D’UN THÈME WORDPRESS

Différentes options sont disponibles lors du choix d’un thème : des thèmes payants, sans frais, sur le répertoire officiel WordPress, des plateformes commerciales, ou même venant des petits éditeurs indépendants. En général, vous pouvez accéder à un site de démonstration qui ressemble à une vue des fonctionnalités. jetons maintenant un coup d’œil à la démonstration, observons l’aspect graphique et les options de formatage, et découvrons les fonctionnalités exotiques et la conformité aux exigences du prochain projet. 

Cependant, il est fortement recommandé de tester l’accessibilité des démonstrations de thème. De ce fait, je vais vous expliquer pourquoi et comment le faire en quelques secondes.

I. POURQUOI TESTER L’ACCESSIBILITÉ DU THÈME, POUR QUI LE FAIT-ON ? DÉFINITION

En termes simples, l’accessibilité web consiste à supprimer les barrières potentielles entre les internautes et le contenu qu’ils affichent. plus précisément, Sir Tim Berners-Lee le définit comme suit : 

“Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales.”

Comprenez ceci : sur le Web, un seul Web (probablement votre site web) peut gêner vos utilisateurs. Parmi les plus faciles à mettre en oeuvre mais souvent omis, le code HTML valide et le bon contraste de couleur entre le texte et l’arriere-plan ne sont souvent pas pris en compte. 

C’est le but de cet article. Je vais vous présenter une série de conseils et d’outils pour évaluer l’accessibilité d’un site web. C’est une introduction et si votre projet doit correspondre au RGAA, cela ne sera pas suffisant. Cependant, il s’agit d’un moyen plus proche et familier des pièges les plus courants et leurs solutions. 

Les tests de pertinences ne sont pas automatisés et ne dépendent pas du thème, dans WordPress. N’oubliez pas vos contenus, car c’est la seule raison pour laquelle le projet existe. 

II. COMMENT ÉVALUER L’ACCESSIBILITÉ SI VOUS N’Y CONNAISSEZ RIEN ?

Lorsqu’on évoque l’importance de l’accessibilité, on fait souvent référence aux déficients visuels (aveugles ou malvoyants), aux personnes à mobilité réduite, voire à celles qui souffrent de troubles cognitifs plus ou moins sévères (dyslexie, troubles de l’attention, …) et on les met en scène face aux difficultés qui découlent des sites qu’il consulte. C’est censé être un peu trop tôt pour oublier que ces diverses situations de handicap n’indiquent qu’un seul problème causé par le site à tout le monde : 

• Un contenu difficilement distinguable pour un malvoyant demande inévitablement plus d’efforts à un voyant, 
• un texte plus difficile à lire que d’habitude pour une personne dyslexique peut être plus difficile à lire que d’habitude pour d’autres, 
• Une page qui ne peut pas être parcourue avec un clavier peut être moins confortable avec une souris.

Tout cela est que si un contenu vous perturbe, cela pourrait causer de sérieux problèmes à une personne dans une situation plus sensible. Et vous pouvez remarquez cela. 

2.1. A L’OEIL NU

Il est facile de dire si la démonstration du thème est difficile à lire ou difficile à comprendre. Veuillez noter ce qui suit :

• • Le texte trop petit : une taille de corps de 12 pixels est limité, préférez un contenu 16 pixels avec un interligne de 1.5 ;
  • Des contrastes faibles : le texte gris clair sur un fong blanc est difficile à cerner c’est pour cela qu’on a l’habitude de ne pas le lire mais seulement le feuilleter. Le texte nécessite un contraste de 4,5 pour 1, et la police supérieure nécessite un contraste de 3 par 1. Je vous recommande Contrast-Finder de Tanaguru pour vérifier le contraste;
  • Des bruits de mouvement ou visuels : les actions ou des sons ne doivent pas jouer automatiquement, et s’ils le font, l’utilisateur doit pouvoir les arrêter avec rapidité et facilement.
  • Une navigation incompréhensible : un menu de navigation incohérent ou imprévisible ou une structure de page impénétrable, sont des obstacles au contenu. Naviguez dans la page pour comprendre sa structure et utilisez uniquement le clavier pour naviguer dans la page pour voir si elle est au point et si les changements de zone sont comme prévu.  

2.2. LE HTML, C’EST LA VIE

Le HTML est au cœur de tout (accessibilité comme référencement naturel). Il doit donc être être valide et raisonnable, y compris mis à côté (par exemple désactiver JS et CSS). Le validator, vous sera utile pour cela. Lors de la démonstration de votre thème, envisagez de tester plusieurs pages, telles que votre page d’accueil, des catégories, des articles et un format de page légèrement exotique. 

2.3. EXTENSIONS NAVIGATEURS ET BOOKMARKLETS

Vous pouvez utiliser des outils probables dans le navigateur pour vous suivre et vous guider à travers de nombreuses choses.sa principale force est que vous n’avez pas besoin de visiter un site web ou d’installer un logiciel car vous l’installez simplement dans votre navigateur et l’utilisez comme vous le souhaitez. Par conséquent, il est particulièrement adapté pour évaluer rapidement une présentation thématique.

Bookmarklet est un petit script que vous placez dans vos favoris (bookmark, en anglais et qui s’exécute lorsque vous activez ce favori.

2.4. WAVE

C’est l’un des précurseurs. Malheureusement, Firefox ne l’utilise pas pour ses lignes directrices sur le développement limitées, mais elle n’est plus disponible, mais elle reste en chrome et existe sous la forme de site web. 

Des icones de forme et de couleur différentes sont utilisées pour chaque type de message, comme une erreur, un avertissement, un conseil ou d’une brève d’observation. et un panneau latéral s’affiche pour que vous parcourez, filtrez, et lire le titre du cas signalé.

2.5. AXE    

Axe est récent et se décline en plusieurs formats. Outre les extensions de navigateur qui méritent d’être mentionnées dans ce chapitre, il existe également des scripts à intégrer à des outils de test automatisés tels que Karma, Qunit, Jasmine, Mocha, Sélénium et Cucumber. 

De plus, c’est vraiment amusant à utiliser car cette approche vous permet de comprendre le problème et de voir directement la solution. Il est le seul qui affiche le but qui ne renvoie pas de faux positifs. Vous pouvez le trouver ici : 

• le site 
• sur chrome
• sur Firefox

2.6. HTML_CODESNIFFER

C’est un bookmarklet très utile, et si vous êtes un peu enthousiasme, c’est très agréable à utiliser. Lorsqu’il est lancé, il affiche une petite boîte de dialogue avec un compteur pour chaque seuil de gravité. Vous avez la possibilité d’activer ou de désactiver chaque niveau et créer directement un rapport. parfois, trop enthousiaste, c’est que si une page contient 120 erreurs, vous devez utiliser la gination plusieurs fois avant de constater les erreurs suivantes. La meilleure solution est de bien corriger les erreurs.

2.7. TOTAIIY

Il est très facile à utiliser, vous pouvez facilement sélectionner le thème que vous souhaitez tester, et il est en particulier clair et agréable à afficher. La fonctionnalité est très similaire à HTML_CodeSniffer, mais la décision de filtrer par sujet plutôt que par gravité devrait permettre de mieux comprendre les erreurs récurrentes et de surcharger moins d’erreurs lors de la première utilisation sur un site web. 

2.8. AIIY.CSS

Ce projet est pertinent car il s’agit d’une feuille de style CSS. Cela signifie que vous avez la possibilité d’utiliser comme un bookmarklet et un style personnalisé (par Stylish par exemple) et vous n’avez pas besoin de connexion. 

Quant à la documentation, un effort a été fourni, pour que chaque il était également très important afin que les informations soient vérifiées et étayées par une description précise, un exemple concret et des liens. Le principal inconvénient est la limitation du CSS. Par exemple, vous ne pouvez pas tester le contraste. 

2.9.  SERVICES EN LIGNE SPÉCIALISÉS

Il est le meilleur. Ils offrent tous des versions sans frais avec quelques tests mensuels, fournissent un rapport précis et documenté, et les versions sans frais sont très complètes. Ce sont des plateformes ou des API, on va donc vous montrer comment les utiliser complètement et les utiliser vous-même. 

Ces services utilisés sur des démonstrations thématiques sont spécifiquement destinés à la phase de développement et d’intégration. considérez- les comme des alliés lors de vos développements de thèmes. 

2.10. TANAGURU

C’est une plateforme de test en ligne automatisée. Concrètement, si vous créez un compte sur leur plateforme, vous pouvez consulter 10 sites pendant 5 jours. Lorsque vous exécutez le test avec l4url, vous verrez un rapport lisible avec beaucoup de détails. vous pouvez suivre les résultats en testant plusieurs fois la même URL. Ceci est très utile pour automatiser les tests de non régression. Il est français. 

Il peut être installé sur votre serveur et même sur vos outils lors de l’intégration continue ou de QA. 

2.11. TENON

Il a les mêmes fonctions que tanaguru mais il est anglais. Il permet d’identifier des complications liées au respect de la section 508 (la norme aux USA). Sa durée d’essai est de 30 jours. 

Il est au-dessus de ses courants car il a été conçu comme une API. vous pouvez l’utiliser sans passer par la plateforme et vous le lier sur n’importe lequel de vos outils à peu près : votre navigateur, votre CMS, … Vous pouvez avoir les résultats sous forme d’un tableau Json.

Joe Dolson, membre fondateur de l’équipe WP Accessibility, a proposé une extension WordPress qui permet d’utiliser l’API de Tenon depuis l’administration de votre site.

2.12. OPQUAST REPORTING 

Opquast est un projet à grande échelle visant à promouvoir le contrôle global de la qualité du Web, qui comprend l’accessibilité du web. Ainsi, bien que le nombre de référentiels soit important ( le référencement, performances, …) mais les référentiels qui analysent l’accessibilité sont particulièrement fins. Les explications détaillées des résultats d’audit ont permis l’apprentissage de plusieurs choses.

A noter qu’il existe une extension Firefox très utile qui permet de tester votre page directement dans Firefox. 

III. LES SPÉCIALITÉS DE L’ACCESSIBILITÉ SUR WORDPRESS

3.1. LA PHILOSOPHIE WORDPRESS

Ses présentations sur l’accessibilité et ses questions systématiques sont particulièrement intéressantes. 

• • Les contenus sont-ils accessibles pour les visiteurs ? 
  • Les visiteurs ont-ils le droit d’utiliser toutes les fonctionnalités ?
  • Sont- ils facile à comprendre les contenus ?
  • Est ce que tout genre d’appareil peut être utilisé par les internautes ? 

Il s’agit d’une compilation des quatre principes des Web Content Accessibility Guidelines (WCAG).

3.2. LES ASTUCES SPÉCIFIQUES 

Lorsque vous développez un thème pour WordPress, vous pouvez vous baser au “Theme Handbook for Accessibility Guidelines”. Ce dernier établit des exigences entre une liste d’éléments requis et recommandés et une liste de ressources. 

3.3. LES RESSOURCES DISPONIBLES 

La même équipe met également à votre disposition sur Github des modèles de conception spécifiques à un thème WordPress. 

3.4. LA COMMUNAUTÉ FRANÇAISE 

La communauté WordPress a toujours les devants, comme d’habitude. Vous allez trouver par exemple un Hashtag accessibilité sur le Slack wordpress.fr.  

Si vous souhaitez tester vos démonstrations de thème, les tests “à l’œil nu”, et l’utilisation d’une extension de navigateur ou d’un bookmarklet sont des solutions simples, accessibles à utiliser et riches à apprendre.