Je déterre ce vieux billet sur les champs textes car il était plein de bonnes idées dans les commentaires.
Tac, tac, tac ! Reprenons svp !
Je laisse de côté le placeholder qui pour l’instant n’est pas envisageable (mais qui à terme viendra remplacer tout ça).
Yves poussait une idée intéressante avec le kbd. Ça pourrait donner ça :
<p>
<label for="courriel">Courriel</label>
<input type="text" id="courriel" name="courriel" value="" class="exemple" />
<kbd>courriel@exemple.com</kbd>
</p>
Reste à savoir si c’est une bonne interprétation de la spécification :
- KBD
- Indicates text to be entered by the user.
Je met de côté samp qui semble plus indiqué pour des résultats.
Couplé à un petit JS ça pourrait le faire non ?
JS
jQuery(champs).each(function(){
var exemple = 'ex';
var that = jQuery(this);
var papa = 'p';
var fiston = 'kbd';
var key = that.parent(papa).children(fiston);
key.hide();
that.addClass(exemple).val(key.text());
that.focus(function(){
if(that.val()==key.text())
that.removeClass(exemple).val('');
});
that.blur(function(){
if(that.val()=='')
that.addClass(exemple).val(key.text());
});
});
champs('input.exemple');
CSS
.ex
{
color:#DDD;
background-color:inherit;
}
Ou encore mieux si on a la place :
- ne pas ajouter de script ;
- laisser l’exemple à côté ;
- et se servir de
value=""pour les cas d’erreur (à corriger sans tout avoir à re-saisir).
Ainsi :
HTML
<p>
<label for="courriel">Courriel</label>
<input type="text" id="courriel" name="courriel" value="vincentàhtmlzengarden.com" class="erreur" />
<kbd>courriel@exemple.com</kbd>
</p>
CSS
.erreur
{
font-weight:bold;
color:#F00;
background-color:inherit;
}
Reste une question : faut-il placer le kbd avant le champs pour des soucis d’accessibilité ?
HTML
<p>
<label for="courriel">Courriel</label>
(<kbd>courriel@exemple.com</kbd>)
<input type="text" id="courriel" name="courriel" value="vincentàhtmlzengarden.com" class="erreur" />
</p>
ou
<p>
<label for="courriel">Courriel (<kbd>courriel@exemple.com</kbd>)</label>
<input type="text" id="courriel" name="courriel" value="vincentàhtmlzengarden.com" class="erreur" />
</p>
Ou encore lui placer également un label ?
HTML
<p>
<label for="courriel">Courriel</label>
<input type="text" id="courriel" name="courriel" value="vincentàhtmlzengarden.com" class="erreur" />
<label for="courriel"><kbd>courriel@exemple.com</kbd></label>
</p>
À vos claviers !
PS : l’exemple est ligne est ici.
7 commentaires ↓
La spécification de HTML 5 décrit d’avantage le rôle de kbd (et samp) : http://www.w3.org/TR/html5/text-level-semantics.html#the-kbd-element
Ils démontrent même l’utilisation imbriquée de ces derniers 😉
Tu nous mets un exemple en ligne ? (j’ai la flemme de le tester en local)
Attention pas de double label, no-go en accessibilité
Si tu veux t’amuser, tu peux jeter un oeil à ARIA aussi : l’équivalent du label c’est aria-labelledby, et une description supplémentaire s’obtient avec aria-describedby.
Installe NVDA et teste sur Firefox 3.5 l’exemple de Marco Zehe pour le voir en action.
Stéphane : ok, noté (j’apprends des trucs) ! Ça pose quoi comme souci précisément ?
NVDA est installé, mais tout comme avec Jaws je galère toujours pour l’utiliser convenablement. Sans compter les bons maux de tête à chaque l’utilisation.
Enfin, il faudra que je me force : tu as raison.
PS : l’exemple en ligne est ici.
Yves, si je suis bien :
kbdpour ce genre d’utilisation.Et par ailleurs :
<samp><kbd>toto</kbd></samp>s’utilise pour reprendre des données saisies par l’utilisateur (ex : « vous recherchez le terme toto ») ;<kbd><samp>Fichier</samp></kbd>s’utilise pour reprendre des données fournies par le système (ex : « cliquez sur Fichier puis Imprimer ») ;<kbd><kbd>Ctrl</kbd> + <kbd>P</kbd></kbd>s’utilise pour les combinaisons (ex : « appuyez sur Ctrl + P »).On rigole bien quand même, hein les copains ?
[…] "On rigole bien quand même, hein les copains ?" © Vincent http://www.htmlzengarden.com/2009/10/pre-remplir_les_champs_textes_suite/ […]
Pour tenter de répondre dans l’ordre :
Si tu mets deux labels, je n’en lis qu’un. Je ne sais pas forcément lequel sera lu, mais là n’est pas la question. Ton but ici est de donner deux informations, et le label ne le permet pas.
En revanche ton exemple 2 avec de l’ARIA pourra donner :
Laisser un commentaire