Étiquette unique pour deux entrées

J'ajoute actuellement une entrée de date à un formulaire. J'ai une entrée 'Date de début' et 'Date de fin' mais je veux seulement utiliser une seule étiquette ('Dates') pour les deux entrées.Étiquette unique pour deux entrées

Est-ce possible? Quelles sont les préoccupations en matière d'accessibilité? Ma pensée actuelle est d'avoir une étiquette 'Dates' qui est montrée alors avoir deux étiquettes cachées pour chaque entrée pour les lecteurs d'écran etc. Est-ce la voie à suivre? Existe-t-il des exemples de grands sites Web faisant ce genre de chose (sites Web du gouvernement si possible)?

Il s'agit d'un projet qui peut être utilisé par un organisme gouvernemental, il existe donc des règles strictes en ce qui concerne l'accessibilité.

Source

2013-02-13 AverageMarcus

Comment définissez-vous 'l'utilisation'? Voulez-vous dire que cliquer sur l'étiquette devrait focaliser les deux champs (comme avec l'attribut 'for')? – BenM

L'attribut for devra être défini pour permettre à la technologie d'assistance d'informer l'utilisateur de la bonne entrée, etc. – AverageMarcus

Dans ce cas, je pense que le meilleur balisage serait d'envelopper les entrées dans un fieldset, utilisez un legend pour "Dates", utilisez labels pour les inputs et cacher les étiquettes:

HTML

<fieldset> 
<legend>Dates</legend> 
<label for="startdate">Start Date</label> 
<input type="text" name="startdate" id="startdate" placeholder="Start Date"> 
<label for="enddate">End Date</label> 
<input type="text" name="enddate" id="enddate" placeholder="End Date"> 
</fieldset>

CSS

fieldset { 
    border: none; 
} 
label { 
    margin-left: -999em; 
} 
input { 
    display: block; 
}

Fiddle here

Voir aussi: WCAG 2, H71: Providing a description for groups of form controls using fieldset and legend elements

Source

2013-02-14 19:01:27 steveax

Le problème ici est que vous ne pouvez spécifier qu'un for pour chaque étiquette. J'imagine, à des fins d'accessibilité, il serait préférable d'afficher deux labels pour chaque date. De cette façon, toute personne utilisant un lecteur d'écran, etc. obtiendra une étiquette valide pour chaque entrée.

<label for="x">x name</label><input name="x"/> 
<label for="y">y name</label><input name="y"/>

Source

2013-02-13 12:58:08 Liam

Suggérez-vous d'utiliser des étiquettes cachées réservées aux lecteurs d'écran? – AverageMarcus

pas 100% sûr de ce que les recommandations sont sur les étiquettes cachées. Je ne serais pas surpris si certains lecteurs ne liraient pas les valeurs cachées, je suppose que cela dépendrait de votre définition de caché aussi! – Liam

Cette approche est la plus conviviale et évite d'abord de créer le problème. Il est conceptuellement simple et compréhensible, ce qui est également une fonctionnalité d'accessibilité importante. Les personnes ayant des difficultés cognitives doivent avoir une association simple et compréhensible entre un texte qui explique l'entrée attendue et un contrôle pour l'entrée réelle. Pour cette raison, les étiquettes ne doivent pas être cachées dans le rendu visuel. –

Je pense que votre meilleur pari serait d'inclure une étiquette avec chaque entrée. Ensuite, pour l'étiquette que vous ne voulez pas afficher réellement sur la page peut simplement être mis en page à l'aide de CSS via

.hide { 
    position: absolute; 
    left: -9999em; 
}

... ou quelque chose de similaire

Source

2013-02-13 13:00:24

Sûrement 'Display: none' serait mieux que' position: absolute'? – AverageMarcus

Certains lecteurs d'écran ignorent les éléments 'display: none'. – BenM

Vraiment? C'est une nouvelle pour moi. Avez-vous des exemples? – AverageMarcus

Étiquette unique pour deux entrées

Répondre

Questions connexes