Créer des formulaires HTML accessibles

Objectif

• créer un formulaire web accessible.

Documentation

• Et cette page donne des exemples de formulaires accessibles de toute type: http://www.tbs-sct.gc.ca/clf2-nsi2/tb-bo/td-dt/mfa-rcfa-fra.asp

Un exemple concret

• D'abord, l'ordre logique des champs est l'ordre dans lequel ils sont

rencontrés dans la page HTML. Les éléments suivantes sont sélectionnable: <A> <AREA> <BUTTON>, <INPUT>, <OBJECT>, <SELECT> et <TEXTAREA>

• Puis, on peut modifier cet ordre naturel avec l'attribut "tabindex" -

les éléments avec cet attribut sons sélectionné d'abord, et dans l'ordre des valeurs de l'attribut "tabindex" - donc, tabindex="1" en premier, puiis "2", puis...

• Pour l'indice vocal associé avec un champ "input", "select", "textarea"

ou "button", il y a l'élément "label" qui libéllise un champ d'entrée. On indique que le libellé est destiné à un contrôle donnée par l'attribut 'for=""'.

• Donc, on remplace notre HTML

<form action="next_step.php">
Type your name here: <input type="text" name="name" size="30">

<input type="submit" text="Next step">
</form>

• par:

<form action="next-step.php">
<label for="name">Type your name here</label>:
<input type="text" name="name" id="name" size="30">

<input type="submit" text="Next step">
</form>

• Donc, dans le cas concrèt de notre page d'accueil, il faudrait modifier le formulaire d'inscription qui est actuellement:

<form action="/wws" method="POST">
         <font color="#1d3759"><b>Votre adresse de messagerie :</b></font>
         <input name="email" size="30"><br>
         <input name="list" value="accessibilite" type="hidden">
         <input name="action" value="subrequest" type="hidden">
         <input name="action_subrequest" value="valider" type="submit">
</form>

• En:

<form action="/wws" method="POST">
         <font color="#1d3759"><b><label for="email">Votre adresse de
messagerie</label> :</b></font>
         <input name="email" size="30" id="email" tabindex="1"><br>
         <input name="list" value="accessibilite" type="hidden">
         <input name="action" value="subrequest" type="hidden">
         <input name="action_subrequest" value="valider" type="submit"
tabindex="2">
</form>

• Donc, rajouter 3 attributs & modifier très légèrement le champ de text,

et c'est bon.

Remerciements

• Dave Neary, contenu original posté sur la liste de diffusion accessibilité de l'april