Rendre accessible votre formulaire Contact Form 7

Accueil > Articles > WordPress > Rendre accessible votre formulaire Contact Form 7
11 avril 2016WordPress

Code par défaut

Le plugin WordPress Contact Form 7 est très utilisé mais ne propose pas par défaut un formulaire accessible. Par contre, il permet de changer le code généré via l’interface d’administration du plugin.

Voici le code présent par défaut dans l’admistration :

<p> Votre nom (obligatoire)<br />
    [text your-name] </p>

<p> Votre email (obligatoire)<br />
    [email* your-email] </p>

<p> Sujet<br />
    [text your-subject] </p>

<p> Votre message<br />
    [textarea your-message] </p>

<p> [submit "Envoyer"] </p>

Les aveugles ou malvoyants utilisent un lecteur d’écran leur permettant d’écouter le contenu des pages Web.

Voici ce qu’un utilisateur de lecteur d’écran (ici NVDA) entend lorsqu’il essaye de remplir ce formulaire, en se déplaçant d’un champ de saisie à l’autre avec la touche TAB :

Voici la transcription textuelle :

  • TAB édition obligatoire avec auto complétion vide
  • TAB édition obligatoire avec auto complétion vide
  • TAB édition avec auto complétion vide
  • TAB édition multi-lignes vide
  • TAB cliquable envoyer bouton

Les étiquettes visuellement présentes ne sont pas vocalisées par le lecteur d’écran. Ainsi, l’internaute ne sait pas quelle information il doit saisir.

Code généré

<form novalidate="novalidate" class="wpcf7-form" method="post" action="...">

Votre nom (obligatoire)
<span class="wpcf7-form-control-wrap your-name">
  <input type="text" aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" value="" name="your-name">
</span> 

Votre email (obligatoire)
<span class="wpcf7-form-control-wrap your-email">
  <input type="email" aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40" value="" name="your-email">
</span>

Sujet
<span class="wpcf7-form-control-wrap your-subject">
  <input type="text" aria-invalid="false" class="wpcf7-form-control wpcf7-text" size="40" value="" name="your-subject">
</span> 

Votre message
<span class="wpcf7-form-control-wrap your-message">
  <textarea aria-invalid="false" class="wpcf7-form-control wpcf7-textarea" rows="10" cols="40" name="your-message"></textarea>
</span>

<input type="submit" class="wpcf7-form-control wpcf7-submit" value="Envoyer">

</form>

Modification du formulaire dans l’administration

Pour permettre la vocalisation des étiquettes, il faut qu’elles soient liées aux champs. Le code proposé par le plugin est modifié dans la partie administration comme suite :

<p><label for="your-name">Votre nom (obligatoire)<br />
 [text* your-name id:your-name] </label></p>

<p><label for="your-email">Votre Email (obligatoire)<br />
 [email* your-email id:your-email] </label></p>

<p><label for="your-subject">Sujet<br />
 [text your-subject id:your-subject] </label></p>

<p><label for="your-message">Votre message <br />
 [textarea your-message id:your-message] </label></p>

<p>[submit "Envoyer"]</p>

La balise <label> est utilisée pour chaque étiquette avec son attribut « for ». Elle englobe également le champ à qui l’attribut id a été rajouté. La valeur de l’attribut « for » est identique à la valeur de l’attribut « id », permettant ainsi la vocalisation de l’étiquette par le lecteur d’écran.

Voici ce qu’un utilisateur de lecteur d’écran (ici NVDA) entend maintenant lorsqu’il remplit le formulaire :

  • TAB votre nom obligatoire édition obligatoire avec auto complétion vide
  • TAB votre email obligatoire édition obligatoire avec auto complétion vide
  • TAB sujet édition avec auto complétion vide
  • TAB votre message édition multi-lignes obligatoire vide
  • TAB cliquable envoyer bouton

Nouveau code généré

<form novalidate="novalidate" class="wpcf7-form" method="post" action="...">

<p>
<label for="your-name">Votre nom (obligatoire)
 <span class="wpcf7-form-control-wrap your-name">
    <input type="text" aria-invalid="false" aria-required="true" id="your-name" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" value="" name="your-name">
 </span> 
</label>
</p>

<p>
<label for="your-email">Votre Email (obligatoire)
 <span class="wpcf7-form-control-wrap your-email">
   <input type="email" aria-invalid="false" aria-required="true" id="your-email" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40" value="" name="your-email">
 </span> 
</label>
</p>

<p>
<label for="your-subject">Sujet
 <span class="wpcf7-form-control-wrap your-subject">
   <input type="text" aria-invalid="false" id="your-subject" class="wpcf7-form-control wpcf7-text" size="40" value="" name="your-subject">
 </span> 
</label>
</p>

<p>
<label for="your-message">Votre message
 <span class="wpcf7-form-control-wrap your-message">
   <textarea aria-invalid="false" id="your-message" class="wpcf7-form-control wpcf7-textarea" rows="10" cols="40" name="your-message"></textarea>
 </span> 
</label>
</p>

<p><input type="submit" class="wpcf7-form-control wpcf7-submit" value="Envoyer"></p>

</form>