Navigation à l'aide du clavier

Ce guide explique comment utiliser la navigation au clavier par défaut telle qu'elle est actuellement implémentée dans Blockly.

Remarque :Il s'agit d'un espace hautement expérimental. Nous considérons que les bonnes pratiques changent fréquemment à mesure que de plus en plus de personnes effectuent des tests et des recherches dans ce domaine. Si vous souhaitez configurer la navigation au clavier d'une autre manière, consultez la section Tests ci-dessous.

Utilisation de la navigation au clavier

Pour que la navigation au clavier aboutisse, l'utilisateur doit pouvoir effectuer les tâches suivantes:

• Se déplacer dans l'espace de travail
• Connecter des blocs dans un espace de travail
• Ajouter un volume à l'espace de travail
• Dissocier des blocs
• Naviguer dans la boîte à outils
• Naviguer dans le menu déroulant
• Insérer des blocs depuis le menu déroulant

La section ci-dessous explique comment la navigation au clavier par défaut de Blockly effectue ces tâches.

Activer la navigation au clavier

L'utilisateur peut activer et désactiver la navigation au clavier en appuyant sur Maj+Ctrl+k. Lorsque la navigation au clavier est activée pour la première fois, une ligne rouge clignotante apparaît dans l'espace de travail. C'est le curseur. Elle indique la position actuelle de l'utilisateur et des informations actualisées lorsqu'il parcourt l'espace de travail.

Appuyez sur Entrée pour créer une ligne bleue à l'emplacement actuel du repère de l'utilisateur. Un repère affiche un emplacement cible pour l'insertion d'un bloc. Elle n'est pas mise à jour lorsque vous déplacez le curseur dans l'espace de travail.

Utiliser le curseur par défaut

L'espace de travail est composé d'entrées, de champs, de connexions, de blocs et de coordonnées de l'espace de travail. Le curseur par défaut se déplace dans l'espace de travail en divisant tous les composants en différents niveaux.

Pour passer d'un niveau à l'autre, utilisez les touches A et D. Pour naviguer dans un niveau, utilisez les touches W et S.

Au niveau de l'espace de travail

Activez le mode de navigation au clavier en appuyant sur Maj+Ctrl+k. Le curseur est alors placé sur l'espace de travail ou sur le premier bloc de celui-ci. Si le curseur se trouve sur un bloc, déplacez-le au niveau de l'espace de travail en appuyant deux fois sur A. Pour déplacer le curseur sur l'espace de travail, appuyez sur Maj+WASD. Pour passer au niveau de la pile, utilisez la touche D.

Au niveau de la pile

Au niveau de la pile, vous pouvez naviguer entre les piles de blocs de l'espace de travail à l'aide des touches W et S. À ce niveau, le curseur est représenté par un rectangle rouge uni autour de tous les blocs d'une pile. Pour accéder au premier bloc de la pile sélectionnée, utilisez la touche D.

Niveau de bloc et de connexion

Ce niveau contient un bloc et toutes les connexions extérieures du bloc. Le curseur par défaut est configuré pour ignorer le bloc s'il existe une connexion précédente ou de sortie. S'il n'en existe aucune, le curseur se déplacera sur le bloc, comme illustré ci-dessous.

Les trois connexions externes possibles sont présentées ci-dessous.

Au niveau du bloc et de la connexion, vous pouvez naviguer dans les connexions externes à l'aide des touches W et S. À ce niveau, le curseur est représenté par un contour rouge clignotant de la connexion actuelle. Pour accéder au premier champ ou à la première entrée d'un bloc, appuyez sur D.

Champs et niveau de saisie

Ce niveau contient l'ensemble des champs et des entrées du bloc. Vous trouverez ci-dessous des exemples de champs et d'entrées.

À ce niveau, vous pouvez naviguer entre les champs modifiables et les entrées du bloc actuel à l'aide des touches W et S. Pour un champ, le curseur est un rectangle rouge uni. Pour une entrée, le curseur est une pièce de puzzle rouge clignotante. Lorsque le curseur se trouve sur une entrée, appuyez sur D pour accéder au bloc connecté.

Lorsque le curseur se trouve sur un champ, appuyez sur Entrée pour le modifier.

