28172 sujets

CSS et mise en forme, CSS3

Raccourcis clavier et la balise kbd

Modérateur
Bonjour,

Après avoir découvert la balise kbd, j'ai décidé d'expérimenter celle-ci pour une liste de raccourcis claviers qu'on peut mettre dans la politique d'accessibilité d'un site.

HTML :

<ul id="liste_raccourcis">
   <li><kbd>&nbsp;0&nbsp;</kbd>&nbsp;:&nbsp;Politique d'accessibilité</li>
   <li><kbd>&nbsp;1&nbsp;</kbd>&nbsp;:&nbsp;Accueil</li>
   <li><kbd>&nbsp;2&nbsp;</kbd>&nbsp;:&nbsp;Panier</li>
   <li><kbd>&nbsp;6&nbsp;</kbd>&nbsp;:&nbsp;Cr&eacute;er ou acc&eacute;der &agrave; votre compte</li>
   <li><kbd>&nbsp;7&nbsp;</kbd>&nbsp;:&nbsp;Connexion</li>
   <li><kbd>&nbsp;9&nbsp;</kbd>&nbsp;:&nbsp;Nous contacter</li>
</ul>


CSS :


#liste_raccourcis kbd
  {
   font: bold 90% Arial, Helvetica, sans-serif;
   border-width: 2px 4px 5px 3px;
   border-style:solid;
   border-color: #CCC #AAA #888 #BBB;
   padding:2px 3px;
   white-space:nowrap;
   color:#555;
   background:#EEE;
  }

#liste_raccourcis li
  {
   margin-top:1.2em;
   list-style-image:none;
   list-style-type:none;
  }


J'ai pensé vous faire partager mon idée, qui me semble à la fois sémantique, accessible et visuellement agréable au niveau graphique. Je dis mon idée, mais probablement que quelqu'un d'autres dans le monde y avait déjà pensé avant moi.

Je l'ai testé dans les navigateurs qui sont à ma disposition, et le seul qui me cause un désagrément est IE 6 sur PC. Lorsque la liste sort de l'espace affiché à l'écran, lorsqu'on scroll pour la voir, les bordures des kbd disparaîssent d'une façon un peu chaotique.

J'attends votre avis là-dessus ! Smiley smile
Modifié le 24 Dec 2004 - 17:08
Bonne idée, c'est en effet très suggestif.

Deux suggestions, mais tu l'as sans doute déjà prévu:
- ne pas oublier d'indiquer qu'une **combinaison de touches** est le plus souvent nécessaire pour activer un accesskey numérique
- remplacer les espaces insécables de <kbd>&nbsp;0&nbsp;</kbd> par une augmentation des paddings droite et gauche. Après tout, la saisie n'est pas "espace" 0 "espace"... Smiley cligne
Bonjour,

Superbe idée !

Mais je viens de faire un test avec IE 6, Opera 7.54 et Firefox 1.0
Je n'ai pas constaté le problème que tu décris.
J'ai essayé avec la feuille de style interne ou externe...
Administrateur
Laurent Denis a écrit :
La page http://www.mozilla.org/support/firefox/keyboard.html est passablement incomplète en ce qui concerne les raccourcis claviers Opera.

C'est plutôt normal puisqu'ils s'agit des raccourcis clavier de Firefox, non ? Smiley confus
Chaque navigateur a quelques spécificités au niveau des raccourcis ?

PS : merci pour les liens supplémentaires.
Modérateur
Laurent Denis a écrit :

remplacer les espaces insécables de <kbd>&nbsp;0&nbsp;</kbd> par une augmentation des paddings droite et gauche.


Ouais, moi aussi l'utilisation des non-breaking spaces m'agaçait un peu. J'hésitais disons. Je vais remplacer ça, comme tu le suggère, pas des paddings.

Pour ce qui est du bug constaté sur IE6, je vais retester demain matin au bureau en isolant la liste, question de m'assurer que ce ne soit pas un autre élément qui vienne interférer avec l'affichage des bordures des kbd.

À plus tard !
Sujet clos
Aller à