Les formulaires générés

Le besoin

11.1 Dans les formulaires générés automatiquement, tous les champs ont une étiquette pertinente.

11.3 Dans les formulaires générés automatiquement, les champs de même nature sont regroupés avec la balise <fieldset>, et ont une balise <legend> pertinente.

11.5 Dans les formulaires générés automatiquement, les listes de choix <select> sont structurées avec une balise <optgroup> si nécessaire.

11.6 Dans les formulaires générés automatiquement, tous les boutons ont un intitulé pertinent.

Résultat

Les formulaires traités ici sont les formulaires de recherche et de saisie de commentaires proposés par défaut dans WordPress lorsque les fonctions « comment_form() » et « get_search_form() » sont appelées dans le thème ou via l’activation du widget « Chercher ».

  • Tous les champs ont une étiquette pertinente
  • Les balises <fieldset> et <legend> ne sont pas nécessaires
  • Il n’y a pas de liste de choix <select> dans ces formulaires
  • Tous les boutons ont un intitulé pertinent
  • Attribut aria-required pour les champs obligatoires dans le formulaire de commentaires

Code généré par le widget « Chercher »

<form class="search-form" action="http://gta21.accesbilis.fr/" method="get" role="search">
<label>
<span class="screen-reader-text">Rechercher :</span>
<input class="search-field" type="search" title="Rechercher :" name="s" value="" placeholder="Recherche…">
</label>
<input class="search-submit screen-reader-text" type="submit" value="Rechercher">
</form>

code généré par « comment_form() »

<form id="commentform" class="comment-form" novalidate="" method="post" action="http://gta21.accesbilis.fr/wp-comments-post.php">
<p class="comment-notes">
<span id="email-notes">Votre adresse de messagerie ne sera pas publiée.</span>
Les champs obligatoires sont indiqués avec
<span class="required">*</span>
</p>
<p class="comment-form-author">
<label for="author">
Nom
<span class="required">*</span>
</label>
<input id="author" type="text" required="required" aria-required="true" size="30" value="dssdsdsd" name="author">
</p>
<p class="comment-form-email">
<label for="email">
Adresse de contact
<span class="required">*</span>
</label>
<input id="email" type="email" required="required" aria-required="true" aria-describedby="email-notes" size="30" value="dsdssd@gmds.com" name="email">
</p>
<p class="comment-form-url">
<label for="url">Site web</label>
<input id="url" type="url" size="30" value="" name="url">
</p>
<p class="comment-form-comment">
<label for="comment">
Commentaire
<span class="required">*</span>
</label>
<br>
<textarea id="comment" aria-required="true" name="comment"></textarea>
</p>
...
<p class="form-submit">
<input id="submit" class="submit" type="submit" value="Laisser un commentaire" name="submit">
...
</p>
</form>

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *