[Résolu]<legend> dans un formulaire et IE : Problème de débordem

Bonjour,

En Internet Explorer (du moins pour les versions 6 et 7), le <legend> du code suivant déborde et j'aimerais, si possible, pouvoir contourner le problème depuis ma feuille de styles CSS.
Il s'agit à première vue d'un problème connu mais je n'ai pas encore réussi à résoudre pour ce navigateur.

<fieldset>
      <legend>Veuillez choisir l&rsquo;option qui, selon vous, d&eacute;crit le mieux votre comp&eacute;tence de lecture en braille abr&eacute;g&eacute; lors de l&rsquo;emploi de l&rsquo;afficheur braille.  <em>(Six choix de r&eacute;ponses)</em></legend> 
      <input id="affbr_abrege_ex" name="Competence_braille_afficheur_abrege" type="radio" value="Excellente" />
      <label for="affbr_abrege_ex">Excellente</label><br />
      <input id="affbr_abrege_tb" name="Competence_braille_afficheur_abrege" type="radio" value="Tres_bonne"/>
      <label for="affbr_abrege_tb">Tr&egrave;s bonne</label><br />
      <input id="affbr_abrege_b" name="Competence_braille_afficheur_abrege" type="radio" value="Bonne"/>
      <label for="affbr_abrege_b">Bonne</label><br />
      <input id="affbr_abrege_faible" name="Competence_braille_afficheur_abrege" type="radio" value="Faible" />
      <label for="affbr_abrege_faible">Faible</label><br />
	<input id="affbr_abrege_tfaible" name="Competence_braille_afficheur_abrege" type="radio" value="Tres_faible" />
      <label for="affbr_abrege_tfaible">Tr&egrave;s faible</label><br />
      <input id="affbr_no_abrege" name="Competence_braille_afficheur_abrege" type="radio" value="Ne_lis_pas_abrege_sur_afficheur" />
      <label for="affbr_no_abrege">Je ne lis pas l&rsquo;abr&eacute;g&eacute; sur l&rsquo;afficheur braille</label><br />
      </fieldset>

Sous Firefox, un bug similaire survient si la CSS ne spécifie pas ceci :

legend {white-space : normal;} /* oui c'est très étrange, je sais, c'est supposé être une propriété par défaut.... */

Mais je n'ai rien pu trouver pour le cas de IE...


Je m'en remets donc à vous (sur un ton pas trop dramatique, tout de même )

Nalita33
Modifié par nalita33 (28 Sep 2008 - 01:00)

Bonsoir nalita33,

En css tu pourrais regrouper la partie finale (ou la moitié) de ta legend dans un span que tu ferais flotter à gauche :

css:

legend span {
float:left;
}

html :

<fieldset>
      <legend>
