Utiliser la balise Fieldset pour structurer une page web

Bonsoir à tous,

J'ai fait quelques recherches sur le web mais on arrive toujours à la même chose : les formulaires ...

Si j'ai bien compris la balise "fieldset" est utilisée pour regouper visuellement plusieurs champs d'un formulaire afin de rendre plus clair le contenu de ce dernier.

En allant faire un petit tour sur le site d'accessiWeb, on peut y voir à ce sujet :

a écrit :
Bénéfices pour les utilisateurs

* Bénéfice 1 :
Le fait de regrouper visuellement des informations de même nature en les encadrant, permet de faire ressortir la structuration des informations et de les rendre ainsi plus compréhensibles à tout internaute, et plus particulièrement aux personnes ayant des difficultés de concentration.

* Bénéfice 2 :
Lorsque les informations de même nature sont clairement identifiées par un encadrement, cela offre une aide visuelle pour les personnes malvoyantes qui peuvent ainsi mieux se repérer entre les différents champs.

Partant de ces avantages, est-il possible d'utiliser cette balise afin de rendre plus clair le contenu d'une page web ? (J'entends par contenu de la page quelque chose qui n'est pas un formulaire bien sur ) Bref, pour encadrer des blocs d'information de même nature.

Merci d'avance de vos remarques

Non, fieldset est un élément bien spécifique aux formulaires.
Pour séparer les contenus ordinaires, les paragraphes suffisent.

Séparation visuelle de blocs de contenu : balises div et feuille de style ad hoc.

Séparation sémantique : faire débuter chaque bloc de contenu par un titre de même niveau (si les blocs sont considérés comme étant de même niveau dans l'organisation du contenu de la page), quitte à cacher certains titres explicatifs via la feuille de style, si on considère que l'information est implicite dans la mise en forme.

QuentinC> Non, tu n'as pas bien compris ce que je voulais dire ... Une balise paragraphe n'est pas adaptée. Car il peut y avoir autre chose que du texte (balises h, etc.)

mpop> Oui, j'avais pensé à ça aussi tout naturellement à la base (encore que j'ai pas bien compris le coup de cacher les titres ...). Comme la balise fieldset sert à regouper des informations de même nature, je me suis dit qu'elle pourrait être utilisée pour la mise en forme si besoin est du contenu de la page.

Un exemple pour illustrer tout ça :

<h2>Le plan du site</h2>

<fieldset class="cent">
<legend>Barre de menu horizontale</legend>

<h3>Accueil</h3>
<p>
Retourne à la page d'accueil du site.
</p>

<h3>Accessibilité</h3>
<p>
Présente la politique d'accessibilité aux personnes handicapées, regroupant les aides à la navigation et les raccourcis clavier.
</p>

<h3>Aller au contenu</h3>
<p>
Va directement au contenu de la page en positionnant la page en dessous de la bannière du site.
</p>

<h3>Plan du site</h3>
<p>
C'est la page sur laquelle vous vous trouvez.
</p>

<h3>Contact</h3>
<p>
Pour entrer en contact avec le webmester du site.
</p>

</fieldset>

<fieldset class="cent">
<legend>Barre de menu verticale</legend>

<h3>Le lien sur le drapeau anglais</h3>
<p>
Va vers la version anglaise du site.
</p>

<h3 class="titresimil">Général</h3>

<h3>Accueil</h3>

<p>
Retourne à la page d'accueil du site.
</p>

<h3>Bannières</h3>
<p>
Présente les bannière et boutons du site pour enrichir vos pages de liens.
</p>

<h3>Contact</h3>
<p>
Pour entrer en contact avec le webmester du site.
</p>

</fieldset>

Le texte qui apparaît dans le cadre via la balise "legend" n'est vraiment un titre mais plutôt une information utile qui permet de comprendre ce qu'il y a dans le cadre affiché. Tout comme pour un formulaire, à part que ce n'est pas un formulaire.

Bonjour,

C'est un des petits défauts agaçants d'HTML4.01, qui laisse la porte ouverte à une utilisation de fieldset en dehors des contenus "contrôles de formulaires".

Mais je crois qu'il faut prendre le problème par l'autre bout: comment va être utilisé ce regroupement imprévu ?

Le rôle majeur du fieldset n'est pas tant de "regrouper" pour le principe que permettre d'associer le rappel de la légende aux différents items qu'il contient. Typiquement, un lecteur d'écran redit la légende avant chaque <label>, ce qui permet de faire par exemple:

<fieldset>
  <legend>premier enfant</legend>
  <label...>Prénom: </label><input ...>
  <label...>Date de naissance: </label><input ...>
  ...
</fieldset>

<fieldset>
  <legend>second enfant</legend>
  <label...>Prénom: </label><input ...>
  <label...>Date de naissance: </label><input ...>
  ...
</fieldset>

Les labels "prénom" et "Date de naissance" sont ambigus et insuffisants en mode vocal, dans des formulaires complexes, et le lecteur résoudra le problème en lisant "premier enfant, prénom:... Premier enfant, date de naissance..."

Y a-t-il un scénario hors formulaire où une fonctionnalité de ce type serait pertinente ou utile ?

Ah, désolé, autant pour moi pour la petite erreur.

C'est très intéressant tout ça Laurent Denis. J'ai encore appris des choses ce soir et en particuliers, le rendu vocal des "fieldset"

