Discussion :

[laurentSc]

Bonjour,
tout d'abord, ne trouvant pas de forum adapté, je pose ma question ici :

Un déficient visuel me dit que le formulaire de cette page wordpress est non accessible aux lecteurs d'écran. Comment faire ?
https://vercorshandisport.org/event/...du-06-09-2025/

[Stellar7]

bonjour,

J'irai dans le sens de ce qu'on t'a dit : ce n'est pas accessible.

Dans ce genre de cas, il faut reprendre la page avec l'aide de quelqu'un qui peut vérifier l'accessibilité. Et surtout voir si les corrections sont possibles : Wordpress ou le template utilisé permettent-ils de faire les modifications ?
Je pense que oui si l'on parle de la hiérarchisation des titres (les hx). Mais probablement moins pour :
- la définition des régions, et les liens d'accès rapide,
- le fonctionnement du dynamique, p.ex. les menus déroulants qui ne sont absolument pas standards (voir les pratiques ARIA, et là on parle de codage javascript),
- la bonne gestion des attributs ARIA : le menu principal est affublé d'un aria-expanded="false" alors qu'il est bien affiché, mais la balise ul ne possède pas d'aria-label, etc.

Bref, il faut revoir le code et les "bonnes pratiques" avec laide d'un d'un spécialiste.
bonne journée

[laurentSc]

Merci pour ta réponse.
Je vais me tourner vers un spécialiste (j'en connais).
Par contre,
1- tu me parles de voir avec quelqu'un à même de vérifier l'accessibilité. Serait-il utile de passer du temps pour apprendre à utiliser la version gratuite de jaws et tester moi-même l'accessibilité ?
2- tu confirmes la non accessibilité du formulaire : comment le constates tu ?
3- tu mentionnes des menus déroulants. Où les vois tu ? Il n'y en a pas dans le formulaire...

[Toufik83]

Bonjour,

Je n'ai pas pu obtenir les détails spécifiques sur les problèmes d'accessibilité du formulaire sur la page que vous avez fournie. Cependant, je peux vous donner des conseils généraux sur la façon de rendre un formulaire WordPress accessible aux lecteurs d'écran.

Pour améliorer l'accessibilité d'un formulaire WordPress pour les lecteurs d'écran, voici les points clés à vérifier et à implémenter :

Libellés explicites (<label> pour les champs) : Chaque champ de formulaire (texte, case à cocher, bouton radio, etc.) doit avoir un libellé (<label>) qui lui est explicitement associé en utilisant l'attribut for qui correspond à l' id du champ. Cela permet aux lecteurs d'écran de lire le libellé pour que l'utilisateur sache à quoi sert le champ.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" />

Champs obligatoires : Indiquez clairement les champs obligatoires, idéalement avec un texte visible (ex: "Champ obligatoire") et en utilisant l'attribut aria-required="true".

Messages d'erreur clairs et accessibles : Lorsque des erreurs de validation se produisent, les messages doivent être clairs, descriptifs et annoncés aux lecteurs d'écran. Utilisez aria-live="assertive" sur un conteneur de message d'erreur pour que les lecteurs d'écran annoncent immédiatement les erreurs. Les erreurs doivent être associées au champ concerné via aria-describedby.

Instructions et aide contextuelle : Si un champ nécessite des instructions spécifiques (ex: format de date), fournissez-les de manière accessible, par exemple avec aria-describedby pointant vers un élément d'aide.

Ordre de tabulation logique : Assurez-vous que l'ordre de tabulation (lorsque l'utilisateur navigue avec la touche Tab) est logique et suit l'ordre visuel des champs.

Boutons descriptifs : Les boutons de soumission doivent avoir un texte clair et descriptif (ex: "Envoyer le message", "S'inscrire") plutôt que des termes génériques comme "Cliquez ici".

Regroupement de champs (<fieldset> et <legend>) : Pour les groupes de champs liés (comme les boutons radio ou les cases à cocher), utilisez les éléments <fieldset> et <legend> pour les regrouper sémantiquement. La balise <legend> fournit un titre pour le groupe.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<fieldset>
    <legend>Choisissez votre option :</legend>
    <input type="radio" id="option1" name="choix" value="1">
    <label for="option1">Option 1</label><br>
    <input type="radio" id="option2" name="choix" value="2">
    <label for="option2">Option 2</label>
</fieldset>

Accessibilité des éléments personnalisés : Si le formulaire utilise des éléments de formulaire personnalisés (par exemple, des sélecteurs de date, des sliders), assurez-vous qu'ils implémentent correctement les attributs ARIA (comme role, aria-labelledby, aria-controls, aria-expanded, etc.) et qu'ils sont navigables au clavier.

Tests avec des lecteurs d'écran : La meilleure façon de s'assurer de l'accessibilité est de tester le formulaire avec de vrais lecteurs d'écran (NVDA, JAWS sur Windows ; VoiceOver sur macOS ; TalkBack sur Android).

Si vous utilisez un plugin de formulaire WordPress, vérifiez ses options d'accessibilité. Les plugins populaires comme Gravity Forms, WPForms, ou Contact Form 7 ont souvent des fonctionnalités d'accessibilité intégrées ou des extensions pour améliorer cela.

[laurentSc]

Merci pour ces conseils. Je vais les traiter un par un. Cependant, dès le premier (les libellés), vous me donnez un code html. J'utilise pour créer les formulaires l'extension la plus connue : CF7. Et pour l'utiliser, ce n'est pas du code html, mais un code spécial. Par exemple :

<p><label> Votre nom :
[text* votre-nom placeholder "votre nom"] </label>
</p>

[mathieu]

avec l'extension contact form 7 vous pouvez rajouter un identifiant comme cela :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<label for="champ_votre_nom">
    Votre nom&nbsp;: 
    [text* votre-nom id:champ_votre_nom placeholder "votre nom"]
</label>

vous pouvez voir la documentation officielle là :
https://contactform7.com/docs/