Accessibilité des formulaires

WCAG : pas de recommandation spécifique mais plusieurs points de contrôle traitent des formulaires (10.2, 12.4,  9.4,  9.5, 10.4)

Préciser la fonction d'un champ avec la balise <label>

=> Permet de définir sans ambiguïté à quel texte associé correspond le champ de saisie. Au passage de champ en champ (touche TAB) la synthèse vocale annonce l'intitulé du champ courant.

- si le label et le champ se suivent directement :
<label>Nom<input type="text" name="nom" /> </label>

- attributs "for" et "id" du champ  permet l’insertion d’autres éléments HTML entre le label et le champ texte qui lui est associé : les labels ne se retrouvent alors pas toujours à gauche du champ, sans le label for, le lecteur d’écran est incapable de rendre correctement l’information

<td><label for="nom">Votre nom</label></td>
<td><input type="text" id="nom" name="nom"/></td>
<td><input type="checkbox" name="voiture" id="voiture" /></td>
<td><label for="voiture">J’utilise ma propre voiture</label></td>

=> dans l'ex. ci-dessus sans le label for le lecteur d’écran serait incapable de rendre correctement l’information.

=>  grâce à l'utilisation de label l'activation d'un élément du formulaire est rendue possible par un simple clic sur le contenu de l'intitulé (confort d'utilisation  / vision réduite ou une mobilité limitée des membres supérieurs :  cases à cocher ou les boutons radio  difficiles à atteindre de manière précise avec la souris.

Tester avec cet exemple de formulaire (lien cours 1er semestre)

=> l'indication / champ obligatoire doit être intégrée au label pour être correctement lue par les aides techniques : voir égalemefêtent ex. ci-dessus.

Longs formulaires : balises <fieldset> et <legend>

Subdiviser les longs formulaires de manière logique en regroupant les champs concernés par le même sujet dans une balise fieldset.
Leur associer une description claire et précise avec la balise legend.

Extrait code de  ex. ci-dessus (lien) :

<fieldset><legend>Identité</legend>
<p>
<label for="nom" class="champ">Votre nom
<span class="obligatoire"> * </span></label><br />
<input type="text" title="tappez votre nom" maxlength="50" size="30"
name="nom" id="nom" />
</p><p>
<label for="prenom" class="champ">Votre pr&eacute;nom
<span class="obligatoire"> * </span></label><br />
<input type="text" title="tappez votre pr&eacute;nom" maxlength="50"
size="30" name="prenom" id="prenom" />
</p>
</fieldset>

=> avec Jaws lorsqu'on passe de champ en champ dans la rubrique « Identité », on entend « Identité : nom »,
« Identité : prénom »

Longues listes : <optgroup>

Facilite la lisibilité pour tous les internautes.

><select name="pays">
<optgroup label="Europe">
<option value="fr">France</option>
<option value="it">Italie</option>
</optgroup> <optgroup label="Asie">
<option value="ch">Chine</option>
</optgroup>
</select>

Accessibilité du bouton radio

=> Difficile à lire pour les personnes mal-voyantes et à atteindre par les personnes ayant des difficultés motrices.

Utilisation d'éléments de sélection comme alternative aux boutons radio (conseils sur un site officiel canadien) : remplacement par des  <select>

Contrôle de saisie et validation des formulaires

Libellé explicite des boutons

Ils doivent signifier la fonction
Par ex. « Envoyer », « Annuler » ou « Chercher » mais proscrire « Cliquez ici »

<form action="..." method="...">
<label for="recherche">Recherche dans le site</label>
<input type="text" name="q3" id="recherche" value="" />
<input type="submit" value="Lancer la recherche" />
</form>

Exemple sonore sur Accessiweb

http://www.accessiweb.org/fr/guide_accessiweb/guide-accessiweb-fiche-11-2.html : exemples de mauvaise et de bonnes pratiques dans l'organisation des champs et la formulation..

Images pour valider un formulaire

Submit en Javascript + image :  alternative  avec NOSCRIPT (voir aussi ci-dessous § JavaScript)

<a href="javascript: document.forms.formulaire.submit()"> <img
src="valide.gif"> </a>
<noscript>
<input type="submit" name="Submit" value="Envoyer">
</noscript>

Ou plus simplement un bouton de type image avec l'attribut alt.

<input name="Champimage" type="image" src="valider.gif"
width="5" height="5" border="0" alt="Envoyer le formulaire">

Mais on fait maintenant de si belles choses en texte simple avec les CSS...

Si JavaScript dans les contrôles de saisie proposer un traitement similaire côté serveur (critère 7.1 et critère 11.7).

Scénario proposé par Accessiveb :

  1. Remplissage du formulaire par l'internaute.
  2. Validation avec envoi au serveur des données.
  3. Vérification des données transmises par le formulaire
  4. Si une erreur est détectée, rechargement chez le client du formulaire avec les données qu'il a saisi. Le développeur prendra soin de transmettre également les champs posant problèmes avec les erreurs rencontrés (longueur du champ, type de données, etc...).
  5. Affichage de manière pertinente des erreurs au-dessus du formulaire avec un message clair indiquant le type de l'erreur. Ce scénario peut s'appliquer aussi bien sur une plate-forme utilisant PHP que ASP. 
Lire http://openweb.eu.org/articles/validation_formulaire/

Messages d'erreurs

Les internautes aveugles trouveront très difficile de recevoir les messages d'erreur dans une pop-up. Lorsqu'ils auront fini de lire le contenu de la pop-up , le système les ramènera au début de la page d'origine les obligeant à  la reparcourir pour trouver l'endroit de l'erreur. Il vaut mieux réafficher le formulaire en y intégrant les messages d'erreur, c'est d'ailleurs plus commode pour tous.

Navigation au clavier

L'ordre de tabulation doit permettre de parcourir le formulaire  avec la touche TAB du clavier dans le même ordre et la même logique que son affichage à l'écran : veiller à ce que les labels et champs associés se suivent directement dans le code source de la page (attention aux tableaux imbriqués)
Sinon utiliser tabindex  :

<input type="text" name="prenom" tabindex="10">
<input type="text" name="nom" tabindex="20">

L'attribut tabindex  crée un ordre de tabulation déterminé. Il peut être associé aux balises  <button>, <input>, <label>, <legend> des formulaires ainsi qu'aux balises <a>, <area>, et <textarea>.

Mais en principe pas nécessaire si le formulaire et la navigation dans la page sont bien pensés, ils ne doit pas être nécessaire.
Cf. Histoire de tabindex sur blog.alsacreations.com   

Ergonomie 

En savoir +