2008-10-27 20 views
5

Je n'ai jamais eu de raison de placer un élément d'étiquette dans un élément de légende (je n'y ai jamais vraiment pensé ou je ne l'ai pas vu). Mais avec le design que j'implémente, c'est tentant de le faire.Habillage d'un élément d'étiquette dans un élément de légende

Voici ce que je suis tenté de le 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> 

Il fonctionne comme prévu (en cliquant sur l'étiquette se concentre l'entrée correspondante) dans Firefox3, Safari, Opera et IE6/7 et il passe la validation, mais Je me demande simplement s'il existe des raisons connues (accessibilité, sémantique, problèmes de navigateur) pourquoi cela ne devrait pas être fait

Répondre

11

Où est votre </fieldset>?

Sémantiquement, legend describes a fieldset, tout comme label décrit un seul champ.

Les champs sont censés être utilisés pour regrouper des champs liés sémantiquement (par exemple, un ensemble de champs "adresse" peut avoir des champs de saisie pour la rue, la ville et le pays). En supposant que vous ayez plus d'un champ dans le fieldset, faire ce que vous suggérez n'a pas de sens sémantique - vous devez créer un texte de légende séparé qui décrit le fieldset, puis une étiquette pour chaque champ.

Si vous n'avez qu'un seul champ, vous n'avez pas du tout besoin d'un jeu de champs ou d'une légende. Donc, en gros, vous ne devriez pas faire ce que vous faites. Si vous utilisez des éléments génériques comme div et span pour ne pas confondre la synthèse vocale et d'autres éléments non-visuels agents d'utilisateur.

à savoir, mettre dans un div ou span est effectivement neutre en termes d'accessibilité/sémantique (elle implique rien) par rapport à un élément sémantique abusant (même si seulement un peu, comme dans ce cas), ce qui peut induire en erreur. Imaginez même le scénario meilleur cas pour votre mise en page dans un navigateur de synthèse vocale: Le texte est lu à haute voix deux fois, une fois en tant que légende et une fois en tant qu'étiquette - pourquoi quelqu'un voudrait l'expression "J'aimerais informations" lire à haute voix deux fois à eux? Surtout que cela n'a de sens que dans le contexte des choix du contrôle select.

+0

A voté vers le haut. RE: dernier paragraphe - ... et s'il y a d'autres champs dans le fieldset alors la légende sera annoncée pour ces champs aussi, ce qui sera probablement indésirable. –

+0

Le tag FIELDSET de fermeture a été grignoté par l'éditeur de texte. Je suis allé l'ajouter, il était toujours là, mais pas dans le bloc de code. J'apprécie votre réponse - juste l'entrée bien pensée que j'espérais. J'étais sur la clôture et vous m'avez parlé avec éloquence. Merci! –

+0

En remarque, l'élément LEGEND est un peu difficile à contrôler avec css. J'allais utiliser le positionnement absolu, mais j'ai eu des problèmes. À la fin, j'ai décidé de renoncer à l'élément LEGEND et d'utiliser un LABEL avec une classe spéciale. –

0

Bien, l'élément d'étiquette lui-même semble bien - c'est la description de l'élément "formInfo", donc ce n'est pas un problème. Sémantiquement, cependant, que dit-on à propos de l'élément legend? C'est censé être une légende pour tout le fieldset ....