Veuillez choisir l’option qui, selon vous, décrit le mieux
votre compétence de lecture en braille abrégé
[#blue]<span>lors de l’emploi de l’afficheur braille.  
<em>(Six choix de réponses)</em>
</span>[/#]
      </legend> 
</fieldset>

Ou, plus simplement une balise <br /> qui devrait te donner le même résultat...

Ceci étant dit, (cela n'engage que moi ), je trouve cette légende un peu...longue, non ?
Tu pourrais fort bien réduire cette légende à :"Compétence de lecture en braille abrégé", puis, si tu tiens à préciser les choses, regrouper des infos supplémentaires, utiliser un paragraphe en dessous ?
Peut-être même utiliser un titre de niveau (hn) avant le fieldset ?

Voilà, c'est tout ce que j'avais en rayon, j'espère ne pas avoir écrit de bétises...

Quoiqu'il en soit, bonne continuation

Cdt,
Sylvain

6l20 a écrit :

Ceci étant dit, (cela n'engage que moi ), je trouve cette légende un peu...longue, non ?
Tu pourrais fort bien réduire cette légende à :"Compétence de lecture en braille abrégé", puis, si tu tiens à préciser les choses, regrouper des infos supplémentaires, utiliser un paragraphe en dessous ?
Peut-être même utiliser un titre de niveau (hn) avant le fieldset ?

Il est à noter que certains lecteurs d'écran utilisés par les personnes déficientes visuelles, lorsqu'ils entrent en mode "formulaire", ignorent les contenus non rattachés à des balises de formulaire. Autrement dit, dans un <form>, un <legend> ou un <input> seraient lus, mais pas le paragraphe <p> que tu me conseilles d'ajouter pour raccourcir le <legend>. Et comme il s'agit d'un formulaire/questionnaire à remplir par des personnes aveugles dans le cadre d'une recherche universitaire, je ne peux me permettre que certains perdent des précisions nécessaires pour bien comprendre la question ou y répondre .

nalita33 a écrit :


Il est à noter que certains lecteurs d'écran utilisés par les personnes déficientes visuelles, lorsqu'ils entrent en mode "formulaire", ignorent les contenus non rattachés à des balises de formulaire. Autrement dit, dans un <form>, un <legend> ou un <input> seraient lus, mais pas le paragraphe <p> que tu me conseilles d'ajouter pour raccourcir le <legend>...

Des noms !!!

Bien, je prends note, merci pour l'info
Les solutions proposées te conviennent-elles ?
Modifié par 6l20 (27 Sep 2008 - 22:07)

6l20 a écrit :

Des noms !!!

Bien, je prends note, merci pour l'info
Les solutions proposées te conviennent-elle ?

Bien je crois que je vais faire qq tests avant de commenter la meilleure solution à mes yeux.

Pour ton autre question : le lecteur JAWS, pour n'en nommer qu'un. Pour ma part, avec JAWS 8, j'appuie sur INSERT + F5 et je peux passer en mode formulaire. J'obtiens alors la liste des <inputs>, accompagnés de leur labels respectifs. Je peux sélectionner le champ voulu et alors le curseur de texte se rend directement au bon endroit pour remplir la zone de texte, pour sélectionner l'option voulue de la liste de boutons radio ou pour appuyer sur le bouton de soumission du formulaire. Mais quand mon mode formulaire est activé, c'est comme si tout le reste du contenu de la page n'existait pas!!!!!! (pas lu par le lecteur d'écran à moins de rebasculer en mode de lecture normale )

Le comportement du mode formulaire de JAWS m'apparaît plutôt dérangeant à l'heure actuelle : il n'affiche que les <input>, et ignore les <legend> tout comme les paragraphes <p>, <h1> et autres! Eh oui! Ça demande un switch constant entre le mode normal et le mode formulaire . Je tente actuellement de voir si <legend> demeure pertinent à conserver dans mon cas.

J'en redonnerai des nouvelles.

Donc, deux questions, l'une de mise en forme, et l'autre d'accessibilité :

1) Comment faire en sorte qu'un long <legend> de formulaire ne déborde pas de la page sous IE
2) Comment optimiser le questionnaire pour le lecteur d'écran (mode normal/mode formulaire) quand on doit faire précéder une liste de choix en boutons radios par une question. Le but étant que, outre les <label> associés à chaque option de la liste de boutons radios, je puisse entendre la question qui chapeaute la liste de choix en boutons radios.

Hum, vu la tournure "accessibilité" de mon post, je suggère un déplacement dans la section qui y est dédiée.

Et j'en profite à l'instant pour indiquer que les deux questions précédemment soulevées sont résolues :

Pour que la question soit prise en compte dans le mode formulaire, il importe de délaisser les boutons radio au profit d'une liste à option, comme spécifié dans l'article suivant :

http://www.tbs-sct.gc.ca/clf-nsi/1/radio-fra.asp

Du même coup, le problème des <legend> trop longs ne se posera plus, puisqu'il ne sera plus nécessaire de les utiliser pour insérer la question.

Les <legend> ont encore leur utilité, mais, à mon avis, ils ne doivent pas être utilisés pour véhiculer de l'information essentielle relativement aux champs de formulaire à remplir.
Modifié par nalita33 (28 Sep 2008 - 00:47)