« Créer des formulaires HTML accessibles » : différence entre les versions

De April MediaWiki
Aller à la navigationAller à la recherche
Ligne 5 : Ligne 5 :




== Un exemple concret ==
== Informations sur formulaires accessible ==


* 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:
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
 
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>, <TEXTAREA>
  <A>, <AREA>, <BUTTON>, <INPUT>, <OBJECT>, <SELECT>, <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, puis "2", puis...
 
* Pour l'indice vocal associé avec un champ "input", "select", "area" ou "textarea", 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=""', qui doit corréspondre à un attribut 'id=""' sur l'élément à libelliser.
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, puis "2", puis...
* Donc, on remplace notre HTML
 
Pour l'indice vocal associé avec un champ "input", "select", "area" ou "textarea", 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=""', qui doit corréspondre à un attribut 'id=""' sur l'élément à libelliser.
 
Donc, on remplace notre HTML
<pre>
<pre>
  <form action="next_step.php">
  <form action="next_step.php">
Ligne 29 : Ligne 34 :
</pre>
</pre>


== Un exemple précis: Page d'accueil SYMPA ==


* Donc, dans le cas concrèt de la page d'accueil SYMPA pour le groupe accessibilité, il faudrait modifier le formulaire d'inscription qui est actuellement:
Dans le cas concrèt de la page d'accueil SYMPA pour le groupe accessibilité, il faudrait modifier le formulaire d'inscription qui est actuellement:
<pre>
<pre>
  <form action="/wws" method="POST">
  <form action="/wws" method="POST">
Ligne 55 : Ligne 61 :
* Donc, rajouter 3 attributs & modifier très légèrement le champ de text, et c'est bon.
* Donc, rajouter 3 attributs & modifier très légèrement le champ de text, et c'est bon.


[[Category:Accessibilite]]


== Remerciements ==
== Remerciements ==


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

Version du 6 février 2010 à 16:02

Objectif

  • créer un formulaire web accessible.


Informations sur formulaires accessible

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

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>, <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, puis "2", puis...

Pour l'indice vocal associé avec un champ "input", "select", "area" ou "textarea", 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=""', qui doit corréspondre à un attribut 'id=""' sur l'élément à libelliser.

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>

Un exemple précis: Page d'accueil SYMPA

Dans le cas concrèt de la page d'accueil SYMPA pour le groupe accessibilité, 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