Formulaires - Accessibilité web

Chapitre accessibilité -> Formulaires

Intro

Dans ce chapitre sur les formulaires pour l'accessibilité, nous allons étudier quelques conseils simples pour rendre vos formulaires plus accessibles

Regroupé les éléments

Regrouper

Pour améliorer l'accessibilité dans votre formulaire, vous devez regrouper les éléments en bloque logique grâce à la balise HTML FIELDSET et LEGEND.Cependant un tableau dans certain cas faire l'affaire.
Exemple de code :
Exemple de code :
<FIELDSET>
  <LEGEND>Informations personnels </LEGEND>
    <LABEL for="lprenom">Prénom: </LABEL>
    <INPUT type="text" id="lprenom" tabindex="1">
    <LABEL for="lnom">Nom: </LABEL>
    <INPUT type="text" id="lnom" tabindex="2">
</FIELDSET>
<FIELDSET>
  <LEGEND>Autres informations </LEGEND>
</FIELDSET>

Exemple de visuel :
Informations personnels
Autres informations


Cette directive, peut être utilisée pour tous les internautes dans le sens ou vous devez structurer votre formulaire pour qu'il soit le plus lisible possible.

Le bon libellé

Associer le libellé

Sortie du contexte visuel de la page, si les éléments du formulaire ne sont pas relié à un libellé, le formulaire peut devenir incompréhensible.

Pour améliorer l'accessibilité dans votre formulaire, vous devez utilisez la balise HTML LABEL et son attribut FOR. Cette dernière va associer le libellé à un des champs du formulaire.
Exemple de code :
<LABEL for="fnom">
  Votre nom
</LABEL>
<INPUT type="text" id="fnom" name="nom">


Si cela vous est impossible, mettez un attribut TITLE dans chaque élément du formulaire.
Exemple de code :
Votre nom <INPUT type="text" name="nom" TITLE="Votre nom">

Cheminement logique dans le formulaire

cheminement logique

Il est nécessaire pour les personnes navigant au clavier de pouvoir atteindre chaque champ du formulaire.

Pour amélioré l'accessibilité dans votre formulaire, vous devez utilisez l'attribut TABINDEX des balises HTML input, select ou textarea, etc...., qui va spécifier l'ordre de tabulation (utilisation de la touche tabulation) des éléments de votre formulaire formulaire.
Cette directive, peut être utilisé pour tous les internautes.
Exemple de code :
<INPUT type="text" name="prenom" TABINDEX="1">
<INPUT type="text" name="nom" TABINDEX="2">

Raccourcie clavier

Accesskey

Pour améliorer l'accessibilité dans votre formulaire, vous pouvez spécifier des raccourcis claviers pour donner le foc us à un champ de votre formulaire.

Pour cela, utilisez l'attribut ACCESSKEY de la balise HTML LABEL.
Exemple de code :
<LABEL for="fnom" accesskey="N">
Votre nom
</LABEL>
<INPUT type="text" name="nom" id="fnom">

Regrouper les options

Regrouper

Il se peut que dans certain cas, vous ayez a mettre des listes longues. Vous devez donc faciliter la lisibilité de ces dernières.
Pour améliorer l'accessibilité dans votre formulaire, vous pouvez dans le cas d'une liste longue regrouper les options grâce a la balise HTML OPTGROUP.
Exemple de code :
<select name="menu">
  <OPTGROUP label="label0">
    <option value="accessible">Accessibilité 01</option>
    <option value="accessible">Accessibilité 02</option>
  </OPTGROUP>
  <OPTGROUP label="label1">
    <option value="accessible">Accessibilité 11</option>
    <option value="accessible">Accessibilité 12</option>
  </OPTGROUP>
</select>

Images boutons

Images

L'utilisation des images pour valider un formulaire, oblige la création d'un lien en javascript <a href= javascript> .
Cela peut poser des problèmes pour les navigateurs spécialisés qui ne comprennent pas le javascript.

Vous pouvez utiliser une alternative la balise HTML NOSCRIPT.
Exemple de code :
<a href="javascript: document.forms.formulaire.submit()"> <img src="valide.gif"> </a>
<noscript>
  <input type="submit" name="Submit" value="Envoyer">
</noscript>

Si vous voulez utiliser des image <input type="image">, mais cela crée un bouton de type submit pensez a mettre un texte explicatif avec l'attribut ALT.
Exemple de code :
<input name="Champimage" type="image" src="valide.gif" width="5" height="5" border="0" alt="Envoyer le formulaire">