{"id":8286,"date":"2022-12-24T17:01:11","date_gmt":"2022-12-24T16:01:11","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=8286"},"modified":"2025-11-19T10:46:41","modified_gmt":"2025-11-19T09:46:41","slug":"extensions-construire-formulaire-accessible-wordpress-plugin","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/wordpress\/extensions-construire-formulaire-accessible-wordpress-plugin","title":{"rendered":"Extensions pour construire un formulaire accessible sur WordPress"},"content":{"rendered":"<p>Dans mon \u00e9ternelle qu\u00eate d\u2019un web meilleur, une question m&rsquo;a \u00e9t\u00e9 pos\u00e9e r\u00e9cemment sur LinkedIn. Cette question \u00e9tait la suivante : connais-tu un <span lang=\"en\">plugin<\/span> WordPress qui permette de cr\u00e9er un formulaire accessible ? Je ne me suis jamais pos\u00e9 la question car j\u2019utilise <span lang=\"en\">Contact Form 7<\/span> qui permet de faire un peu ce qu\u2019on veut. Mais creusons ensemble.<\/p>\n<p><!--more--><\/p>\n<p>Cette recherche d\u2019accessibilit\u00e9 sous WordPress n\u2019est pas nouvelle. Vous pouvez lire le retour de Julie sur l\u2019<a href=\"https:\/\/www.lalutineduweb.fr\/accessibilite-back-office-pw2017-transcription\/\">accessibilit\u00e9 du back-office de WordPress<\/a> (2017). H\u00e9las, il y a bien des choses qui n\u2019ont pas chang\u00e9es, et heureusement bien d\u2019autres qui ont \u00e9volu\u00e9es dans le bon sens.<\/p>\n<p class=\"message\">Message de service aux d\u00e9veloppeurs de <span lang=\"en\">plugins<\/span> : pensez \u00e0 vous mettre \u00e0 l\u2019accessibilit\u00e9 et vous former, car cela va devenir un crit\u00e8re de s\u00e9lection dans beaucoup de pays d\u2019Europe les prochaines ann\u00e9es (voir cet <a href=\"https:\/\/ec.europa.eu\/social\/main.jsp?catId=1202&amp;langId=fr\">Acte L\u00e9gislatif Europ\u00e9en sur l\u2019Accessibilit\u00e9<\/a>).<\/p>\n<p class=\"message remember\"><strong>Derni\u00e8re mise \u00e0 jour<\/strong> : 19 nov. 2025<br \/>\nJe vais mettre \u00e0 jour le plus r\u00e9guli\u00e8rement possible certaines de mes analyses. Regardez bien la date au-dessus, ainsi que la date d&rsquo;analyse de chaque plugin.<\/p>\n<h2>Un formulaire accessible sous WordPress ? M\u00e9thodologie de tests<\/h2>\n<p>Voici mon environnement au moment des tests, et surtout les quelques \u00e9l\u00e9ments que j\u2019ai test\u00e9 avant de d\u00e9cider si le plugin de formulaire WordPress valait le coup.<\/p>\n<h3><b>Environnement de test<\/b><\/h3>\n<p>Pour ces tests, j\u2019ai mis \u00e0 jour mon installation sous Local avec la derni\u00e8re version de WordPress :<\/p>\n<ul>\n<li aria-level=\"1\">Nginx + PHP 8<\/li>\n<li aria-level=\"1\">WordPress 6.1.1<\/li>\n<li aria-level=\"1\">Retrait de tous les <span lang=\"en\">plugins<\/span><\/li>\n<li aria-level=\"1\">Activation du th\u00e8me <span lang=\"en\">TwentyTwenty Three<\/span><\/li>\n<li aria-level=\"1\">Notez \u00e9galement la date des tests \ud83d\ude09<\/li>\n<\/ul>\n<p>Puis j\u2019ai install\u00e9 les plugins de formulaire lorsqu\u2019ils \u00e9taient gratuitement. Pour certains j\u2019ai pu tester sur un environnement mis \u00e0 disposition par l\u2019\u00e9diteur du <span lang=\"en\">plugin<\/span>.<\/p>\n<h3><b>M\u00e9thodologie de test<\/b><\/h3>\n<p>Dans mon analyse, je souhaite tester 2 aspects : la facilit\u00e9 d\u2019utilisation en <span lang=\"en\">back-office<\/span> pour cr\u00e9er des formulaires, et l\u2019aspect accessibilit\u00e9 en <span lang=\"en\">front-end<\/span> pour les utilisateurs et utilisatrices finaux. <b>Je n\u2019ai pas cherch\u00e9 \u00e0 tester l\u2019accessibilit\u00e9 en <span lang=\"en\">back-office<\/span><\/b> pour des raisons de gain de temps pour le moment, mais je le ferai peut-\u00eatre ult\u00e9rieurement.<\/p>\n<p>Dans chaque test je vise :<\/p>\n<ul>\n<li aria-level=\"1\"><span lang=\"en\">Back-end<\/span> (sur 5 points) :\n<ul>\n<li aria-level=\"2\">La facilit\u00e9 de prise en main,<\/li>\n<li aria-level=\"2\">L&rsquo;accompagnement et les aides,<\/li>\n<li aria-level=\"2\">La structure de l\u2019espace d\u2019administration,<\/li>\n<li aria-level=\"2\">L\u2019utilisation de langage technique en anglais ou fran\u00e7ais,<\/li>\n<li aria-level=\"2\">L&rsquo;ergonomie globale.<\/li>\n<\/ul>\n<\/li>\n<li aria-level=\"1\"><span lang=\"en\">Front-end<\/span> (sur 5 points) :\n<ul>\n<li aria-level=\"2\">La qualit\u00e9 du code source (accessibilit\u00e9 technique)<\/li>\n<li aria-level=\"2\">La qualit\u00e9 du design des champs (accessibilit\u00e9 visuelle)<\/li>\n<li aria-level=\"2\">La qualit\u00e9 des interactions (accessibilit\u00e9 technique et visuelle)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Je ne suis pas all\u00e9 jusqu\u2019au test de retranscription au lecteur d\u2019\u00e9cran (<span lang=\"en\">VoiceOver<\/span> sous Mac), sauf rares exceptions, encore une fois pour des raisons de gain de temps, et surtout parce que souvent il n\u2019y a pas besoin d\u2019aller jusque l\u00e0 pour disqualifier un <span lang=\"en\">plugin<\/span>. H\u00e9las.<\/p>\n<h3><b>Comment lire mes notes et langage technique ?<\/b><\/h3>\n<p>Pour faire simple, un 3\/5 en accessibilit\u00e9, ce n\u2019est pas suffisant, vous pouvez commencer \u00e0 r\u00e9fl\u00e9chir \u00e0 l\u2019utilisation du plugin \u00e0 partir de 4\/5.<br \/>\nEn terme d\u2019utilisabilit\u00e9, je conseille \u00e0 partir de 3\/5 pour une personne avec peu de connaissance technique, les points au dessus de 3 sont plut\u00f4t attribu\u00e9s \u00e0 du contr\u00f4le et r\u00e9glage.<\/p>\n<p>Dans les lignes suivantes, je vais forc\u00e9ment devoir aborder un peu de langage technique. HTML est un langage de d\u00e9veloppement (code) qui permet de structurer les pages que vous naviguez. Lorsque le code est mal fait, l\u2019affichage visuel de la page peut \u00eatre bon, mais pour autant sa structure mauvaise. Une mauvaise structure va ajouter de la difficult\u00e9 pour des outils utilis\u00e9s par des personnes en situation de handicap, notamment pour retranscrire le contenu de la page, et par cons\u00e9quent utiliser votre formulaire.<\/p>\n<p>ARIA, est une \u201ctechnologie\u201d permettant th\u00e9oriquement d\u2019am\u00e9liorer le HTML. Mais comme tout outil, s\u2019il est mal utilis\u00e9, il peut tr\u00e8s bien faire plus de mal que de bien.<\/p>\n<h3>Qu&rsquo;est-ce qu&rsquo;un formulaire accessible ?<\/h3>\n<p>Sans trop rentrer dans les d\u00e9tails, c&rsquo;est un formulaire qui remplit les crit\u00e8res de conformit\u00e9 des <span lang=\"en\">WCAG<\/span>, dont une traduction en fran\u00e7ais de la version 2.1 se trouve ici : <a href=\"https:\/\/www.w3.org\/Translations\/WCAG21-fr\/\">WCAG 2.1 en Fran\u00e7ais<\/a>.<\/p>\n<p>Dans mes tests, je passe en revue quelques crit\u00e8res sans rentrer dans les d\u00e9tails, mais qui pour moi sont primordiaux avant de pouvoir aller plus loin dans les tests. S&rsquo;ils ne sont pas valides, je m&rsquo;arr\u00eate.<\/p>\n<h2>Les <span lang=\"en\">plugins<\/span> de formulaire WordPress test\u00e9s<\/h2>\n<p>Passons maintenant aux diff\u00e9rents <span lang=\"en\">plugins<\/span> de cr\u00e9ation de formulaire que j\u2019ai pu tester jusque l\u00e0, et regardons o\u00f9 \u00e7a p\u00eache et si nous tombons sur un formulaire accessible sous WordPress.<\/p>\n<h3><b>Accessibilit\u00e9 de <span lang=\"en\">Fluent Forms<\/span><br \/>\n<\/b><\/h3>\n<p><strong>Derni\u00e8re mise \u00e0 jour du test : 24 d\u00e9c. 2022<\/strong><\/p>\n<p><a lang=\"en\" href=\"https:\/\/wordpress.org\/plugins\/fluentform\/\" hreflang=\"en\">Fluent Forms<\/a> est un plugin de cr\u00e9ation de formulaires que je ne connaissais pas avant qu\u2019on m\u2019en parle r\u00e9cemment. Je d\u00e9couvre donc, peut-\u00eatre en m\u00eame temps que vous.<\/p>\n<p>Je vais commencer par l\u2019interface d\u2019admin, puisque j\u2019ai d\u00fb l\u2019installer. Celle-ci reprend les codes de WordPress en lissant un peu les styles. Personnellement je les trouve plut\u00f4t agr\u00e9ables, mais c\u2019est mon avis personnel.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/fluent-forms-admin.png\"><img decoding=\"async\" class=\"aligncenter wp-image-8309 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/fluent-forms-admin.png\" alt=\"Interface \u00e9pur\u00e9e en deux colonnes de Fluent Form.\" width=\"1758\" height=\"698\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/fluent-forms-admin.png 1758w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/fluent-forms-admin-300x119.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/fluent-forms-admin-600x238.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/fluent-forms-admin-768x305.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/fluent-forms-admin-1536x610.png 1536w\" sizes=\"(max-width: 1758px) 100vw, 1758px\" \/><\/a><\/p>\n<p>La structure de la page d\u2019\u00e9dition du formulaire est proche de celle de <span lang=\"en\">Gravity Forms<\/span> qui est le suivant que j&rsquo;\u00e9value, peut-\u00eatre en un poil plus simple. Peut-\u00eatre trop simple pour moi par exemple, qui ai vu les \u201c<span lang=\"en\">placeholders<\/span>\u201d (ces textes pr\u00e9sents dans les champs qui se retirent quand vous \u00e9crivez) par d\u00e9faut qu\u2019il ne semble pas possible de retirer. Cela fera un point de moins pour l\u2019aspect facilit\u00e9 d\u2019utilisation\/contr\u00f4le, mais \u00e9galement pour l\u2019accessibilit\u00e9 en <span lang=\"en\">front-end<\/span> puisqu\u2019il est d\u00e9conseill\u00e9 de les utiliser.<\/p>\n<p>Du c\u00f4t\u00e9 du <span lang=\"en\">front-end<\/span> justement, nous avons les libell\u00e9s et champs qui sont bien reli\u00e9s pour les cas classiques (<code>select<\/code>, <code>input<\/code>, <code>checkbox<\/code>, <code>radio<\/code>, etc.) et la navigation clavier est ais\u00e9e gr\u00e2ce \u00e0 des styles avanc\u00e9s pour le focus clavier. M\u00eame les widgets plus avanc\u00e9s semblent assez facile \u00e0 utiliser au clavier.<\/p>\n<p>On reprochera par contre que les points positifs s\u2019arr\u00eatent l\u00e0 pour ce plugin. Les messages d\u2019erreurs ne sont pas annonc\u00e9s (<code>aria-describedby<\/code>), les champs requis ne le sont techniquement pas non plus (<code>aria-required<\/code>), aucune utilisation de <code>fieldset<\/code> et quelques tr\u00e8s mauvaises utilisations des <code>label<\/code>. J\u2019arr\u00eate donc le test ici.<\/p>\n<p><b>Note de facilit\u00e9 d\u2019utilisation<\/b><b><br \/>\n<\/b>3\/5<\/p>\n<p><b>Note d\u2019accessibilit\u00e9<\/b><b><br \/>\n<\/b>2\/5<\/p>\n<h3><b>Accessibilit\u00e9 de <span lang=\"en\">Gravity Forms<\/span><br \/>\n<\/b><\/h3>\n<p><strong>Derni\u00e8re mise \u00e0 jour du test : 19 nov. 2025<\/strong><\/p>\n<p><span lang=\"en\">Gravity Forms<\/span> fait maintenant partie des <span lang=\"en\">plugins<\/span> les plus vieux et connus sur WordPress. Il est \u00e9galement compl\u00e8tement payant et ne propose plus de version gratuite comme il le faisait au d\u00e9but (me semble-t-il, j\u2019ai un doute en \u00e9crivant cette phrase).<\/p>\n<p>Il propose cependant un espace de tests gratuit en ligne qui permet de contr\u00f4ler l\u2019aspect des formulaires avec une multitude d\u2019exemples, mais \u00e9galement de tester l\u2019administration d\u2019un formulaire.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-8914\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/gravity-forms-accessible-wordpress-plugin.png\" alt=\"Diff\u00e9rents template de formulaire propos\u00e9s par Gravity Forms, dont le formulaire de contact, un formulaire d'enregistrement, un sondage, et bien d'autres.\" width=\"2398\" height=\"1350\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/gravity-forms-accessible-wordpress-plugin.png 2398w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/gravity-forms-accessible-wordpress-plugin-300x169.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/gravity-forms-accessible-wordpress-plugin-600x338.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/gravity-forms-accessible-wordpress-plugin-768x432.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/gravity-forms-accessible-wordpress-plugin-1536x865.png 1536w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/gravity-forms-accessible-wordpress-plugin-2048x1153.png 2048w\" sizes=\"(max-width: 2398px) 100vw, 2398px\" \/><\/p>\n<p>Du c\u00f4t\u00e9 ergonomie, <span lang=\"en\">Gravity Forms<\/span> a pris la d\u00e9cision de se rapprocher de celle de Gutenberg, probablement pour ne pas perturber \u00e0 l\u2019utilisation. Il n\u2019est pas \u00e9vident d\u2019offrir plein de possibilit\u00e9s de personnalisation et contr\u00f4le, et en m\u00eame temps rester facile d\u2019utilisation sur l\u2019interface propos\u00e9e. Mais ces options sont plut\u00f4t bien g\u00e9r\u00e9es.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/gravity-forms-admin-edit.png\"><img decoding=\"async\" class=\"aligncenter wp-image-8321 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/gravity-forms-admin-edit.png\" alt=\"L'interface d'administration de Gravity Forms, qui visuellement pourrait en faire un plugin de formulaire accessible\" width=\"1757\" height=\"938\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/gravity-forms-admin-edit.png 1757w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/gravity-forms-admin-edit-300x160.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/gravity-forms-admin-edit-600x320.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/gravity-forms-admin-edit-768x410.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/gravity-forms-admin-edit-1536x820.png 1536w\" sizes=\"(max-width: 1757px) 100vw, 1757px\" \/><\/a><\/p>\n<p>Vous pourrez monter en comp\u00e9tence \u00e0 votre rythme puisque certaines d\u00e9cisions sont prises par d\u00e9faut pour vous, et vous pouvez bidouiller des options si \u00e7a vous chante. Quelques infobulles d\u2019accompagnement sont pr\u00e9sentes pour nous aider \u00e0 monter en comp\u00e9tences.<\/p>\n<p>Sur quelques champs, <span lang=\"en\">Gravity Forms<\/span> a pris la d\u00e9cision d\u2019adopter une d\u00e9coupe des labels \u00e9trange (voir le screenshot au-dessus) proposant un label principal comme \u201c<span lang=\"en\">Name<\/span>\u201d puis des sous-labels \u201c<span lang=\"en\">First<\/span>\u201d et \u201c<span lang=\"en\">Last<\/span>\u201d. C\u2019est un principe tr\u00e8s anglophone (voire am\u00e9ricain) qui ne me semble pas tr\u00e8s ergonomique pour bien des raisons. Mais encore une fois, ce ne sont que des options.<\/p>\n<p>J\u2019ai parcouru les classiques manques de ce type de formulaire d\u2019un point de vue code : tout est l\u00e0, les informations sur les champs requis, la bonne utilisation des labels, des fieldsets et legends, la notion d\u2019<code>aria-live<\/code> pour les messages qui se mettent \u00e0 jour, les descriptions de champs riches reli\u00e9es \u00e0 leur champ respectif.<\/p>\n<p>Bref, un bon travail c\u00f4t\u00e9 code, qui semble avoir \u00e9t\u00e9 valid\u00e9 par Level Level, une soci\u00e9t\u00e9 sp\u00e9cialis\u00e9e dans WordPress et l\u2019accessibilit\u00e9. <a href=\"https:\/\/level-level.com\/cases\/gravity-forms-2-5\/\">Lisez l\u2019article sur le sujet<\/a>.<\/p>\n<p>J&rsquo;ai pouss\u00e9 les tests sur les contrastes de couleur en 2025, puisque ce crit\u00e8re n&rsquo;\u00e9tait pas valide en 2022 lors de mon premier test. C&rsquo;est agr\u00e9able de constater que mes critiques ont \u00e9t\u00e9 prises en compte, et le design pouss\u00e9 par d\u00e9faut mis \u00e0 jour par l&rsquo;\u00e9quipe.<\/p>\n<p>Le plugin \u00e9tait \u00e9galement probl\u00e9matique sur la gestion du focus, sa visibilit\u00e9, voire son absence sur certains types de champs (select, radio, etc.), mais c&rsquo;est d\u00e9sormais corrig\u00e9.<\/p>\n<p>Les seuls d\u00e9fauts que j&rsquo;ai pu y voir, qui seraient les derniers \u00e9l\u00e9ments \u00e0 corriger, en date (fin 2025) :<\/p>\n<ul>\n<li>Les \u00ab\u00a0<span lang=\"en\">chained selects<\/span>\u00a0\u00bb n&rsquo;ont pas de logique qui permet d&rsquo;associer s\u00e9mantiquement les \u00e9l\u00e9ments entre eux. Ils m\u00e9riteraient l&rsquo;utilisation d&rsquo;un <code>&lt;label&gt;<\/code>\u00a0 cach\u00e9, d&rsquo;un <code>&lt;fieldset&gt;<\/code> + <code>&lt;legend&gt;<\/code> ou d&rsquo;attributs ARIA, adapt\u00e9s.<\/li>\n<li>Le champs \u00ab\u00a0Produit\u00a0\u00bb est \u00e9trangement balis\u00e9, offrant des \u00e9tiquettes reli\u00e9es \u00e0 aucun champ (non invalidant) et proposant une prise de focus sur un \u00e9l\u00e9ment non \u00e9ditable, qui actionn\u00e9\u00a0 par la touche entr\u00e9e valide le formulaire.<\/li>\n<\/ul>\n<p>Je n&rsquo;ai pas retrouv\u00e9 les champs historiquement non conformes de type progress ou offrant du <span lang=\"en\">drag &amp; drop<\/span>.<\/p>\n<p>Un autre aspect \u00e0 d\u00e9battre serait la proposition de <span lang=\"en\">reCaptcha<\/span> comme m\u00e9thode de contr\u00f4le anti-spam. De m\u00e9moire cette solution est inaccessible, m\u00eame si elle n\u2019est pas directement d\u00e9velopp\u00e9e par <span lang=\"en\">Gravity Forms<\/span>.<\/p>\n<p><b>Note de facilit\u00e9 d\u2019utilisation<\/b><b><br \/>\n<\/b>4\/5<\/p>\n<p><b>Note d\u2019accessibilit\u00e9<\/b><b><br \/>\n<\/b>4.5\/5<\/p>\n<h3><b>Accessibilit\u00e9 de Ninja Forms<\/b><\/h3>\n<p><strong>Derni\u00e8re mise \u00e0 jour du test : 24 d\u00e9c. 2022<\/strong><\/p>\n<p>Attaquons <a lang=\"en\" href=\"https:\/\/wordpress.org\/plugins\/ninja-forms\/\" hreflang=\"en\">Ninja Forms<\/a>, et commen\u00e7ons par l\u2019interface d\u2019admin : celle-ci est bien plus \u00e9pur\u00e9e que les pr\u00e9c\u00e9dentes et propose un mode d\u00e9veloppeur que j\u2019ai d\u00e9couvert en l\u2019utilisant. De quoi allier le besoin de simplicit\u00e9 pour les moins experts, et passer sur un mode plus avanc\u00e9 pour les personnes qui ressentent le besoin de bidouiller.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/ninja-forms-interface.png\"><img decoding=\"async\" class=\"aligncenter wp-image-8295 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/ninja-forms-interface.png\" alt=\"L'interface d'\u00e9dition plut\u00f4t claire et simple de Ninja forms, en 2 colonnes\" width=\"1919\" height=\"925\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/ninja-forms-interface.png 1919w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/ninja-forms-interface-300x145.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/ninja-forms-interface-600x289.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/ninja-forms-interface-768x370.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/ninja-forms-interface-1536x740.png 1536w\" sizes=\"(max-width: 1919px) 100vw, 1919px\" \/><\/a><\/p>\n<p><span lang=\"en\">Ninja Forms<\/span> \u00e9tait un de mes pr\u00e9f\u00e9r\u00e9s \u00e0 une \u00e9poque, mais je me souviens avoir \u00e9t\u00e9 d\u00e9\u00e7u par la qualit\u00e9 du code et les nombreuses erreurs du validateur HTML. Il faut croire qu\u2019ils se sont un peu am\u00e9lior\u00e9 sur cet aspect car le c\u00f4t\u00e9 code est vraiment plus qualitatif.<\/p>\n<p>La base est l\u00e0, \u00e0 savoir : les labels sont connect\u00e9s \u00e0 leurs champs, les messages d\u2019erreurs sont annonc\u00e9s comme tel, ainsi que les champs requis et erron\u00e9s.<\/p>\n<p>Les descriptions associ\u00e9es aux champs ne sont par contre pas du tout pris en compte et d\u00e9clar\u00e9s comme tels. Il y a m\u00eame un truc bizarre avec ces descriptions : elles apparaissent avant le champ mais sont d\u00e9clar\u00e9es dans le code apr\u00e8s le champ, ce qui est une contre-indication. (l\u2019ordre de lecture du code doit \u00eatre proche de l\u2019ordre d\u2019encha\u00eenement des \u00e9l\u00e9ments \u00e0 l\u2019\u00e9cran)<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/ninja-forms-not-accessible.png\"><img decoding=\"async\" class=\"aligncenter wp-image-8299 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/ninja-forms-not-accessible.png\" alt=\"Un exemple de code affichant un probl\u00e8me de connexion d'un aria-describedby\" width=\"794\" height=\"307\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/ninja-forms-not-accessible.png 794w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/ninja-forms-not-accessible-300x116.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/ninja-forms-not-accessible-600x232.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/ninja-forms-not-accessible-768x297.png 768w\" sizes=\"(max-width: 794px) 100vw, 794px\" \/><\/a><\/p>\n<p>Les labels sont tr\u00e8s mal utilis\u00e9s sur les groupes de <code>checkbox<\/code> et <code>radio<\/code>, et il y a m\u00eame un <code>aria-describedby<\/code> qui m\u00e8ne vers un message d\u2019erreur qui n\u2019existe pas lorsque le champ n\u2019est pas encore erron\u00e9.<\/p>\n<p>La surabondance d\u2019\u00e9l\u00e9ments tr\u00e8s mal utilis\u00e9s en fait un plugin pour cr\u00e9er des formulaires plut\u00f4t de mauvaise qualit\u00e9 c\u00f4t\u00e9 code.<\/p>\n<p>C\u00f4t\u00e9 interaction et aspect visuel, le contrast propos\u00e9 par le style des bordures par d\u00e9faut n\u2019est pas bon pour un contrast sur fond blanc. Il est de 1.74:1 contre une recommandation de 3:1.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/ninja-forms-color-contrast.png\"><img decoding=\"async\" class=\"aligncenter wp-image-8289 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/ninja-forms-color-contrast.png\" alt=\"Able affiche un contraste bordure sur fond de 1.74:1\" width=\"239\" height=\"231\" \/><\/a>Du c\u00f4t\u00e9 des interactions au clavier, le style \u00e0 la prise de focus est passable (meilleur contraste), mais totalement invisible sur les cases \u00e0 cocher et les boutons radio.<\/p>\n<p>Un plugin que je ne peux donc pas conseiller globalement.<\/p>\n<p><b>Note de facilit\u00e9 d\u2019utilisation<\/b><b><br \/>\n<\/b>4\/5<\/p>\n<p><b>Note d\u2019accessibilit\u00e9<\/b><b><br \/>\n<\/b>2\/5<\/p>\n<h3><b>Accessibilit\u00e9 de <span lang=\"en\">WPForms<\/span><br \/>\n<\/b><\/h3>\n<p><strong>Derni\u00e8re mise \u00e0 jour du test : 24 d\u00e9c. 2022<\/strong><\/p>\n<p>Du c\u00f4t\u00e9 de l\u2019ergonomie sur <a lang=\"en\" href=\"https:\/\/wordpress.org\/plugins\/wpforms-lite\/\" hreflang=\"en\">WPForms<\/a>, on est vite noy\u00e9 sous les informations lorsqu\u2019on installe ce <span lang=\"en\">plugin<\/span> : une grosse page d\u00e9di\u00e9e digne des solicitations de la boutique Aliexpress, et on se demande comment on va bien pouvoir d\u00e9marrer son premier formulaire. Une fois qu\u2019on a trouv\u00e9 le bon bouton ou page de menu, il faut encore comprendre la diff\u00e9rence entre la cr\u00e9ation avec ou sans template. Un peu laborieux pour si peu, mais passons \u00e0 la suite.<\/p>\n<p>L\u2019interface de cr\u00e9ation ressemble beaucoup aux concurrents, mais il y a une navigation \u00e0 3 niveaux d\u2019onglets. Tr\u00e8s surprenant et perturbant au d\u00e9but. L\u2019interface reste simple lorsqu\u2019on se plonge dans la cr\u00e9ation des champs, et quelques aides un peu trop discr\u00e8tes (faible contraste encore) sont dispo pour chaque champ de contr\u00f4le.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/wpforms-interface.png\"><img decoding=\"async\" class=\"aligncenter wp-image-8287 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/wpforms-interface.png\" alt=\"L'interface un peu complexe en 3 colonnes et 3 sous-niveaux d'onglet de WP Forms\" width=\"1915\" height=\"911\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/wpforms-interface.png 1915w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/wpforms-interface-300x143.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/wpforms-interface-600x285.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/wpforms-interface-768x365.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/wpforms-interface-1536x731.png 1536w\" sizes=\"(max-width: 1915px) 100vw, 1915px\" \/><\/a><\/p>\n<p>C\u00f4t\u00e9 code, les champs requis ne sont pas correctement annonc\u00e9 par une phrase de type \u201cles champs requis sont libell\u00e9s d\u2019une ast\u00e9risque\u201d ou quelque chose similaire. Les ast\u00e9risques sont bien dans les labels et les champs d\u00e9clar\u00e9s en <code>required<\/code>. Il manque un <code>aria-required<\/code> cependant.<\/p>\n<p>Il y a une utilisation \u00e9trange de 2 labels avec le m\u00eame attribut <code>for<\/code> pour les champs \u00e0 base de <code>label<\/code> principal et de sous-labels (que je ne justifie pas d\u2019un point de vue ergonomique non plus). Ne connaissant pas l\u2019effet je ne m\u2019exprimerai pas l\u00e0-dessus.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/wpforms-3-labels.png\"><img decoding=\"async\" class=\"aligncenter wp-image-8335 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/wpforms-3-labels.png\" alt=\"Un exemple de code a priori pas accessible avec 3 fois les m\u00eames attributs for\" width=\"847\" height=\"138\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/wpforms-3-labels.png 847w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/wpforms-3-labels-300x49.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/wpforms-3-labels-600x98.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/wpforms-3-labels-768x125.png 768w\" sizes=\"(max-width: 847px) 100vw, 847px\" \/><\/a><\/p>\n<p>Le <code>label<\/code> a encore une dr\u00f4le d\u2019utilisation sur les checkboxes et radios avec un <code>label<\/code> dont l\u2019attribut <code>for<\/code> le lie \u00e0 une liste HTML. La console Firefox a l\u2019air de comprendre le lien, mais je ne suis pas certain que \u00e7a soit valide. L\u2019utilisation de <code>fieldset<\/code> et <code>legend<\/code> est manquante dans ces cas. (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/input\/checkbox\">doc<\/a>)<\/p>\n<p>Les descriptions des champs sont ajout\u00e9s apr\u00e8s les champs et ne sont jamais li\u00e9s aux champs qu\u2019ils d\u00e9crivent.<\/p>\n<p>Dans les \u00e9tranget\u00e9s, <span lang=\"en\">WP Forms<\/span> propose un <span lang=\"en\">range-slider<\/span> utilisant le bon \u00e9l\u00e9ment HTML. Cependant la mise \u00e0 jour de la valeur juste en dessous n\u2019est jamais annonc\u00e9es explicitement soit par l\u2019attribut <code>aria-valuetext<\/code> soit par une mise \u00e0 jour de la description et un attribut <code>aria-live<\/code>.<\/p>\n<p>Du c\u00f4t\u00e9 interaction, une erreur dans le formulaire me permet d\u2019avoir le focus sur le premier champ erron\u00e9 ce qui est une bonne pratique. Une chose \u00e9trange se passe par contre : le premier champs erron\u00e9 se retrouve avec 3 labels, un pour le principal, un pour le sous label, et un pour le message d\u2019erreur.<\/p>\n<p>Il est \u00e9galement \u00e0 nouveau impossible de savoir o\u00f9 je me trouve \u00e0 la navigation clavier sur des \u00e9l\u00e9ments <code>radio<\/code> ou <code>checkbox<\/code>, ou encore le fameux <span lang=\"en\">range-slider<\/span>.<\/p>\n<p>C\u00f4t\u00e9 visuel, le contraste est \u00e0 nouveau insuffisant, mais cela commence \u00e0 \u00eatre une constante au fil des audits.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/wpforms-contrasts.png\"><img decoding=\"async\" class=\"aligncenter wp-image-8315 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/wpforms-contrasts.png\" alt=\"Able qui affiche un contraste toujours insuffisant\" width=\"238\" height=\"226\" \/><\/a>Un <span lang=\"en\">plugin<\/span> que je ne conseillerai donc pas non plus. L\u2019accueil sur le <span lang=\"en\">plugin<\/span> est laborieux et les aides peu visibles. Le code est une bouillie d\u2019\u00e9l\u00e9ments HTML mal utilis\u00e9s. <span lang=\"en\">Next<\/span>!<\/p>\n<p><b>Note de facilit\u00e9 d\u2019utilisation<\/b><b><br \/>\n<\/b>2\/5<\/p>\n<p><b>Note d\u2019accessibilit\u00e9<\/b><b><br \/>\n<\/b>1\/5<\/p>\n<h3><b>Accessibilit\u00e9 de Formidable<\/b><\/h3>\n<p><strong>Derni\u00e8re mise \u00e0 jour du test : 24 d\u00e9c. 2022<\/strong><\/p>\n<p>J\u2019ai d\u00e9couvert <a lang=\"en\" href=\"https:\/\/wordpress.org\/plugins\/formidable\/\" hreflang=\"en\">Formidable<\/a> un peu par hasard en cherchant quelques alternatives aux extensions de cr\u00e9ation de formulaire accessible. Je me suis dit que j\u2019allais le tester puisqu\u2019il est annonc\u00e9 par ses cr\u00e9ateurs comme \u201c<span lang=\"en\"><em>The most powerful and versatile form builder for WordPress\u201d<\/em><\/span>.<\/p>\n<p>Dans un de leurs articles, ils annoncent aussi n\u2019avoir aucune erreur d\u2019apr\u00e8s <span lang=\"en\">WAVE<\/span>, et \u00eatre <a href=\"https:\/\/formidableforms.com\/wcag-forms-a11y-form-builders\/#formidable-forms-wcag-evaluation\" hreflang=\"en\">conforme aux WCAG<\/a>. Voyons s\u2019il r\u00e9pond aux besoins d\u2019accessibilit\u00e9 donc, et repassons sur les arguments offerts par leur propre annonce. (article ci-dessus)<\/p>\n<p>C\u00f4t\u00e9 d\u00e9couverte, \u00e0 l\u2019installation, une page proposant des actions coh\u00e9rentes est affich\u00e9e, largement meilleure que celle de <span lang=\"en\">WPForms<\/span> par exemple. Je me dirige donc sur les <span lang=\"en\">templates<\/span> pour ne pas construire le formulaire depuis 0.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-splashscreen.png\"><img decoding=\"async\" class=\"aligncenter wp-image-8313 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-splashscreen.png\" alt=\"L'interface \u00e9pur\u00e9e de Formidable Forms qui me faisait dire qu'on partait d'un bon pied.\" width=\"1157\" height=\"883\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-splashscreen.png 1157w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-splashscreen-300x229.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-splashscreen-600x458.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-splashscreen-768x586.png 768w\" sizes=\"(max-width: 1157px) 100vw, 1157px\" \/><\/a><\/p>\n<p>Le bouton d\u00e9couvre une modale qui propose quelques templates classiques, mais \u00e9galement une liste \u00e9norme de <span lang=\"en\">templates<\/span> rang\u00e9s par cat\u00e9gories. Ok, pas mal. Je vais faire simple et faire un formulaire de contact. Ha ! Et bien non, pour faire un formulaire de contact je dois donner mon mail pour avoir 10 <span lang=\"en\">templates<\/span> gratuits\u2026 \ud83d\ude02 Allez, un point de moins sur la facilit\u00e9 d\u2019utilisation.<\/p>\n<p>On repart sur un <span lang=\"en\">blank form<\/span> alors. C\u2019est parti.<br \/>\nLe <span lang=\"en\">drag &amp; drop<\/span> est ais\u00e9 et je remarque \u00e0 l\u2019utilisation que l\u2019on peut cr\u00e9er des colonnes \u00e0 la vol\u00e9e, c\u2019est pas trop mal pour des formulaires un peu complexes.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-interface.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8331\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-interface.png\" alt=\"\" width=\"1883\" height=\"934\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-interface.png 1883w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-interface-300x149.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-interface-600x298.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-interface-768x381.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-interface-1536x762.png 1536w\" sizes=\"(max-width: 1883px) 100vw, 1883px\" \/><\/a><\/p>\n<p>L\u2019organisation des onglets et des options m\u2019a cependant l\u2019air chaotique contrairement \u00e0 le concurrence, il n\u2019y pourtant pas beaucoup d\u2019options en plus, mais \u00e7a semble tr\u00e8s charg\u00e9 et mal organis\u00e9. Il y a en fait des choses qui n\u2019ont rien \u00e0 faire dans les options de base et devraient se trouver dans les options avanc\u00e9es.<\/p>\n<p>Du c\u00f4t\u00e9 du code, c\u2019est plut\u00f4t appr\u00e9ciable comme les bonnes blagues de la famille racont\u00e9es lors des repas de No\u00ebl : si vous aimez le mauvais go\u00fbt, on est en plein dedans.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-lolilol-html.png\"><img decoding=\"async\" class=\"aligncenter wp-image-8317 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-lolilol-html.png\" alt=\"On voit afficher dans le code source 2 fois le Name et 2 fois le First, mais avec un \u00e9l\u00e9ment HTML legend qui semble cach\u00e9.\" width=\"979\" height=\"240\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-lolilol-html.png 979w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-lolilol-html-300x74.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-lolilol-html-600x147.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-lolilol-html-768x188.png 768w\" sizes=\"(max-width: 979px) 100vw, 979px\" \/><\/a>La capture d&rsquo;\u00e9cran ci-dessus vous montre un m\u00e9li-m\u00e9lo tr\u00e8s \u201cint\u00e9ressant\u201d. Ce code repr\u00e9sente visuellement ce qui suit :<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-champ-double-label.png\"><img decoding=\"async\" class=\"aligncenter wp-image-8293 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-champ-double-label.png\" alt=\"Un label &quot;name&quot; avec en dessous un champ, puis un autre label &quot;First&quot; sous ce champ.\" width=\"672\" height=\"122\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-champ-double-label.png 672w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-champ-double-label-300x54.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-champ-double-label-600x109.png 600w\" sizes=\"(max-width: 672px) 100vw, 672px\" \/><\/a><\/p>\n<p>Ici on va dire que c\u2019est de leur faute : comme tous les autres <span lang=\"en\">form builders<\/span>, ils ont d\u00e9cid\u00e9 qu\u2019\u00e0 la demande d\u2019un nom et pr\u00e9nom, le label serait d\u00e9coup\u00e9 en \u201c<span lang=\"en\">Name<\/span>\u201d, \u201c<span lang=\"en\">First<\/span>\u201d, \u201c<span lang=\"en\">Second<\/span>\u201d, trois labels, 2 champs. C\u00f4t\u00e9 ergonomie, on repassera donc.<\/p>\n<p>C\u00f4t\u00e9 code, \u00e7a aurait pu \u00eatre bien, mais c\u2019est une horreur : Le premier \u201c<span lang=\"en\">Name<\/span>\u201d sera lu par un lecteur d\u2019\u00e9cran sauf si la personne saute sur le champ directement, uniquement \u201c<span lang=\"en\">First<\/span>\u201d sera lu (celui du <code>label<\/code>) en effet, la <code>legend<\/code> du <code>fieldset<\/code> au-dessus est en <code>display: none;<\/code>ce qui a pour effet de ne pas \u00eatre lu par un lecteur d\u2019\u00e9cran (semble \u00eatre retranscript malgr\u00e9 tout par <span lang=\"en\">VoiceOver<\/span>). Une fois le champs remplit, le second \u201c<span lang=\"en\">First<\/span>\u201d devrait \u00eatre ignor\u00e9 en cas de navigation s\u00e9quentielle par champ de formulaire. Autrement il sera lu juste apr\u00e8s le remplissage du premier \u201c<span lang=\"en\">First<\/span>\u201d ce qui est totalement inutile.<\/p>\n<p>Et l\u00e0 on est dans les champs \u201csimples\u201d&#8230;<\/p>\n<p>Sur les autres champs, la description du champ est bien annonc\u00e9e avec un <code>aria-describedby<\/code>. Les libell\u00e9s des groupements de checkboxes et radio sont ignor\u00e9s puisqu\u2019ils n\u2019utilisent aucun moyen de connexion avec les groupes de champ, le <code>fieldset<\/code> mal utilis\u00e9 pr\u00e9c\u00e9demment aurait pu servir ici.<\/p>\n<p>En cas d\u2019erreur un message global est propos\u00e9, ainsi qu\u2019un message contextuel par champ. Les deux types d\u2019erreur utilisent un <code>role=\"alert\"<\/code>. Le probl\u00e8me avec cette technique, c\u2019est que la valeur implicite de aria-live pour un role alert est \u201c<code>assertive<\/code>\u201d ce qui veut dire qu\u2019une alerte va en annuler une autre (pour faire simple). Le message d\u2019erreur global ne sera donc jamais lu, et il est fort possible que seul le dernier message contextuel le soit en cas d\u2019erreurs multiples\u2026<\/p>\n<p>Les champs sont bien annonc\u00e9s en erreur par contre, ce qui fera un point positif peu utile dans toute cette bouillie. Leur analyse <span lang=\"en\">WAVE<\/span> n\u2019annonce donc aucune erreur de code, mais l\u2019analyse experte ici me laisse tr\u00e8s tr\u00e8s perplexe.<\/p>\n<p>Une fois n\u2019est pas coutume, le contraste de la bordure sur fond blanc n\u2019est pas suffisant, \u00e0 1.77:1 contre la recommandation de 3:1. Ce que <span lang=\"en\">WAVE<\/span> ne d\u00e9tecte pas. (pour une raison que j\u2019ignore)<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-contrasts.png\"><img decoding=\"async\" class=\"aligncenter wp-image-8329 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/formidable-contrasts.png\" alt=\"Able affiche toujours un contrast insuffisant pour la bordure sur le fond du site.\" width=\"240\" height=\"224\" \/><\/a><\/p>\n<p>Du c\u00f4t\u00e9 des interactions clavier, la bordure change de couleur au focus et propose un halo plut\u00f4t bien voyant. Petit bonus pour la prise de focus visible sur les radios et checkboxes et \u00e9galement select.<\/p>\n<p>Je me demande quand m\u00eame o\u00f9 est pass\u00e9 le respect des <span lang=\"en\">WCAG<\/span>.<\/p>\n<p><b>Note de facilit\u00e9 d\u2019utilisation<\/b><b><br \/>\n<\/b>2\/5<\/p>\n<p><b>Note d\u2019accessibilit\u00e9<\/b><b><br \/>\n<\/b>2\/5<\/p>\n<h2>L\u2019accessibilit\u00e9 de Happy Forms<\/h2>\n<p><strong>Derni\u00e8re mise \u00e0 jour du test : 24 d\u00e9c. 2022<\/strong><\/p>\n<p>On ne se connait pas encore, mais <a lang=\"en\" href=\"https:\/\/wordpress.org\/plugins\/happyforms\/\" hreflang=\"en\">Happy Forms<\/a> me demande tout de suite mon adresse e-mail \u00e0 l\u2019activation. Intrusif et agressif.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/happy-forms-interface.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8323\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/happy-forms-interface.png\" alt=\"\" width=\"1913\" height=\"970\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/happy-forms-interface.png 1913w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/happy-forms-interface-300x152.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/happy-forms-interface-600x304.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/happy-forms-interface-768x389.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/happy-forms-interface-1536x779.png 1536w\" sizes=\"(max-width: 1913px) 100vw, 1913px\" \/><\/a><\/p>\n<p>Pour le reste de l\u2019interface, <span lang=\"en\">Happy Forms<\/span> veut r\u00e9utiliser la plupart des styles propres \u00e0 l\u2019administration de WordPress, ce qui permet aux \u00e9diteurs de site web de ne pas \u00eatre perdus. C\u2019est plut\u00f4t une bonne pratique.<\/p>\n<p>Les options pour chaque champ sont cependant tr\u00e8s riches et peu expliqu\u00e9s. Mais vous vous plairez certainement apr\u00e8s une mont\u00e9e en comp\u00e9tences \u00e0 pouvoir proposer des formulaires riches avec encha\u00eenements de conditions, par exemple.<\/p>\n<p>Du c\u00f4t\u00e9 du code, nous retrouvons les erreurs classiques : le formulaire n\u2019a pas de nom, un champ cach\u00e9 servant de pi\u00e8ge pour les robots n\u2019est pas bien annonc\u00e9\/cach\u00e9, les champs obligatoires ne sont pas annonc\u00e9s, ni textuellement, ni dans le code source (<code>aria-required<\/code>), les descriptions des champs ne sont pas r\u00e9li\u00e9e aux champs qu\u2019elles d\u00e9crivent, et les groupements de boutons radio et checkboxes ne sont pas annonc\u00e9s correctement. Les messages d\u2019erreur ne sont \u00e9galement pas connect\u00e9s aux champs erron\u00e9s et les champs ne sont pas annonc\u00e9s erron\u00e9s non plus.<\/p>\n<p>Aucun effort sp\u00e9cifique pour l\u2019accessibilit\u00e9 ne semble \u00eatre fait, si ce n\u2019est connecter les libell\u00e9s \u00e0 leur champ.<\/p>\n<p>Du c\u00f4t\u00e9 des interactions notamment \u00e0 la navigation clavier, l\u2019ensemble des champs de base ont bien une prise de focus visible, sauf le bouton principal du formulaire. Apr\u00e8s avoir cherch\u00e9 dans les options du formulaire, vous pouvez cependant param\u00e9trer vous-m\u00eame la couleur de fond du bouton \u00e0 la prise de focus. Une option d\u2019accessibilit\u00e9 qui sous-entend \u201cd\u00e9merdez-vous\u201d. Ce qui va un peu dans le sens de <a href=\"https:\/\/wordpress.org\/support\/topic\/accessibility-improvements-5\/\">leurs r\u00e9ponses<\/a> quand leurs utilisateurs demandent plus d\u2019inclusivit\u00e9.<\/p>\n<p>Au niveau des couleurs et contrastes, en dehors des labels, rien ne va : les bordures ne sont pas suffisamment contrast\u00e9es sur fond blanc (1.38:1) et les messages d\u2019erreur proposent un contraste texte:fond qui n\u2019est pas assez \u00e9lev\u00e9 \u00e9galement avec un score de 3.59:1.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/happy-forms-contrast.png\"><img decoding=\"async\" class=\"size-full wp-image-8341\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/happy-forms-contrast.png\" alt=\"\" width=\"240\" height=\"228\" \/> <\/a><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/happy-forms-contrast-error.png\"><img decoding=\"async\" class=\"size-full wp-image-8325\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/happy-forms-contrast-error.png\" alt=\"\" width=\"237\" height=\"226\" \/><\/a><\/p>\n<p><b>Note de facilit\u00e9 d\u2019utilisation<\/b><b><br \/>\n<\/b>3\/5<\/p>\n<p><b>Note d\u2019accessibilit\u00e9<\/b><b><br \/>\n<\/b>1\/5<\/p>\n<h2>L\u2019accessibilit\u00e9 de Piotnet Forms<\/h2>\n<p><strong>Derni\u00e8re mise \u00e0 jour du test : 24 d\u00e9c. 2022<\/strong><\/p>\n<p>\u00c0 l\u2019activation du <span lang=\"en\">plugin<\/span>, <a lang=\"en\" href=\"https:\/\/wordpress.org\/plugins\/piotnetforms\/\" hreflang=\"en\">Piotnet<\/a> redirige automatiquement vers la liste des <span lang=\"en\">Forms<\/span>. Qui est vide. Normal.<\/p>\n<p>J\u2019ajoute donc un formulaire pour lequel l\u2019interface est vraiment\u2026 sommaire. Un titre, et mes champs par d\u00e9faut pour des <span lang=\"en\">Custom Fields<\/span> (Fields WordPress, par des champs de formulaire).<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-form-creation.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8339\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-form-creation.png\" alt=\"\" width=\"1918\" height=\"563\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-form-creation.png 1918w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-form-creation-300x88.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-form-creation-600x176.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-form-creation-768x225.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-form-creation-1536x451.png 1536w\" sizes=\"(max-width: 1918px) 100vw, 1918px\" \/><\/a> \u00c9trange, rien ne se passe, je retourne \u00e0 l\u2019accueil de la liste, rien de nouveau.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-form-list.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8297\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-form-list.png\" alt=\"\" width=\"1257\" height=\"343\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-form-list.png 1257w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-form-list-300x82.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-form-list-600x164.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-form-list-768x210.png 768w\" sizes=\"(max-width: 1257px) 100vw, 1257px\" \/><\/a>Je vais dans les settings, tout semble payant pour compl\u00e9ter les fonctionnalit\u00e9s du plugin. J\u2019allais finir cette revue ici et mettre une note de 0 partout, quand j\u2019ai vu dans la liste des fonctionnalit\u00e9s au survol de l\u2019item <span lang=\"en\">Contact Form<\/span> que je viens de cr\u00e9er, une fonction \u201c<span lang=\"en\">Edit with Piotnet Forms<\/span>\u201d.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-forms-edition.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8311\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-forms-edition.png\" alt=\"\" width=\"528\" height=\"141\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-forms-edition.png 528w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-forms-edition-300x80.png 300w\" sizes=\"(max-width: 528px) 100vw, 528px\" \/><\/a>En cliquant dessus : magie !<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-forms-interface.png\"><img decoding=\"async\" class=\"aligncenter wp-image-8337 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-forms-interface.png\" alt=\"L'interface de Piotnet Forms s'affiche enfin, proposant un semblant d'\u00e9diteur visuel semblable \u00e0 la page de personnalisation de th\u00e8me de WordPress.\" width=\"1914\" height=\"966\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-forms-interface.png 1914w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-forms-interface-300x151.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-forms-interface-600x303.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-forms-interface-768x388.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-forms-interface-1536x775.png 1536w\" sizes=\"(max-width: 1914px) 100vw, 1914px\" \/><\/a><\/p>\n<p>Pourquoi cette d\u00e9cision de cacher l\u2019\u00e9dition du formulaire, qui est litt\u00e9ralement la fonction principale, dans un lien \u00e0 peine visible, au lieu de charger imm\u00e9diatement l\u2019interface du formulaire ? Cette d\u00e9cision vaudra \u22122 points sur la note d\u2019ergonomie et facilit\u00e9 d\u2019utilisation, car j\u2019ai failli abandonner et que c\u2019est loin d\u2019\u00eatre \u00e9vident.<\/p>\n<p>Sur l\u2019ergonomie des options, ce plugin a pris la d\u00e9cision de ne pas exposer tous les champs sur son panneau principal, mais d\u2019en faire une option au sein du type de contenu \u201c<span lang=\"en\">Field<\/span>\u201d. Cela ne facilite pas n\u00e9cessairement la d\u00e9couverte ou compr\u00e9hension par l\u2019image, mais c\u2019est un choix de design.<\/p>\n<p>J\u2019ai cherch\u00e9 \u00e0 cr\u00e9er du colonnage, et j\u2019ai eu \u00e9norm\u00e9ment de difficulter \u00e0 comprendre qu\u2019il faut utiliser le type d\u2019item \u201c<span lang=\"en\">Section<\/span>\u201d et le dupliquer sur place pour en faire une division. Mais attention, il ne faut pas utiliser la fonction Dupliquer qui est sur le controleur en haut du bloc, mais \u00e0 gauche du bloc. M\u00eame ic\u00f4ne, 2 fonctions diff\u00e9rentes. Tr\u00e8s mauvais pattern de design qui en fait un plugin dont la courbe d\u2019apprentissage est tr\u00e8s longue et lente.<\/p>\n<p>J\u2019ai \u00e9galement cliqu\u00e9 sur un item payant dans la liste pour voir ce que \u00e7a propose. Cela m\u2019a fait quitter la page sans sauvegarder et fait perdre mes modifications. Bien jou\u00e9.<br \/>\nD\u2019ailleurs en parlant de sauvegarde, lorsque je sauvegarde le formulaire, je n\u2019ai aucune validation de la sauvegarde, juste un bouton qui clignotte bizarrement.<\/p>\n<p>Tant d\u2019efforts dans une interface custom au mauvais endroit (\u00e9dition) alors que pour le coup le d\u00e9veloppeur du plugin aurait mieux fait de se reposer sur les codes de design de WordPress ici.<\/p>\n<p>Passons un peu c\u00f4t\u00e9 code. Enfin si je trouve comment quitter ce mode\u2026 Ah, il faut cliquer sur l\u2019ic\u00f4ne WordPress tout en bas \u00e0 gauche. D\u00e9cid\u00e9ment, ce plugin est un jeu de piste.<\/p>\n<p>Les labels sont connect\u00e9s \u00e0 leurs champs. On retrouve l\u2019erreur classique du label qui est reli\u00e9 \u00e0 rien du c\u00f4t\u00e9 des boutons radio et checkboxes. Les champs obligatoires sont annonc\u00e9s dans le code, mais il n\u2019y a pas de message global annon\u00e7ant les obligatoires comme \u00e9tant porteurs d\u2019une ast\u00e9risque.<\/p>\n<p>Petit nouveaut\u00e9 dans la liste des \u201cesprits cr\u00e9atifs des d\u00e9veloppeurs\u201d, le bouton <span lang=\"en\">Submit<\/span> n\u2019est pas un bouton, mais une <code>div<\/code> avec du JavaScript dessus. La navigation clavier s\u2019arr\u00eate donc au remplissage, le formulaire est impossible \u00e0 envoyer. Ce simple fait va faire tomber sa note drastiquement.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-submit-button.png\"><img decoding=\"async\" class=\"aligncenter wp-image-8305 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-submit-button.png\" alt=\"Dans le code source, on distingue beaucoup de div, mais \u00e9galement un role=&quot;button&quot; qui ne sera pas suffisant pour naviguer au clavier.\" width=\"714\" height=\"268\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-submit-button.png 714w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-submit-button-300x113.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/piotnet-submit-button-600x225.png 600w\" sizes=\"(max-width: 714px) 100vw, 714px\" \/><\/a><\/p>\n<p>Du c\u00f4t\u00e9 des interactions, <span lang=\"en\">Piotnet<\/span> ne se mouille pas puisque les styles des champs sont d\u00e9pendants du th\u00e8me activ\u00e9, ou des options de styles que les utilisateurs et utilisatrices peuvent choisir par eux m\u00eames. Ce qui repr\u00e9sente un potentiel d\u2019inaccessibilit\u00e9 malgr\u00e9 tout.<\/p>\n<p>\u00c0 la validation du formulaire, ou \u00e0 l\u2019envoie plut\u00f4t, rien ne se passait, jusqu\u2019\u00e0 ce que je compl\u00e8te dans l\u2019admin le champs <span lang=\"en\">Form ID<\/span> qui est requis. Il permet en effet de connecter les champs \u00e0 valider du m\u00eame formulaire ensemble. Un aspect technique tr\u00e8s handicapant pour un non-technicien.<\/p>\n<p>\u00c0 la validation, les champs erron\u00e9s ont une erreur qui disparait \u00e0 la moindre interaction, et le champ n\u2019est pas not\u00e9 comme invalide dans le code source. Un probl\u00e8me qui va bien plus loin que l\u2019accessibilit\u00e9, l\u00e0 nous sommes sur la base de l\u2019ergonomie.<\/p>\n<p><b>Note de facilit\u00e9 d\u2019utilisation<\/b><b><br \/>\n<\/b>1\/5<\/p>\n<p><b>Note d\u2019accessibilit\u00e9<\/b><b><br \/>\n<\/b>0\/5<\/p>\n<h3><b>Accessibilit\u00e9 de Contact Form 7<\/b><\/h3>\n<p><strong>Derni\u00e8re mise \u00e0 jour du test : 24 d\u00e9c. 2022<\/strong><\/p>\n<p><a lang=\"en\" href=\"https:\/\/wordpress.org\/plugins\/contact-form-7\/\" hreflang=\"en\">Contact Form 7<\/a> est un plugin r\u00e9put\u00e9 et install\u00e9 sur bien des sites web. Cependant l\u00e0 o\u00f9 il peut \u00eatre tr\u00e8s puissant \u00e0 bien des niveaux, il en est pas moins tr\u00e8s, voire trop technique pour le commun des mortels.<\/p>\n<p>Le formulaire brut que l\u2019on obtient juste apr\u00e8s l\u2019installation du <span lang=\"en\">plugin<\/span> est \u00e0 peu pr\u00e8s ok sur sa structure, mais le moindre ajout de champ vous met dans une situation d\u00e9licate et inaccessible si vous n&rsquo;avez pas de connaissance technique : les champs ne sont pas identifi\u00e9s (techniquement) par leurs labels, et la structure est bien trop pauvre.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/contact-form-7-interface.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8343\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/contact-form-7-interface.png\" alt=\"\" width=\"1748\" height=\"886\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/contact-form-7-interface.png 1748w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/contact-form-7-interface-300x152.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/contact-form-7-interface-600x304.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/contact-form-7-interface-768x389.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/contact-form-7-interface-1536x779.png 1536w\" sizes=\"(max-width: 1748px) 100vw, 1748px\" \/><\/a><\/p>\n<p>Si je m\u2019arr\u00eatais l\u00e0, le <span lang=\"en\">plugin<\/span> serait certainement l\u2019un des moins bien class\u00e9s de la liste. Et je vais m\u2019arr\u00eater l\u00e0, tout simplement parce que rendre le formulaire accessible requiert des connaissances techniques dans le domaine, or je cherche \u00e0 mettre \u00e0 disposition un classement pour non-techniciens. Je cherche un plugin facile d\u2019utilisation et accessible \u201cpar d\u00e9faut\u201d, dans le sens o\u00f9 les utilisateurs et utilisatrices n\u2019ont pas de souci \u00e0 se faire sur leurs connaissances techniques ou leur besoin de monter en comp\u00e9tence.<\/p>\n<p><b>Note de facilit\u00e9 d\u2019utilisation<\/b><b><br \/>\n<\/b>1\/5<\/p>\n<p><b>Note d\u2019accessibilit\u00e9<\/b><b><br \/>\n<\/b>1\/5<\/p>\n<h2>L\u2019accessibilit\u00e9 de Simple Accessible Form<\/h2>\n<p><strong>Derni\u00e8re mise \u00e0 jour du test : 24 d\u00e9c. 2022<\/strong><\/p>\n<p>L\u2019accueil de <a lang=\"en\" href=\"https:\/\/wordpress.org\/plugins\/simple-accessible-forms\/\" hreflang=\"en\">Simple Accessible Form<\/a> propose un formulaire tr\u00e8s \u00e9trange o\u00f9 je dois moi-m\u00eame renseigner des informations techniques dont je ne sais pas forc\u00e9ment \u00e0 quoi elles vont servir ni l\u2019impact sur mes utilisateurs.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/simple-accessible-forms-interface.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8333\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/simple-accessible-forms-interface.png\" alt=\"\" width=\"1758\" height=\"937\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/simple-accessible-forms-interface.png 1758w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/simple-accessible-forms-interface-300x160.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/simple-accessible-forms-interface-600x320.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/simple-accessible-forms-interface-768x409.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/simple-accessible-forms-interface-1536x819.png 1536w\" sizes=\"(max-width: 1758px) 100vw, 1758px\" \/><\/a><\/p>\n<p>De plus, \u00e0 la validation du formulaire, j\u2019ai une erreur PHP qui s\u2019affiche, de quoi me faire d\u00e9sinstaller un plugin par crainte d\u2019autres erreurs en public\u2026<\/p>\n<p>Une fois le formulaire cr\u00e9\u00e9, il faut que je vois que je peux l\u2019\u00e9diter : action uniquement visible via une ic\u00f4ne. D\u00e9cision de design risible pour un plugin qui se veut accessible. Le lien \u201c<span lang=\"en\">view form<\/span>\u201d (ic\u00f4ne plan\u00e8te) m\u2019envoie vers une page sur laquelle le formulaire n\u2019est pas pr\u00e9sent.<\/p>\n<p>En cliquant sur l\u2019ic\u00f4ne d\u2019\u00e9dition, je reste sur la m\u00eame page avec l\u2019erreur PHP. Rien ne me permet d\u2019\u00e9diter un formulaire.<\/p>\n<p>Ok je crois que je n\u2019ai rien compris \u00e0 ce plugin, et vais devoir arr\u00eater le test ici. Passez votre chemin.<\/p>\n<p><b>Note de facilit\u00e9 d\u2019utilisation<\/b><b><br \/>\n<\/b>0\/5<\/p>\n<p><b>Note d\u2019accessibilit\u00e9<\/b><b><br \/>\n<\/b>0\/5<\/p>\n<h2>L\u2019accessibilit\u00e9 de Forminator<\/h2>\n<p><strong>Derni\u00e8re mise \u00e0 jour du test : 24 d\u00e9c. 2022<\/strong><\/p>\n<p>L\u2019accueil du <span lang=\"en\">plugin<\/span> <a lang=\"en\" href=\"https:\/\/wordpress.org\/plugins\/forminator\/\" hreflang=\"en\">Forminator<\/a> est inexistant, mais affiche un menu direct dans l\u2019administration. La cr\u00e9ation d\u2019un premier formulaire peut se faire sur la base d\u2019un template existant, ce qui facilite la prise en main.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/forminator-interface.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8327\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/forminator-interface.png\" alt=\"\" width=\"1755\" height=\"910\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/forminator-interface.png 1755w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/forminator-interface-300x156.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/forminator-interface-600x311.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/forminator-interface-768x398.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/forminator-interface-1536x796.png 1536w\" sizes=\"(max-width: 1755px) 100vw, 1755px\" \/><\/a><\/p>\n<p>Le mise en page est quelle que peu perturbante en comparaison aux concurrents, et les r\u00e9glages de chaque champ vont se faire dans des fen\u00eatres modales. Leur changement de hauteur \u00e0 chaque onglet me stresse tout particuli\u00e8rement, mais c\u2019est une pr\u00e9f\u00e9rence personnelle.<\/p>\n<p>Je d\u00e9couvre rapidement en <span lang=\"en\">drag &amp; drop<\/span> que je peux faire des colonnes, puisque j\u2019ai m\u00eame du mal \u00e0 placer un nouveau champ sur une ligne diff\u00e9rente.<\/p>\n<p>Les diff\u00e9rents types de champs sont plut\u00f4t explicite et les options propos\u00e9es assez riches. En dehors de l\u2019aspect \u201cmodales\u201d les options offrent pas mal de possibilit\u00e9 de personnalisation.<\/p>\n<p>Du c\u00f4t\u00e9 du code, il y a pas mal d\u2019oublis. On notera que les labels sont bien connect\u00e9s \u00e0 leurs champs, mais que les libell\u00e9s des groupements de checkboxes ou boutons radios ne sont pas annonc\u00e9s correctement. (manque d\u2019utilisation de <code>fieldset<\/code> et <code>legend<\/code>)<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/forminator-code-error.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-8291\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/forminator-code-error.png\" alt=\"\" width=\"702\" height=\"218\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/forminator-code-error.png 702w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/forminator-code-error-300x93.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/forminator-code-error-600x186.png 600w\" sizes=\"(max-width: 702px) 100vw, 702px\" \/><\/a><\/p>\n<p>Les erreurs ont toutes un <code>aria-hidden=\"true\"<\/code> ce qui les rend invisibles \u00e0 un lecteur d\u2019\u00e9cran, et les descriptions de champ n\u2019utilisent pas correctement l\u2019attribut <code>aria-describedby<\/code>en inversant la position de l\u2019<code>ID<\/code> et de cet attribut.<\/p>\n<p>Au niveau des interactions, la bordure des champs change de couleur \u00e0 la prise de focus, mais pas sur les boutons radios, les checkboxes et les selects.<\/p>\n<p>D\u2019un point de vue visuel, les contrastes sont suffisants tant que nous n\u2019entrons pas dans l\u2019affichage d\u2019erreurs. Les erreurs proposent en effet un contrast texte sur fond insuffisant. (attendu : 4.5:1)<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/forminator-contrast-error.png\"><img decoding=\"async\" class=\"size-full wp-image-8307 alignnone\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/forminator-contrast-error.png\" alt=\"\" width=\"240\" height=\"222\" \/><\/a> <a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/forminator-contrast-normal.png\"><img decoding=\"async\" class=\"size-full wp-image-8319 alignnone\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/12\/forminator-contrast-normal.png\" alt=\"\" width=\"239\" height=\"230\" \/><\/a><\/p>\n<p><b>Note de facilit\u00e9 d\u2019utilisation<\/b><b><br \/>\n<\/b>3\/5<\/p>\n<p><b>Note d\u2019accessibilit\u00e9<\/b><b><br \/>\n<\/b>2\/5<\/p>\n<h2>Construire un formulaire accessible sur WordPress : compte-rendu<\/h2>\n<p>Et bien, apparemment, ce n\u2019est pas demain la veille que l\u2019on pourra jouir de formulaires accessibles sur WordPress.<\/p>\n<p>Le plugin qui tire son \u00e9pingle du jeu \u00e0 l\u2019air d\u2019\u00eatre Gravity Forms. Cependant, malgr\u00e9 un audit de la soci\u00e9t\u00e9 Level Level, on y trouve encore quelques petits d\u00e9fauts qui ont d\u00fb \u00eatre oubli\u00e9s pendant l\u2019audit, ou le plugin a pu \u00e9voluer entre temp.<\/p>\n<p>Si vous devez choisir dans le lot, Gravity Forms est le seul plugin qui propose un niveau d\u2019accessibilit\u00e9 suffisant pour les formulaires de base, m\u00eame si on aurait appr\u00e9ci\u00e9 un peu plus de contr\u00f4le sur certains aspects ergonomiques.<\/p>\n<p>Un aspect que je ne comprends pas \u00e9galement, et que j\u2019explique par la maladie du plagia : pourquoi est-ce que les champs \u201cnoms\u201d de ces plugins sont d\u00e9coup\u00e9s en \u201c<span lang=\"en\">Name<\/span> &gt; <span lang=\"en\">First<\/span>, &gt; <span lang=\"en\">Last<\/span>\u201d. C\u2019est un comportement typiquement am\u00e9ricain qui ne s\u2019exporte pas tr\u00e8s bien, et qui est surtout inutilement complexe \u00e0 rendre bon d\u2019un point de vue code et ergonomie.<br \/>\nC\u2019est comme si ces d\u00e9veloppeurs avaient d\u00e9cid\u00e9 de se tirer une balle dans le pied.<\/p>\n<p>Enfin, on remarque que les erreurs sont basiquement toujours les m\u00eames :<\/p>\n<ul>\n<li aria-level=\"1\">Les <code>fieldset<\/code>\/<code>legend<\/code> sont sous utilis\u00e9s, ou tr\u00e8s mal,<\/li>\n<li aria-level=\"1\">La notion de messages compl\u00e9mentaires \u00e0 associer au champ n\u2019est pas comprise,<\/li>\n<li aria-level=\"1\">Le contraste de bordure sur fond de page n\u2019est jamais correct ou laiss\u00e9 \u00e0 la charge d\u2019un utilisateur non form\u00e9,<\/li>\n<li aria-level=\"1\">La navigation clavier est tr\u00e8s rarement prise en consid\u00e9ration,<\/li>\n<li aria-level=\"1\">Les interactions en cas d\u2019erreur sont presque toujours absentes.<\/li>\n<\/ul>\n<p>Si jamais vous souhaitez cr\u00e9er un plugin WordPress qui t\u00e2cle ces probl\u00e8mes d\u2019ergonomie et d\u2019accessibilit\u00e9, il y a clairement une opportunit\u00e9 en Europe, puisqu\u2019une Directive Europ\u00e9enne au doux nom de \u201c<span lang=\"en\">European Accessibility Act<\/span>\u201d va \u00eatre effective courant 2025.<\/p>\n<p>Il y a un cr\u00e9neau \u00e0 prendre pour le bien \u00eatre de vos utilisateurs et utilisatrices, mais \u00e9galement pour un business sur WordPress. Si jamais vous \u00eates motiv\u00e9s, comptez-moi dans votre team qualit\u00e9 avec grand plaisir.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/ressources-telechargements\/checklist-ameliorez-ux-formulaires-web\"><img decoding=\"async\" class=\"aligncenter wp-image-8275 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/11\/ameliorez-experience-formulaire-web-checklist-geoffrey-crofte.jpg\" alt=\"\" width=\"1280\" height=\"720\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/11\/ameliorez-experience-formulaire-web-checklist-geoffrey-crofte.jpg 1280w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/11\/ameliorez-experience-formulaire-web-checklist-geoffrey-crofte-300x169.jpg 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/11\/ameliorez-experience-formulaire-web-checklist-geoffrey-crofte-600x338.jpg 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2022\/11\/ameliorez-experience-formulaire-web-checklist-geoffrey-crofte-768x432.jpg 768w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a><\/p>\n<p>En attendant, je mets \u00e0 dispo \u00e0 nouveau ma <a href=\"https:\/\/www.creativejuiz.fr\/blog\/ressources-telechargements\/checklist-ameliorez-ux-formulaires-web\">checklist pour am\u00e9liorer l\u2019exp\u00e9rience utilisateur de vos formulaires web<\/a>, qui tombe plut\u00f4t \u00e0 pic compte tenu du sujet de cet article \ud83d\ude00<\/p>\n<p>Merci \u00e0 R\u00e9mi qui se reconna\u00eetra d\u2019avoir pos\u00e9 la question sur LinkedIn, et qui m\u2019a d\u00e9got\u00e9 quelques noms de plugins que je ne connaissais pas.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans mon \u00e9ternelle qu\u00eate d\u2019un web meilleur, une question m&rsquo;a \u00e9t\u00e9 pos\u00e9e r\u00e9cemment sur LinkedIn. Cette question \u00e9tait la suivante : connais-tu un plugin WordPress qui permette de cr\u00e9er un formulaire accessible ? Je ne me suis jamais pos\u00e9 la question car j\u2019utilise Contact Form 7 qui permet de faire un peu ce qu\u2019on veut. [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":8347,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"1","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[13],"tags":[85,432,51,684],"coauthors":[597],"class_list":["post-8286","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-accessibilite","tag-formulaire","tag-plugin","tag-wordpress"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/8286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=8286"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/8286\/revisions"}],"predecessor-version":[{"id":8916,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/8286\/revisions\/8916"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/8347"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=8286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=8286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=8286"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=8286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}