[accessibilite-numerique] question concernant l'accessibilité d'un formulaire de questionnaire présenté sous forme de tableau de boutons radio
Jean-Louis Bataille
jlbataille at free.fr
Lun 23 Avr 14:18:30 EDT 2007
MessageBonjour Hervé,
Pour ma part, je n'utilise la balise <TABLE> que pour restituer un tableau de résultats. Je ne lui ai pas encore trouvé un autre usage.
Dans ton exemple, tu t'en servirais plutôt par commodité, pour la mise en forme de ton formulaire. Le résultat est propre et facilement compréhensible à l'écran.
Je pensais qu'il serait difficilement exploitable avec une synthèse vocale. Mais Anne vient de le tester sans problème avec sa version Jaws 6.2.
Pour améliorer encore son accessibilité, je te conseille quand même de remplacer ton tableau et d'associer un label à chaque bouton radio.
Un truc du genre (pour chaque critère) :
<div>
<span>accessibilité des données</span>
<span>
<label for="r1">
<abbr title="Bonne accessibilité des données">Bonne</abbr>
</label>
<input type="radio" name="REP1QUES7" value="1" tabindex="1" id="r1" />
</span>
<span>
<label for="r2">
<abbr title="Accessibilité des données moyenne">Moyenne</abbr>
</label>
<input type="radio" name="REP1QUES7" value="2" tabindex="2" id="r2" />
</span>
<span>
<label for="r3">
<abbr title="Accessibilité des données médiocre">Médiocre</abbr>
</label>
<input type="radio" name="REP1QUES7" value="3" tabindex="3" id="r3" />
</span>
<span>
<label for="r4">
<abbr title="Sans opinion sur l'accessibilité des données">Sans opinion</abbr>
</label>
<input type="radio" name="REP1QUES7" value="4" tabindex="4" id="r4" />
</span>
</div>
Il existe bien sûr de multiples variantes. C'est juste un exemple.
Il ne reste plus qu'à le mettre en forme à l'aide de feuilles de style.
Cordialement.
Jean-Louis Bataille
http://www.votre-hotel.com
----- Original Message -----
From: CHUZEVILLE Hervé
To: accessibilite-numerique at list.accessiweb.org
Sent: Monday, April 23, 2007 5:45 PM
Subject: [accessibilite-numerique] question concernant l'accessibilité d'un formulaire de questionnaire présenté sous forme de tableau de boutons radio
Bonjour,
Dans le cadre de la mise en oeuvre d'un questionnaire sous forme de formulaire, j'ai 2 erreurs suivantes remontées par Ocawa :
- Balise <table> : Pas de résumé au tableau de données
- Balise <input> : Pas d'association label - zone de saisie (avec l'attribut 'id' défini)
Pour l'erreur résumé du tableau, est-ce vraiment indispensable dans ce cas (voir le code source ci-dessous) ? Je ne vois pas bien ce que cela peut apporter de plus...
Pour le problème de la balise input, je ne vois pas bien comment mettre en oeuvre dans mon cas. Ou est-ce que un title du genre "Bonne accessibilité des données", "Accessibilité des données moyenne", etc. pourrait faire l'affaire (sans que cela résolve directement l'erreur) ?
Avez-vous des exemples de ce type accessibles ?
Voici le code (mon développement en cours est visible à l'adresse : 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
Tél direct : 04 72 71 27 17 - Fax : 04 72 71 26 04 - Mél : herve . chuzeville @ eaurmc . fr
Sites Web : www.eaurmc.fr - http://sierm.eaurmc.fr - www.corse.eaufrance.fr - www.touspourleau.fr - Intranet : http://rmcnet
------------------------------------------------------------------------------
_______________________________________________
accessibilite-numerique mailing list
accessibilite-numerique at list.accessiweb.org
http://list.accessiweb.org/mailman/listinfo/accessibilite-numerique_list.accessiweb.org
------------------------------------------------------------------------------
No virus found in this incoming message.
Checked by AVG Free Edition.
Version: 7.5.463 / Virus Database: 269.5.9/773 - Release Date: 22/04/2007 20:18
-------------- section suivante --------------
Une pièce jointe HTML a été nettoyée...
URL: http://list.accessiweb.org/pipermail/accessibilite-numerique_list.accessiweb.org/attachments/20070423/b5d89edb/attachment-0001.html
Plus d'informations sur la liste de diffusion accessibilite-numerique