{"id":86401,"date":"2021-12-10T11:47:13","date_gmt":"2021-12-10T11:47:13","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/comment-creer-des-formulaires-web-accessibles-pour-wordpress\/"},"modified":"2021-12-10T11:47:13","modified_gmt":"2021-12-10T11:47:13","slug":"comment-creer-des-formulaires-web-accessibles-pour-wordpress","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/comment-creer-des-formulaires-web-accessibles-pour-wordpress\/","title":{"rendered":"Comment cr\u00e9er des formulaires Web accessibles pour WordPress"},"content":{"rendered":"

\n<\/p>\n

Selon le CDC, 26% des adultes aux \u00c9tats-Unis ont un certain type de handicap. Ne pas rendre votre site Web accessible aux personnes ayant des d\u00e9ficiences visuelles ou cognitives peut entra\u00eener une perte de trafic, un mauvais classement SEO et m\u00eame des litiges juridiques.<\/p>\n

De nos jours, presque tous les sites Web incluent une forme de formulaire, qu’il s’agisse d’un formulaire de commande de produits ou de quelque chose de plus simple comme un formulaire de contact. Les formulaires sont souvent l’une des parties les plus inaccessibles d’un site Web et m\u00e9ritent donc une attention particuli\u00e8re.<\/p>\n

Quelle que soit la mani\u00e8re dont vous impl\u00e9mentez votre formulaire, en utilisant un code personnalis\u00e9 ou un plugin, vous devez suivre certaines directives et bonnes pratiques pour vous assurer que vos formulaires sont enti\u00e8rement accessibles.<\/p>\n

Dans cet article, vous apprendrez \u00e0 cr\u00e9er des formulaires Web accessibles pour WordPress. Cela peut vous aider \u00e0 toucher un public plus large, \u00e0 am\u00e9liorer l’exp\u00e9rience utilisateur de votre site Web et \u00e0 augmenter vos revenus.<\/p>\n

<\/span>Qu’est-ce que l’accessibilit\u00e9 du site Web\u00a0?<\/span><\/h2>\n

La Web Accessibility Initiative dirig\u00e9e par le World Wide Web Consortium \u00e9crit que\u00a0:<\/p>\n

\u00ab\u00a0L’accessibilit\u00e9 du Web signifie que les sites Web, les outils et les technologies sont con\u00e7us et d\u00e9velopp\u00e9s de mani\u00e8re \u00e0 ce que les personnes handicap\u00e9es puissent les utiliser. Plus pr\u00e9cis\u00e9ment, les gens peuvent – percevoir, comprendre, naviguer et interagir avec le Web – contribuer au Web \u00bb.<\/p>\n

La navigation sur un site Web, la saisie d’informations et la s\u00e9lection du lien ou du bouton appropri\u00e9 peuvent \u00eatre difficiles pour les utilisateurs souffrant de handicaps visuels, physiques ou cognitifs. L’accessibilit\u00e9 implique la mise en \u0153uvre d’un ensemble de bonnes pratiques pour rendre votre site utilisable en\u00a0:<\/p>\n

    \n
  • Les personnes malvoyantes qui utilisent des lecteurs d’\u00e9cran.<\/li>\n
  • Personnes \u00e0 mobilit\u00e9 r\u00e9duite qui naviguent sur les sites avec le clavier<\/li>\n
  • Les personnes atteintes de troubles cognitifs<\/li>\n
  • Les daltoniens<\/li>\n
  • Les personnes qui d\u00e9pendent de la recherche vocale<\/li>\n
  • Les personnes dont la langue maternelle n’est pas l’anglais et qui utilisent des services de traduction.<\/li>\n
  • Les personnes souffrant d’affections temporaires, telles qu’un bras cass\u00e9, qui doivent saisir des informations \u00e0 l’aide de touches.<\/li>\n<\/ul>\n

    Les formulaires repr\u00e9sentent l’un des plus grands d\u00e9fis d’accessibilit\u00e9, car ils peuvent \u00eatre difficiles \u00e0 parcourir et d\u00e9routants \u00e0 remplir.<\/p>\n

    <\/span>L’importance des formulaires Web accessibles<\/span><\/h2>\n

    \"Importance<\/p>\n

    Les formulaires agissent comme un pont entre vous et vos clients. Par cons\u00e9quent, il est essentiel de vous assurer que vos formulaires sont accessibles aux personnes handicap\u00e9es. Ce sont quelques-unes des raisons les plus importantes pour optimiser vos formulaires Web pour l’accessibilit\u00e9 g\u00e9n\u00e9rale de WordPress.<\/p>\n

    <\/span>\u00c9viter les litiges juridiques<\/span><\/h3>\n

    Saviez-vous que l’accessibilit\u00e9 sera bient\u00f4t une exigence l\u00e9gale pour votre site Web alors que de plus en plus d’\u00c9tats commencent \u00e0 mettre en \u0153uvre des mandats d’accessibilit\u00e9 Web\u00a0? Cela a \u00e9t\u00e9 provoqu\u00e9 par des poursuites contre des marques bien connues d\u00e9pos\u00e9es en vertu de l’Americans with Disabilities Act (ADA).<\/p>\n

    <\/span>Augmentez vos revenus<\/span><\/h3>\n

    En plus des exigences l\u00e9gales, l’accessibilit\u00e9 peut vous aider \u00e0 augmenter vos revenus. Par exemple, les r\u00e9sultats de l’enqu\u00eate britannique Click-Away Pound 2019 ont r\u00e9v\u00e9l\u00e9 qu’un grand pourcentage d’utilisateurs handicap\u00e9s quittent les sites Web en raison de probl\u00e8mes d’accessibilit\u00e9, entra\u00eenant avec eux plus de 17 milliards de dollars de d\u00e9penses potentielles.<\/p>\n

    <\/span>Am\u00e9liorer l’exp\u00e9rience utilisateur<\/span><\/h3>\n

    Le respect des meilleures pratiques en mati\u00e8re d’accessibilit\u00e9 peut vous aider \u00e0 faciliter la navigation et la lecture de votre site Web. Les changements d’accessibilit\u00e9 aident \u00e0 am\u00e9liorer l’exp\u00e9rience utilisateur pour tous les visiteurs de votre site Web, pas seulement pour les personnes handicap\u00e9es.<\/p>\n

    <\/span>Boostez votre r\u00e9f\u00e9rencement<\/span><\/h3>\n

    Accorder une attention particuli\u00e8re \u00e0 la structure de votre site Web et rendre les pages plus faciles \u00e0 naviguer peut donner \u00e0 votre site un coup de pouce SEO en facilitant l’exploration des moteurs de recherche. De plus, l’ajout de “texte alternatif” descriptif \u00e0 vos images, appel\u00e9 balises alt, est crucial \u00e0 la fois pour les malvoyants et les moteurs de recherche lorsqu’il s’agit de comprendre votre contenu.<\/p>\n

    Les moteurs de recherche privil\u00e9gient les contenus faciles \u00e0 consommer pour tous. C’est pourquoi l’accessibilit\u00e9 sera toujours un facteur important dans le r\u00e9f\u00e9rencement.<\/p>\n

    <\/span>Attirer un public plus large<\/span><\/h3>\n

    Selon les statistiques de la Commission europ\u00e9enne, des Nations Unies et d’autres organisations, on peut supposer qu’environ 20 % de la population mondiale souffre d’une forme de handicap. Dans cet esprit, la mise en \u0153uvre des meilleures pratiques d’accessibilit\u00e9 peut vous aider \u00e0 attirer plus de clients.<\/p>\n

    <\/span>Directives pour la cr\u00e9ation de formulaires Web accessibles<\/span><\/h2>\n

    Alors, comment cr\u00e9er des formulaires accessibles pour votre site WordPress ? Voici quelques directives \u00e0 suivre.<\/p>\n

    <\/span>Utiliser un plugin de formulaire con\u00e7u pour l’accessibilit\u00e9<\/span><\/h3>\n

    Si vous souhaitez \u00e9conomiser du temps et des efforts, vous devez utiliser un plugin de formulaire WordPress qui inclut d\u00e9j\u00e0 des fonctionnalit\u00e9s d’accessibilit\u00e9. En ce qui concerne les formulaires accessibles, l’un des meilleurs plugins est Gravity Forms.<\/p>\n

    Gravity Forms s’engage pleinement en faveur de l’accessibilit\u00e9. Cela se refl\u00e8te dans sa derni\u00e8re version, qui comprend un certain nombre de fonctionnalit\u00e9s importantes pour vous aider \u00e0 cr\u00e9er des formulaires accessibles conformes \u00e0 WCAG 2.1 AA, la norme mondiale.<\/p>\n

    Gravity Forms 2.5 incluait une vari\u00e9t\u00e9 d’am\u00e9liorations d’accessibilit\u00e9 qui l’ont pouss\u00e9 au-dessus des autres plugins de formulaire. Cela inclut des commentaires d\u00e9taill\u00e9s sur le lecteur d’\u00e9cran pour les utilisateurs aveugles ou malvoyants, ainsi que des avertissements dans la zone d’administration concernant les champs pr\u00e9sentant des probl\u00e8mes d’accessibilit\u00e9.<\/p>\n

    \"Avertissement<\/p>\n

    Mais l’accessibilit\u00e9 n’est pas la seule raison d’utiliser Gravity Forms. Il existe \u00e9galement une multitude de plugins puissants qui \u00e9tendent Gravity Forms, vous permettant de cr\u00e9er de puissantes applications Web.<\/p>\n

    <\/span>Informer les utilisateurs de ce \u00e0 quoi s’attendre<\/span><\/h3>\n

    La clart\u00e9 globale est importante pour l’exp\u00e9rience utilisateur globale, pas seulement pour l’accessibilit\u00e9. Lors de la cr\u00e9ation de vos formulaires, assurez-vous qu’ils sont faciles \u00e0 num\u00e9riser et qu’ils contiennent des instructions claires pour chaque champ. Si les utilisateurs trouvent vos formulaires confus, ils peuvent laisser votre site frustr\u00e9.<\/p>\n

    Si vous avez un formulaire avec plusieurs \u00e9tapes, il est important que les utilisateurs sachent \u00e0 quelle \u00e9tape ils se trouvent et combien d’\u00e9tapes il leur reste. Assurez-vous qu’il existe un moyen pour les utilisateurs de revenir aux \u00e9tapes pr\u00e9c\u00e9dentes afin qu’ils puissent modifier ou mettre \u00e0 jour les informations comme bon leur semble.<\/p>\n

    Enfin, fournissez un texte descriptif \u00e0 tous vos boutons et liens afin que vous sachiez clairement \u00e0 quoi vous attendre lorsque vous cliquez dessus. Au lieu d’utiliser \u00ab\u00a0Cliquez ici\u00a0\u00bb comme texte du lien, utilisez quelque chose qui d\u00e9crit le lien comme \u00ab\u00a0Notre blog\u00a0\u00bb. Idem pour les boutons. “Envoyer” est sec et g\u00e9n\u00e9rique, utilisez plut\u00f4t quelque chose qui d\u00e9crit l’action que l’utilisateur entreprend, comme “S’abonner” ou “Envoyer un message”.<\/p>\n

    <\/span>Libell\u00e9s et descriptions des champs<\/span><\/h3>\n

    \"Formulaire<\/p>\n

    Lorsque vous r\u00e9digez des \u00e9tiquettes, assurez-vous qu’elles sont significatives et dites \u00e0 l’utilisateur, de mani\u00e8re claire et concise, ce qu’il doit remplir. Pour les meilleurs param\u00e8tres d’accessibilit\u00e9, placez vos balises sur les entr\u00e9es de champ o\u00f9 elles sont clairement visibles et n’incluent pas de code HTML ou de liens, car cela peut d\u00e9router les lecteurs d’\u00e9cran.<\/p>\n

    Si vous utilisez un plugin de formulaire, vous aurez \u00e9galement la possibilit\u00e9 de saisir des descriptions de champs. Ceux-ci sont facultatifs, mais vous pouvez les utiliser si vous avez besoin de fournir des informations suppl\u00e9mentaires sur le champ.<\/p>\n

    <\/span>Contraste de couleur<\/span><\/h3>\n

    Les couleurs utilis\u00e9es sur votre site Web sont un facteur d’accessibilit\u00e9 important. Le contraste de couleur fait r\u00e9f\u00e9rence \u00e0 la diff\u00e9rence de lumi\u00e8re entre la source de premier plan et la couleur d’arri\u00e8re-plan. Des couleurs mal choisies pour vos formulaires peuvent rendre la lecture difficile pour les personnes, en particulier celles qui ont une d\u00e9ficience visuelle.<\/p>\n

    En ce qui concerne WordPress, la couleur de vos formulaires est g\u00e9n\u00e9ralement d\u00e9termin\u00e9e par votre th\u00e8me, mais vous pouvez la remplacer en ajoutant vos propres styles CSS personnalis\u00e9s. N’oubliez pas non plus de ne pas faire r\u00e9f\u00e9rence \u00e0 la couleur dans les instructions de votre formulaire. Par exemple, ne dites pas \u00ab\u00a0cliquez sur le bouton vert pour continuer\u00a0\u00bb car cela peut causer des probl\u00e8mes aux utilisateurs daltoniens.<\/p>\n

    La taille et le poids de la police sont \u00e9galement des options d’accessibilit\u00e9 importantes. Assurez-vous que la police que vous choisissez pour vos formulaires est claire et lisible. Il existe plusieurs plugins, tels que One Click Accessibility, qui permettent aux utilisateurs de visualiser votre site Web en utilisant diff\u00e9rentes combinaisons de couleurs.<\/p>\n

    <\/span>Logique conditionnelle<\/span><\/h3>\n

    Si vos formulaires contiennent une logique conditionnelle, assurez-vous que cela n’a pas d’impact sur l’accessibilit\u00e9. Par exemple, n’utilisez jamais de logique conditionnelle pour masquer le bouton \u00ab\u00a0Envoyer\u00a0\u00bb.<\/p>\n

    <\/span>reCAPTCHA<\/span><\/h3>\n

    \"Exemple<\/p>\n

    Bien que les CAPTCHA et les reCAPTCHA puissent \u00eatre une partie importante de votre strat\u00e9gie anti-spam, ils sont un cauchemar en mati\u00e8re d’accessibilit\u00e9. Les CAPTCHA demandent souvent aux utilisateurs de renseigner des informations ou de s\u00e9lectionner certaines images \u00e0 l’\u00e9cran. Cela entra\u00eene non seulement une mauvaise exp\u00e9rience utilisateur, mais constitue \u00e9galement un d\u00e9fi pour les personnes souffrant de handicaps cognitifs et\/ou visuels.<\/p>\n

    Au lieu de CAPTCHA, utilisez des alternatives telles que des champs de miel ou des plugins de spam ax\u00e9s sur la confidentialit\u00e9 qui n’affectent pas l’exp\u00e9rience utilisateur. Le favori connu dans ce domaine est Akismet, bien qu’il ait un prix.<\/p>\n

    <\/span>Erreur de message<\/span><\/h3>\n

    Assurez-vous que les messages d’erreur sont exploitables et clairement \u00e9crits. Vos messages d’erreur doivent fournir des commentaires sur les erreurs ou les omissions et expliquer comment les corriger. Par exemple, au lieu de dire \u00ab il y a eu une erreur \u00bb, vous pourriez dire \u00ab votre mot de passe \u00e9tait trop court. Veuillez saisir un mot de passe de 12 caract\u00e8res ou plus \u00bb.<\/p>\n

    N’oubliez pas que votre travail consiste \u00e0 aider l’utilisateur \u00e0 remplir ses formulaires pour en faire un processus rapide et agr\u00e9able. Les messages d’erreur qui ne fournissent pas suffisamment d’informations peuvent provoquer de l’anxi\u00e9t\u00e9 et de la frustration.<\/p>\n

    <\/span>Navigation au clavier<\/span><\/h3>\n

    De nombreux utilisateurs handicap\u00e9s ne peuvent pas utiliser de souris, alors assurez-vous que vos formulaires sont navigables en utilisant uniquement la touche de tabulation. Cela inclut la fermeture des messages d’erreur et le retour aux \u00e9tapes pr\u00e9c\u00e9dentes.<\/p>\n

    <\/span>Balisage HTML solide<\/span><\/h3>\n

    Si vous pr\u00e9f\u00e9rez cr\u00e9er des formulaires \u00e0 partir de z\u00e9ro, il est important d’utiliser un code HTML correct, car c’est ce que les lecteurs d’\u00e9cran utilisent lors de la transmission d’informations. Par exemple, les balises doivent utiliser la balise et non un <\/p>\n

    \u00e9tiqueter.<\/p>\n

    De plus, les champs avec plusieurs options de saisie doivent utiliser le <\/p>\n

    \u00e9tiquette car elle indique aux lecteurs d’\u00e9cran quelles options appartiennent \u00e0 quel champ.<\/p>\n

    <\/span>Formulaires accessibles pour WordPress\u00a0: r\u00e9flexions finales<\/span><\/h2>\n

    L’accessibilit\u00e9 du Web est la pratique consistant \u00e0 rendre votre site Web utilisable par des personnes ayant des handicaps physiques et cognitifs.<\/p>\n

    Les formulaires sont l’un des aspects les plus importants d’un site Web, car ils constituent un pont entre vous et vos clients. Cependant, les formulaires sont \u00e9galement connus pour avoir des probl\u00e8mes d’accessibilit\u00e9 et n\u00e9cessitent donc une attention particuli\u00e8re.<\/p>\n

    Prendre le temps de cr\u00e9er des formulaires accessibles peut vous aider \u00e0 toucher un public plus large, \u00e0 booster votre r\u00e9f\u00e9rencement et \u00e0 am\u00e9liorer l’exp\u00e9rience utilisateur globale des visiteurs de votre site Web. Les formulaires accessibles doivent inclure un langage clair, des balises descriptives et un balisage HTML appropri\u00e9.<\/p>\n

    Bien qu’ils soient \u00e0 la mode pour emp\u00eacher le spam, les CAPTCHA pr\u00e9sentent un certain nombre de probl\u00e8mes d’accessibilit\u00e9 et devraient \u00eatre remplac\u00e9s par des alternatives moins intrusives telles que des plugins anti-spam qui s’ex\u00e9cutent en arri\u00e8re-plan ou des champs de miel invisibles.<\/p>\n

    Pr\u00eat \u00e0 commencer \u00e0 cr\u00e9er des formulaires accessibles pour votre site WordPress ? La mise en \u0153uvre des strat\u00e9gies ci-dessus vous donnera une longueur d’avance sur la plupart des autres sites Web, alors lancez-vous d\u00e8s aujourd’hui\u00a0!<\/p>\n

    \n
    \n

    Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n