Re: [Accessibilite] Re: [Accessibilite] Accessibilit é du formulaire d'inscription à la liste

[florent andre <flo.andre AT gmail.com>]

 

Merci Dave pour le partage de cette recherche.

 

J'en ai fait un document sur le wiki qui pourra aider nos futur développeur en "quête d'accessibilité" :) : http://wiki.april.org/w/Cr%C3%A9er_des_formulaires_HTML_accessibles

 

Pour permettre l'intégration au mieux de cette amélioration au sein de l'april, le mieu est à mon avis d'adopter la stratégie suivante :

 

- faire un diff entre la page actuelle et la page faite par Dave (je pense que Dave doit savoir faire)

- puis proposer ce diff sur le bugTracker de la communauté Sympa [2]

 

Pourquoi ce mode de fonctionnement ?

Car alors la modification sera inclue directement dans la solution "source", cella n'obligera pas les webmaster de l'april de gérer une version locale (juste pour l'april).

Car pour les webmasters, il est difficile de gérer des modifications "locales", car celles ci doivent être réappliquées lors des montées de version (le logiciel "standard" ne fournissant pas les modifications faite localement).

 

De plus, ceci nous permettrait d'améliorer globalement le projet Sympa (et donc pour toute la communauté) que uniquement notre instance April.

 

Par contre, le problème c'est que la mise en oeuvre effective de cette modification, sera beaucoup plus longue par ce processus :

- temps que la communauté sympa inclut ce code + temps de mise à jours du logiciel april.

 

A noter : sympa est un logiciel à l'origine francophone (cocorico ! :) ), maintenu par le réseau de université (CRU). C'est donc une source potentielle de contact pour la liste et peut être une prise en compte du patch facilitée...

 

 

 

* le site officiel : http://www.sympa.org/

[2] * la liste de diffusion : https://sourcesup.cru.fr/tracker/?atid=167&group_id=23&func=browse

 

++

 

On 2/1/10, Dave Neary <dneary AT free.fr> wrote:

Salut,

Dave Neary wrote:
> Juste pour savoir, quel est le moyen de modifier le HTML de la page
> d'accueil pour le rendre accessible? Est-ce qu'il y a des metadonnées à
> y mettre? Comment l'ordre de sélection des champs si on utilise le tab
> est il décidé? Et les commentaires pour les champs sont renseignés
> comment? Un attribut du champ "input", j'imagine?

Un peu de lecture, je répond à ma propre question.

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>

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

Donc, dans le cas concrèt de notre page d'accueil, il faudrait modifier
la 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.

Cheers,
Dave.

--
Dave Neary
dneary AT free.fr
Tel: +33 9 51 13 46 45
Cell: +33 6 77 01 92 13