Vu que tu abordes l'aspect "lecteur vocal", j'aimerais savoir ce que ferait le code que j'ai copié-collé plus haut s.t.p. Y-aurait-il une lecture spéciale ?

Sinon, pour l'utilité de la manoeuvre, je ne pensais pas à l'aspect vocal mais plutôt à l'aspect visuel du rendu à l'écran.

Si je reprends mon exemple plus haut, je trouve que regrouper dans une balise fieldset tous les liens de la barre de menu horizontale et dans un autre tous les liens de la barre de menu verticale, cela rend les choses plus claires. Il suffit de voir le résultat affiché à l'écran.

Et on retrouve les bénéfices exposés par AccessiWeb, rappelés dans mon premier post.

Bonjour,

Le fiedlset hors formulaires n'est pas pris en compte par un lecteur (ce qui est logique puisque cette prise en compte dépend de la présence d'éléments <label>).

Pour ce qui est de l'objectif "regroupement visuel"... on considèrera le plus souvent (en évaluation d'accessibilité) qu'il s'agit d'un détournement d'un élément structurel à des fins de présentation (comme si tu utilisais des titres pour faire du texte "plus gros"), et on te renverra à l'utilisation d'une section <div>, d'un titre <hn> et de bordures CSS... (avec des lignes <hr /> pour l'effet visuel hors CSS).

De fait, quand tu écris:

Pandore a écrit :

Le texte qui apparaît dans le cadre via la balise "legend" n'est vraiment un titre mais plutôt une information utile qui permet de comprendre ce qu'il y a dans le cadre affiché.

... C'est bien un titre que tu définis là, en réalité, du point de vue HTML

Et ici, dans ton exemple, les fieldset conduisent à appauvrir la structure de ta page d'aide: les 2 parties "menu horizontal" et "menu vertical" n'apparaissent pas dans la structure de titrage (une table des matières automatiquement générée, par exemple, ne contiendra pas cette information pourtant importante sur l'organisation de la page d'aide)...

D'ailleurs, toujours à propos de ton exemple: je ne suis pas sûr que ce soit un manière idéale d'aborder un plan de site : il s'agit plutôt d'une page d'aide expliquant ton interface de navigation. Un plan de site présentera le contenu du site (et non les liens de l'interface) de manière complète (en développant les bannières), en ignorant donc les liens de type ancre ("Aller au contenu") et de manière indifférente à l'organisation des menus.

Cela dit, pour revenir au point de vue plus général: on voit parfois des cas où l'utilisation hors-formulaire d'un fieldset semblerait plus "consistante" : certains menus de navigation avec des sous-sections présentant un problème similaire au formulaire de mon message précédent, par exemple. Mais je crois que dans ces cas, on tente de boucher un trou du HTML4.01 d'une manière certes apparemment séduisante, mais en réalité assez illusoire: ces utilisations de fieldset restent en effet suspendues dans le vide du point de vue de la norme HTML, et donc de l'exploitation qui pourrait en être faite par les agents utilisateurs. Bref, ça ne fera peut-être pas de mal, mais ça ne fera aucun bien non plus

En conclusion, je réserverais l'utilisation de fieldset aux formulaires. Et même, surtout, aux seuls formulaires dont le contenu l'exige en raison de sa complexite, quand les <labels> ne sont pas suffisants... (le fieldset sans légend qu'on rencontre souvent pour englober un formulaire de recherche simple, comme celui de dotclear par exemple, ne sert strictement à rien sauf à dessiner une bordure)
Modifié par Laurent Denis (07 Sep 2006 - 05:41)

Bonsoir,

Ok, merci d'avoir regardé pour le lecteur vocal Laurent Denis.

Sinon, oui, je t'accorde volontiers que la structure de la page est un peu bancal avec l'utilisation de ces fieldsets ...

Bon, je vais regarder ce que ça donne avec le CSS et les "hr". Merci pour ces échanges intéressants.


P.S. :

a écrit :
D'ailleurs, toujours à propos de ton exemple: je ne suis pas sûr que ce soit un manière idéale d'aborder un plan de site : il s'agit plutôt d'une page d'aide expliquant ton interface de navigation. Un plan de site présentera le contenu du site (et non les liens de l'interface) de manière complète (en développant les bannières), en ignorant donc les liens de type ancre ("Aller au contenu") et de manière indifférente à l'organisation des menus.

Oui, tu as raison, c'est juste un exemple que j'ai bricolé pour ce topic avec quelques copié/collé, sans doute de manière maladroite d'ailleurs J'ai volontairement effacer les parties de mon plan de site qui contiennent des mots clés importants pour le site car je n'ai pas envie de retrouver cette page indexée sur Google avec ces mots-clés

http://www.alistapart.com/articles/prettyaccessibleforms

Je ne vois pas bien ce que ton lien à avoir avec le sujet de ce post , mais merci quand même nORKy

Salut,

Lorsqu'on a des fieldset dans des fieldset (est ce déja bien recommandé de faire ça ? pas d'erreurs à la validation...) comment pallier au fond blanc de la legend sur toute la largeur du fieldset interne sous IE ?

Si je suis pas clair, je me débrouille à joindre une copie d'écran sous peu.

Bon week !
Modifié par Hum (10 Nov 2006 - 21:43)