Envelopper un élément d'étiquette dans un élément de légende

Question

Je n'ai jamais eu de raison d'insérer un élément d'étiquette dans un élément de légende (je n'y ai jamais vraiment pensé ou vu). Mais avec la conception que je réalise, il est tentant de le faire.

Voici ce que je suis tenté de faire:

<fieldset>
<legend><label for="formInfo">I would like information on</label></legend>
<select id="formInfo">
    <option value="Cats">Cats</option>
    <option value="Dogs">Dogs</option>
    <option value="Lolz">Lolz</option>
</select>
</fieldset>

Cela fonctionne comme prévu (en cliquant sur l’étiquette qui focalise l’entrée correspondante) dans Firefox3, Safari, Opera et IE6 / 7 et il passe la validation, mais je me demande s’il existe des raisons connues (navigateur? accessibilité? sémantique? pourquoi cela ne devrait pas être fait

Answer 1

Où est votre </fieldset>?

Sémantiquement, legend décrit une fieldset , comme label décrit un seul champ.

Les ensembles de champs sont censés être utilisés pour regrouper des champs sémantiquement liés (par exemple, un & "adresse &"; un champs peut contenir des champs de saisie pour la rue, la ville et le pays).

En supposant que vous ayez plus d'un champ dans le groupe de champs, faire ce que vous suggérez n'a pas de sens: vous devez créer un texte de légende séparé qui décrit le groupe de champs, puis une étiquette pour chaque champ.

Si vous n'avez qu'un seul champ, vous n'avez pas besoin du tout d'ensembles ou de la légende.

Donc, en gros, vous ne devriez pas faire ce que vous faites.

Si vous souhaitez ajouter des éléments supplémentaires auxquels attacher des règles CSS ou des événements Javascript, il vaut mieux utiliser des éléments génériques tels que div et span qui ne créeront aucune confusion entre texte et parole. agents utilisateurs non visuels.

C'est-à-dire que mettre un select ou <=> est effectivement neutre en termes d'accessibilité / sémantique (cela n'implique rien) par rapport à une mauvaise utilisation d'un élément sémantique (même si ce n'est que légèrement, comme dans ce cas), ce qui est potentiellement trompeur . Imaginez même le scénario meilleur des cas pour votre mise en page dans un navigateur de synthèse vocale: le texte est lu à voix haute deux fois, une fois en tant que légende et une autre en tant qu'étiquette - pourquoi voudrait-on que la phrase "Je voudrais des informations sur &" lire à haute voix deux fois? D'autant que cela n'a de sens que dans le contexte des choix dans le <=> champ.

Answer 2

eh bien, l’élément label lui-même semble bien: c’est la description de & "formulaireInfo &"; élément, alors ce n'est pas grave. Sémantiquement, cependant, qu'est-ce que cela dit à propos de l'élément legend? Il est supposé être une légende pour l’ensemble des champs ....