Info-bulle pour indiquer le raccourci clavier impliquant les touches de curseur
Dans notre application (Web), nous voulons des info-bulles (lire: attributs de titre) qui indiquent également des raccourcis pour les boutons. Nous avons un bouton qui implique les touches du curseur ("flèche").
Nous avons essayé d'utiliser des caractères comme ⬅ et ←, mais ils ne semblent pas corrects. Nous avons également essayé de le préciser, par exemple "Flèche gauche", mais c'est un peu verbeux.
Quelle est la bonne façon de procéder?
Peut-être pourriez-vous essayer une police Dingbat avec de vraies touches du clavier? Quelque chose comme ça:
Les info-bulles de l'attribut de base "title" sont très limitées et ne sont pas votre meilleure option: les navigateurs peuvent ou non les faire apparaître comme vous les attendez.
Je pense que le commentaire de @Rahul est très bon à cet égard: vous voudrez peut-être regarder une solution d'infobulle plus complète. Il existe de nombreuses bibliothèques prédéfinies pour vous donner des info-bulles plus flexibles, solides et attrayantes que l'attribut de base "title".
Si vous regardez l'attribut title pour des raisons d'accessibilité (en tant qu'option de secours à partir de solutions d'infobulles plus complexes), je pense que l'option détaillée (`` Appuyez sur la flèche gauche pour ... '') est votre meilleure option: un lecteur d'écran lirait bien.
Quel est le problème avec votre première icône? Cela me semble presque parfait. Bien sûr, il serait préférable de le voir dans le contexte de vos autres icônes de "raccourci clavier", mais il semble très bien qu'il transmettra les informations importantes, à savoir "c'est la touche de curseur gauche".
Si vous voulez être plus clair, vous pouvez le colorer beige en fonction du fait que c'est la couleur la plus probable de la touche sur laquelle l'utilisateur appuiera. Peut-être que l'ombrage et le remodelage de l'icône aideraient à souligner son "caractère clé".
Si vous allez au-delà de l'utilisation de l'attribut title et utilisez plutôt une solution CSS, vous pouvez réellement fournir à la fois une petite image de la touche du clavier ainsi qu'une brève description en dessous. Il existe une énorme collection de pages Web très intéressantes et des exemples d'images de "CSS Keyboard Key images" utilisent cette phrase dans une recherche d'images Google pour commencer, voici une page savante par quelqu'un qui a craqué la façon dont cela se fait sur les pages Stack Overflow voir: -