IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

WordPress PHP Discussion :

non accessibilité du formulaire pour les lesteurs d'écran


Sujet :

WordPress PHP

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 493
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 493
    Billets dans le blog
    1
    Par défaut non accessibilité du formulaire pour les lesteurs d'écran
    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/
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  2. #2
    Membre chevronné
    Homme Profil pro
    web a11y
    Inscrit en
    Avril 2014
    Messages
    191
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : web a11y
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2014
    Messages : 191
    Par défaut
    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

  3. #3
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 493
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 493
    Billets dans le blog
    1
    Par défaut
    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...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 513
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 513
    Par défaut
    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.

  5. #5
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 493
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 493
    Billets dans le blog
    1
    Par défaut
    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>
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  6. #6
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 670
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 670
    Par défaut
    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/

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 9
    Dernier message: 16/01/2020, 14h21
  2. [PDO] Recuperer les valeurs d'un formulaire pour les modifier
    Par macfly95 dans le forum PHP & Base de données
    Réponses: 0
    Dernier message: 19/10/2013, 16h57
  3. [2012] Non respect des couleurs pour les instances 2008R2
    Par clementratel dans le forum Administration
    Réponses: 2
    Dernier message: 27/05/2013, 15h40
  4. comment créer un formulaire pour les Statistiques
    Par nurdinosda dans le forum VB 6 et antérieur
    Réponses: 1
    Dernier message: 07/07/2011, 12h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo