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

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 à 19: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 »