Différences entre les versions de « Créer des formulaires HTML accessibles »

De April MediaWiki
Aller à la navigationAller à la recherche
(Nouvelle page : == 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/cl...)
 
 
(6 versions intermédiaires par un autre utilisateur non affichées)
Ligne 1 : Ligne 1 :
−
 
 
== Objectif ==
 
== Objectif ==
  
 
* créer un formulaire web accessible.
 
* créer un formulaire web accessible.
  
−
== Documentation ==
+
== Informations générales ==
−
 
 
−
* 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 ==
+
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
+
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:
−
rencontrés dans la page HTML. Les éléments suivantes sont
+
<A>, <AREA>, <BUTTON>, <INPUT>, <OBJECT>, <SELECT>, <TEXTAREA>
−
sélectionnable: <A> <AREA> <BUTTON>, <INPUT>, <OBJECT>, <SELECT> et
 
−
<TEXTAREA>
 
  
−
* Puis, on peut modifier cet ordre naturel avec l'attribut "tabindex" -
+
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...
−
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"
+
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.
−
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
+
Donc, on remplace notre HTML
 
<pre>
 
<pre>
−
<form action="next_step.php">
+
<form action="next_step.php">
−
Type your name here: <input type="text" name="name" size="30">
+
Type your name here: <input type="text" name="name" size="30">
  
−
<input type="submit" text="Next step">
+
<input type="submit" text="Next step">
−
</form>
+
</form>
 
</pre>
 
</pre>
−
* par:
+
par:
 
<pre>
 
<pre>
−
<form action="next-step.php">
+
<form action="next-step.php">
−
<label for="name">Type your name here</label>:
+
  <label for="name">Type your name here</label>:
−
<input type="text" name="name" id="name" size="30">
+
  <input type="text" name="name" id="name" size="30">
  
−
<input type="submit" text="Next step">
+
  <input type="submit" text="Next step">
−
</form>
+
</form>
 
</pre>
 
</pre>
  
 +
== Un exemple précis: Page d'accueil SYMPA ==
  
−
* Donc, dans le cas concrèt de notre page d'accueil, il faudrait modifier le formulaire d'inscription qui est actuellement:
+
Dans le cas concret de [http://www.april.org/wws/subrequest/accessibilite la page d'abonnement 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">
 
         <font color="#1d3759"><b>Votre adresse de messagerie :</b></font>
 
         <font color="#1d3759"><b>Votre adresse de messagerie :</b></font>
 
         <input name="email" size="30"><br>
 
         <input name="email" size="30"><br>
Ligne 52 : Ligne 42 :
 
         <input name="action" value="subrequest" type="hidden">
 
         <input name="action" value="subrequest" type="hidden">
 
         <input name="action_subrequest" value="valider" type="submit">
 
         <input name="action_subrequest" value="valider" type="submit">
−
</form>
+
</form>
 
</pre>
 
</pre>
−
* En:
+
en:
 
<pre>
 
<pre>
−
<form action="/wws" method="POST">
+
<form action="/wws" method="POST">
 
         <font color="#1d3759"><b><label for="email">Votre adresse de
 
         <font color="#1d3759"><b><label for="email">Votre adresse de
 
messagerie</label> :</b></font>
 
messagerie</label> :</b></font>
Ligne 64 : Ligne 54 :
 
         <input name="action_subrequest" value="valider" type="submit"
 
         <input name="action_subrequest" value="valider" type="submit"
 
tabindex="2">
 
tabindex="2">
−
</form>
+
</form>
 
</pre>
 
</pre>
  
−
* Donc, rajouter 3 attributs & modifier très légèrement le champ de text,
+
* Donc, rajouter 3 attributs & modifier très légèrement le champ de text, et c'est bon.
−
et c'est bon.
 
−
 
 
  
 
== 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
 +
 +
[[Category:Accessibilité]]

Dernière version du 1 mai 2010 à 21:45

Objectif[modifier]

  • créer un formulaire web accessible.

Informations générales[modifier]

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[modifier]

Dans le cas concret de la page d'abonnement 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[modifier]

  • Dave Neary, contenu original posté sur la liste de diffusion accessibilité de l'april
Récupérée de « http://wiki.april.org/index.php?title=Créer_des_formulaires_HTML_accessibles&oldid=27636 »