Meilleure combinaison de touches de modificateur pour les raccourcis Web

Question

De nombreux utilisateurs de mon site Web ont demandé des raccourcis clavier pour accéder aux pages fréquemment consultées. Je sais que les liens peuvent avoir accesskey mais pour y accéder, il faut incohérent entre les navigateurs . Je vais utiliser JavaScript pour détecter les raccourcis et j'aimerais connaître votre avis sur la nature de la ou des touches de modification. Je me penche vers Ctrl+Shift.

balpha · Accepted Answer

Deux exemples ne sont probablement pas suffisants pour appeler cela une "pratique établie", mais il s'agit au moins de deux grands exemples: Google et Twitter n'en utilisent aucun. Ou, si vous voulez le voir de cette façon, leur touche de modification pour la navigation est G.

Pour aller à votre page "favoris" Twitter, vous appuyez sur G, puis F. Pour accéder à votre dossier de brouillons gmail, cliquez sur G puis D.

Les raccourcis de non-navigation utilisent également des lettres simples; par exemple. J pour avancer dans une liste (tweets, emails, etc.), K pour reculer. *

^{* Dans mon livre, c'est absolument faux. Pour moi, "J" à gauche de "K" signifie que "J" doit être "précédent" et "K" doit être "suivant". Cependant, faire le contraire semble être la norme.}

Aucune des deux n'utilise de "vraie" touche modificatrice. Nous commençons également à regarder les raccourcis clavier pour les sites Stack Exchange et nous ferons probablement la même chose. Deux autres raisons que je vois pour ne pas utiliser de touche de modification du tout:

Moins susceptibles de trébucher sur quelque chose qui est déjà utilisé. Toute combinaison de Ctrl, Alt, Méta, Commande, Maj avec une lettre est probablement déjà prise par un système d'exploitation, un gestionnaire de fenêtres, un navigateur, un plugin de navigateur ou un script Greasemonkey. Lettre seulement? Pas tellement.
Plus facile à utiliser. "Appuyez sur Ctrl-Alt-Q pour ouvrir l'onglet Foo, puis sur Meta-Shift-F12 pour exécuter l'action Bar", ce qui ne me facilite pas la tâche et ne me rend pas la vie plus facile, ce qui est le but des raccourcis clavier.

D'autre part, voici deux mises en garde à considérer:

Vous devrez évidemment ignorer les frappes au clavier lorsqu'elles se produisent lorsque l'utilisateur tape dans une zone de texte. Ce n'est pas un problème technique, mais cela signifie que l'utilisateur ne peut pas utiliser les raccourcis pour le moment.

Si, par exemple, votre page est automatiquement centrée sur le champ de recherche ou si votre application Web est très chargée en saisie de texte, cela peut poser problème.
Vous voudrez peut-être penser à activer/désactiver. Les raccourcis clavier sont une fonctionnalité d'utilisateur expérimenté; un utilisateur "normal" peut être surpris de déclencher accidentellement un raccourci clavier (une touche de modification le rendrait moins probable).

Gmail, par exemple, a des raccourcis clavier désactivés par défaut, à l’exception de ? qui (naturellement) montre le raccourci clavier help - avec un lien pour activer/désactiver raccourcis. Je pense que les raccourcis clavier sont un domaine dans lequel vous pouvez dire que vous pouvez en faire un paramètre (nous essayons généralement d'éviter les préférences des utilisateurs sur les sites Stack Exchange), et la solution de Google semble bien convenir.

Mais "off par défaut" cache évidemment la possibilité de découverte, ce qui peut poser problème ou non.

- mais tout bien considéré, "pas de touche de modification" me semble une bonne solution.

Nick · Answer

Il n'y a pas de "meilleur" choix de modificateur de clé universel

Vos meilleures options sont de:

N'utilisez pas de touche de modification (touches uniques uniquement), puis arrêtez la détection lorsque le curseur de l'utilisateur se trouve dans un champ de saisie ou dans une zone de texte, comme le fait Google avec raccourcis Gmail.

-- ou --
Choisissez une valeur par défaut qui convient à la majorité de vos visiteurs en fonction des statistiques du système d'exploitation de vos données Analytics. Autorisez les utilisateurs expérimentés qui souhaitent des raccourcis à les activer et remplacez la touche de modification dans leurs paramètres utilisateur, de la même manière que le logiciel de bureau.

-- ou --
Utilisez une touche "déclencheur" au lieu d'une touche de modification. Considérer ,2 pour aller au deuxième onglet de votre zone de navigation à onglets et ,3 pour aller au troisième, par exemple. La combinaison d'une virgule suivie immédiatement d'un chiffre est suffisamment inhabituelle pour réduire le risque de conflits ou de pressions accidentelles.

Dans tous les cas, vous pourriez envisager de désactiver les touches de raccourci par défaut pour empêcher tout comportement inattendu de la majorité des utilisateurs qui ne se soucient probablement pas des touches de raccourci.

Pourquoi ne pas simplement choisir un modificateur?

La raison pour laquelle je suggère ces méthodes est qu’il n’ya pas de clé de modification multiplate-forme normalisée que vous pouvez considérer comme sûre à utiliser avec JavaScript dans un environnement de navigateur. Tout ce qui contient Ctrl, Shift, Alt, ou Cmd va probablement casser certains raccourcis du navigateur sur certaines plates-formes.

Votre suggestion d'utiliser Ctrl+Shift, par exemple, casse les raccourcis de Firefox sous Windows, dont beaucoup utilisent cette combinaison pour exécuter fonctions spéciales , telles que Ctrl + Shift + D, qui marque tous les onglets ouverts.

Les fabricants de navigateurs utilisent différents raccourcis pour déclencher des clés d'accès sur chaque plate-forme, précisément parce qu'il n'y a pas de standard multiplateforme. Apple utilise Ctrl sur le Mac et Alt sous Windows dans Safari, par exemple.

De plus, chaque navigateur résout les conflits de raccourcis différemment, ce qui entraînera des conséquences inattendues pour vos utilisateurs. Lorsque vous liez une touche à une fonction en JavaScript qui comporte également une liaison en tant que raccourci de navigateur natif ...

Firefox exécutera le raccourci JavaScript tout seul si vous return false; mais exécutera votre fonction JavaScript suivie du raccourci du navigateur Firefox si vous return true; (c.-à-d. Qu'il s'exécute les deux par défaut.)
IE exécutera la fonction JavaScript suivie du raccourci de navigateur IE.
Safari/Chrome/Opera traitera le raccourci du navigateur mais pas celui de JavaScript.

[Source: l'addenda au bas de John Resig's page readme de jquery.hotkeys .]