Comment avoir une étiquette pour les multiples sélectionnez les cases?
Que j'ai sur cette case dans le formulaire:
<label>Check in date </label>
<select id="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="year">
<option value="1">2012</option>
<option value="2">2013</option>
</select>
Comme vous pouvez le voir, l'utilisateur va choisir le mois, le jour et l'année sur les différentes listes de sélection, cependant, une seule étiquette doit exister pour tous les trois.
Quelle serait la bonne façon de le faire avec le HTML ?
Mise à jour:
Je suis préoccupé par l'accessibilité hit que l'on peut avoir sur le développement de quelque chose comme le code ci-dessus. Je veux dire, un aveugle utilisateur doit être en mesure d'écouter chaque étiquette afin de remplir ce formulaire...
Ne voyez pas de problème avec ce que vous avez. Aucune raison de s'attendre à autre chose?
son travail très bien.EST-il quelque chose de spécifique que vous voulez..? jsfiddle.net/B2MrM
son travail très bien.EST-il quelque chose de spécifique que vous voulez..? jsfiddle.net/B2MrM
OriginalL'auteur MEM | 2012-08-28
Vous devez vous connecter pour publier un commentaire.
Vous ne pouvez pas associer un
label
élément avec plus d'un contrôle. Ceci est décrit dans le définition delabel
.Vous pourriez donner à chaque
select
élément son propre label.Une meilleure approche est d'avoir un seul champ de saisie de texte pour une date. Ensuite, il n'y a pas de problème avec
label
. Cela signifie plus de travail, puisque vous avez à analyser les données côté serveur, et vous devez également analyser côté client (pour les chèques, de sorte que l'utilisateur peut immédiatement être informé de problèmes). Mais il est préférable d'utilisabilité (certes il est plus rapide de taper une date que l'usage de trois maladroit listes déroulantes) et une meilleure accessibilité. Vous devez décider sur un format de date et clairement indiquer à l'utilisateur ce que le format attendu est.OriginalL'auteur Jukka K. Korpela
Le problème avec l'aide d'une étiquette pour tous les trois zones de saisie est qu'un non-voyants, l'utilisateur ne va pas savoir lequel des trois cases, l'accent est parce que le même texte sera lu dans chaque cas. Il y a un certain nombre d'approches possibles. Peut-être le plus sûr est d'avoir une étiquette pour chaque zone, mais de cacher ceux hors des étiquettes sur le côté gauche de la fenêtre d'affichage. Une autre possibilité, qui doit travailler, mais je n'ai pas testé serait celui-ci:
Il suffit d'avoir aria-label peut être suffisant pour ce scénario, ici.
OriginalL'auteur Alohci
La suite de la réponse de @Alohci, vous pouvez également utiliser
aria-labelledby
et inverser la dénomination de référence (qui, je pense, est d'un peu plus près à la convention que vous cherchiez):Également de noter, comme par le W3C sur
labelled-by
:OriginalL'auteur Dan Lugg
Il n'y a pas de bonne façon; une étiquette fait référence à un élément. Il suffit de pointer vers le premier.
Vous pouvez également utiliser un particulier de style
<fieldset>
si vous aimez la sémantique, mais je pense que c'est un peu exagéré. Un<input type="date">
est probablement la meilleure option ici, comme il est un élément qui peut être indiqué par votre<label>
, est plus sémantique, et peut être un peu plus convivial si vous implémentez une bonne sélection de date pour aller avec elle.Si vous voulez coller avec le
<select>
s, essayer de donner à chacun untitle
attribut pour l'accessibilité.OriginalL'auteur Ry-
Essayer d'améliorer @Bracketworks réponse:
Voir l'exemple 1 du MDN,"À l'aide de l'aria-labelledby attribut".
OriginalL'auteur Jeromy French
HTML5
input type="date"
pourrait être utile, surtout si vous utilisez du jour/mois/année sélectionnez les cases comme un moyen de limiter la sélection de la date de possibilités. Cet élément d'entrée prend en chargemin
etmax
attributs de date, de sorte que vous pouvez appliquer vos limites. Il n'est pas pris en charge par les navigateurs plus anciens, mais j'ai vu smart cookies utiliser jQueryUI du datepicker comme une cale (en utilisant les capacités de détection pour déterminertype="date"
support, puis le chargement et l'invocation de la datepicker que s'il n'est pas pris en charge nativement).OriginalL'auteur Jeromy French