Des blocs de connexion dans l'espace de travail

1. Accédez à votre connexion cible à l'aide des touches WASD
2. Marquez la connexion à l'aide de la touche Entrée.
3. Accéder à un point de connexion valide à l'aide des touches WASD
4. Connectez les deux blocs à l'aide de la touche I (pour insérer).

Déplacer un bloc dans l'espace de travail

Normalement, dans Blockly, vous déplacez un bloc vers l'espace de travail en le sélectionnant, en le faisant glisser à la position souhaitée, puis en le relâchant. À l'aide de raccourcis clavier, vous marquez votre emplacement cible, accédez au bloc que vous souhaitez déplacer, puis dites-lui de se déplacer.

1. Accédez à une position de l'espace de travail à l'aide des touches Maj+WASD
2. Marquez cet emplacement sur l'espace de travail à l'aide de la touche Entrée.
3. Accédez au bloc que vous souhaitez déplacer à l'aide des touches WASD
4. Déplacer le volume jusqu'à l'emplacement indiqué à l'aide de la touche I

Dissociation de blocs

Normalement, dans Blockly, vous déconnectez deux blocs en sélectionnant le bloc inférieur et en le faisant glisser hors du bloc parent. Avec les raccourcis clavier, vous déconnectez des blocs en appuyant sur X avec le curseur sur la connexion à rompre.

1. Accédez à la connexion que vous souhaitez interrompre à l'aide des touches WASD
2. Interrompre la connexion avec X

Insertion d'un volume à partir de la boîte à outils

1. Appuyez sur la touche T pour ouvrir la boîte à outils
2. Utilisez les touches W et S pour passer d'une catégorie à une autre
3. Appuyez sur la touche D pour accéder aux blocs dans le menu déroulant.
4. Naviguez dans les blocs à l'aide des touches W et S.
5. Appuyez sur la touche Entrée pour insérer un volume depuis le menu déroulant.

Expérimentation

Nous pensons qu'il existe quatre domaines principaux dans lesquels les utilisateurs pourraient être intéressés par des tests:

1. Mappages de touches: quelles clés doivent correspondre à quelles actions.
2. Texte pour les lecteurs d'écran/Logging/Avertissements: manière dont un lecteur d'écran doit lire les emplacements du curseur, ainsi que les erreurs ou avertissements.
3. Navigation dans l'espace de travail: comment un utilisateur parcourt les différents blocs, champs, entrées et connexions de l'espace de travail.
4. Apparence du curseur: apparence du curseur et du repère

Pour en savoir plus sur l'utilisation de ces API, consultez l'atelier de programmation sur la navigation au clavier Blockly.

Si vous souhaitez tester d'autres domaines que nous pourrions vous aider, veuillez remplir le formulaire.

Questions fréquentes

Q: Pourquoi n'avez-vous pas utilisé les touches fléchées pour naviguer au clavier ?
R:Les lecteurs d'écran utilisent généralement les touches fléchées. Comme nous ne voulions pas interférer avec cela, nous avons choisi d'utiliser les touches WASD.
Cependant, nous sommes conscients que chaque personne a des besoins différents. C'est pourquoi nous vous recommandons vivement de créer un moyen simple de modifier les mappages de clés.

Q: Cela semble assez compliqué. Pourquoi avons-nous besoin de différentes couches ?
R:En ce qui concerne la navigation au clavier, nous avions besoin d'une méthode structurée pour se déplacer entre les différents blocs, connexions, champs, entrées et coordonnées de l'espace de travail.
En interne, nous représentons cela à l'aide d'une arborescence syntaxique abstraite (AST). L'implémentation par défaut du curseur ne s'éloigne pas de ce modèle.Elle est intentionnelle afin d'aider les développeurs à mieux comprendre l'architecture sous-jacente. D'autres cursors peuvent être plus faciles à comprendre pour un utilisateur final.

Limites

Il n'est pas encore possible d'accéder à des composants qui ne sont pas bloqués (par exemple, la corbeille, les boutons de zoom et les boutons déroulants). Pour en savoir plus sur les limites, consultez la liste des bugs de navigation au clavier.