[accessibilite-numerique] Formulaires accessibles en pdf ?
anne mignonat
amig69 at free.fr
Mer 30 Mai 06:39:24 EDT 2007
bonjour,
tout dépend ce que tu veux fair avec ton formulaire car il y a différente
présentation si c'est un formulaire de contact soit tu le mets dans un
tableau soit tu le met dans des div par contre si c'est un long formulaire
il vaut mieux utiliser la méthodefieldset.
Ce sujet a déjà été abordé sur la liste et tu aurais du regarder les
archives donc comme je suis sympa je t'ai fais un copié-coller des archives
sur ce sujet.
Anne
voir la copie du mail de la liste ci-dessous:
Message
Bonjour Anne,
Lorsque tu dis :
« Le label for est important quand tu dois remplir des champs car si tu
oublies de mettre le label tu n'as pas forcément le nom de l'étiquette du
formulaire
quand tu te trouves en mode remplissage du formulaire. ».
Cela signifie-t-il que la lecture du formulaire sous forme de tableau est
suffisamment claire pour toi. En revanche, si tu souhaitais y répondre, tu
ne
saurais pas facilement identifier les boutons radio du fait de l'absence des
labels ?
Ce formulaire serait-il aussi accessible pour les utilisateurs qui comme toi
au départ, auraient choisi pour une raison ou une autre, de mettre tous
leurs
formulaires sans tableau ?
Les labels présentent un autre intérêt : faciliter la saisie des formulaires
à l'aide d'une souris. En effet, cliquer sur un label permet notamment d'activer
le bouton radio associé, de cocher ou décocher une case ou encore de donner
le focus à un champ de texte ou une liste de sélection. Ils représentent
ainsi
une aide précieuse également pour les personnes qui peuvent éprouver des
difficultés à maîtriser la souris.
La présentation sous forme de tableau (même sans la balise TABLE) présente
un autre inconvénient. Avant de sélectionner le choix SANS OPINION (colonne
la
plus à droite), je dois parcourir la ligne vers la gauche pour m'assurer que
je vais effectivement répondre au bon critère. Ces allers-retours restent
encore à ma portée vue la taille du tableau, quoique pas très agréables. En
revanche, cela peut poser un problème pour les personnes qui sont obligées
de zoomer. Le bouton radio SANS OPINION et son critère risquent en effet, de
ne pas être visibles ensemble à l'écran. Elles devront donc utiliser l'ascenseur
horizontal pour s'assurer qu'elles répondent au bon critère.
Hervé,
Une autre solution consisterait à abandonner la représentation en tableau au
profit de fieldsets. Par exemple, pour chaque critère :
<fieldset>
<legend>accessibilité des données</legend>
<span>
<input type="radio" name="REP1QUES7" value="1" tabindex="1" id="r1" />
<label for="r1">
<abbr title="Bonne accessibilité des données">Bonne</abbr>
</label>
</span>
<span>
<input type="radio" name="REP1QUES7" value="2" tabindex="2" id="r2" />
<label for="r2">
<abbr title="Accessibilité des données moyenne">Moyenne</abbr>
</label>
</span>
<span>
<input type="radio" name="REP1QUES7" value="3" tabindex="3" id="r3" />
<label for="r3">
<abbr title="Accessibilité des données médiocre">Médiocre</abbr>
</label>
</span>
<span>
<input type="radio" name="REP1QUES7" value="4" tabindex="4" id="r4" />
<label for="r4">
<abbr title="Sans opinion sur l'accessibilité des données">Sans
opinion</abbr>
</label>
</span>
</fieldset>
Cette solution semble plus simple à réaliser, plus accessible et aussi plus
confortable à mes yeux.
Pour l'esthétique, tout reste encore une fois, une question de (feuille de)
style.
Cordialement.
Jean-Louis Bataille
source du formulaire visé:
http://www.sierm-dev.eaurmc.fr/enquete/questionnaire-donnees-7.php) :
<form id="question" name="question" method="post"
action="questionnaire-donnees-7.php">
<table>
<caption>
Réponse
</caption>
<tr>
<th id="col1">Critères</th>
<th id="col2" class="celTaille15">Bonne</th>
<th id="col3" class="celTaille15">Moyenne</th>
<th id="col4" class="celTaille15">Médiocre</th>
<th id="col5" class="celTaille15">Sans opinion </th>
</tr>
<tr>
<td headers="col1">accessibilité des données</td>
<td headers="col2" class="cel-centre"><input <?php echo $r1; ?>
type="radio" name="REP1QUES7" value="1" tabindex="1" id="r1" /></td>
<td headers="col3" class="cel-centre"><input <?php echo $r2; ?>
type="radio" name="REP1QUES7" value="2" tabindex="2" id="r2" /></td>
<td headers="col4" class="cel-centre"><input <?php echo $r3; ?>
type="radio" name="REP1QUES7" value="3" tabindex="3" id="r3" /></td>
<td headers="col5" class="cel-centre"><input <?php echo $r4; ?>
type="radio" name="REP1QUES7" value="4" tabindex="4" id="r4" /></td>
</tr>
<tr>
<td headers="col1">qualité de la documentation des
données</td>
<td headers="col2" class="cel-centre"><input <?php echo $s1; ?>
type="radio" name="REP2QUES7" value="1" tabindex="5" id="s1" /></td>
<td headers="col3" class="cel-centre"><input <?php echo $s2; ?>
type="radio" name="REP2QUES7" value="2" tabindex="6" id="s2" /></td>
<td headers="col4" class="cel-centre"><input <?php echo $s3; ?>
type="radio" name="REP2QUES7" value="3" tabindex="7" id="s3" /></td>
<td headers="col5" class="cel-centre"><input <?php echo $s4; ?>
type="radio" name="REP2QUES7" value="4" tabindex="8" id="s4" /></td>
</tr>
<tr>
<td headers="col1">qualité des données</td>
<td headers="col2" class="cel-centre"><input <?php echo $t1; ?>
type="radio" name="REP3QUES7" value="1" tabindex="9" id="t1" /></td>
<td headers="col3" class="cel-centre"><input <?php echo $t2; ?>
type="radio" name="REP3QUES7" value="2" tabindex="10" id="t2" /></td>
<td headers="col4" class="cel-centre"><input <?php echo $t3; ?>
type="radio" name="REP3QUES7" value="3" tabindex="11" id="t3" /></td>
<td headers="col5" class="cel-centre"><input <?php echo $t4; ?>
type="radio" name="REP3QUES7" value="4" tabindex="12" id="t4" /></td>
</tr>
</table>
<label for="u">C<span class="accesskey">o</span>mmentaires : </label><br
/>
<textarea name="REP4QUES7" accesskey="o" tabindex="13" id="u" cols="70"
rows="4" onkeypress="javascript:compter(question);"><?php if ($u != "") {
echo
$u; } else { echo ""; } ?></textarea><br />
<label for="v">Nombre de caractères restants : </label><input
type="text" name="nb1car" id="v" size="1" value="250" />
<br />
<br />
<div class="droite">
<input type="submit" name="urlSuivante" value="Question suivante
>" title="valider et passer à la question suivante (accès
clavier
: touche v)" accesskey="v" tabindex="14" id="suivante" />
</div>
<div class="gauche">
<input type="submit" name="urlSuivante" value="< Question
précédente" title="retourner à la question
précédente
(accès clavier : touche n)" accesskey="n" tabindex="15"
id="precedente" />
</div>
<input type="hidden" name="question7" value="1" />
</form>
Merci d'avance pour votre aide.
Cordialement,
Hervé CHUZEVILLE, webmestre - Unité des Systèmes d'Information
Agence de l'Eau Rhône Méditerranée & Corse - 2-4 allée de Lodz - 69363 Lyon
Cedex 07 -
Plan d'accès
Plus d'informations sur la liste de diffusion accessibilite-numerique