Interactions clavier

Découvrez comment concevoir et optimiser vos applications Windows afin qu’elles fournissent les meilleures expériences pour les utilisateurs d’alimentation au clavier et celles présentant des handicaps et d’autres exigences d’accessibilité.

Sur les appareils, l’entrée au clavier est une partie importante de l’expérience globale d’interaction de l’application Windows. Une expérience de clavier bien conçue permet aux utilisateurs de naviguer efficacement dans l’interface utilisateur de votre application et d’accéder à ses fonctionnalités complètes sans jamais lever les mains du clavier.

Les modèles d’interaction courants sont partagés entre le clavier et le boîtier de commande

Dans cette rubrique, nous nous concentrons spécifiquement sur la conception d’applications Windows pour l’entrée au clavier sur les PC. Toutefois, une expérience de clavier bien conçue est importante pour prendre en charge les outils d’accessibilité tels que le Narrateur Windows, à l’aide de claviers logiciels tels que le clavier tactile et le clavier visuel (OSK) et pour gérer d’autres types d’appareils d’entrée, tels qu’un pavé de jeu ou un contrôle à distance.

De nombreuses recommandations et recommandations présentées ici, notamment les visuels de focus, lesclés d’accès et la navigation de l’interface utilisateur, s’appliquent également à ces autres scénarios.

NOTE Bien que les claviers matériels et logiciels soient utilisés pour l’entrée de texte, le focus de cette rubrique est la navigation et l’interaction.

Prise en charge intégrée

En plus de la souris, le clavier est le périphérique le plus largement utilisé sur les PC et, par conséquent, constitue une partie fondamentale de l’expérience pc. Les utilisateurs de PC s’attendent à une expérience complète et cohérente du système et des applications individuelles en réponse à l’entrée au clavier.

Tous les contrôles UWP incluent la prise en charge intégrée des expériences de clavier enrichies et des interactions utilisateur, tandis que la plateforme elle-même fournit une base étendue pour la création d’expériences de clavier qui vous conviennent le mieux à la fois à vos contrôles et applications personnalisés.

UWP prend en charge le clavier avec n’importe quel appareil

Expériences de base

Comme mentionné précédemment, les appareils d’entrée tels qu’un pavé de jeu et un contrôle à distance et des outils d’accessibilité tels que le Narrateur partagent une grande partie de l’expérience d’entrée du clavier pour la navigation et la commande. Cette expérience courante entre les types d’entrée et les outils réduit le travail supplémentaire de vous et contribue à l’objectif « générer une fois, exécuter n’importe où » de la plateforme Windows universelle.

Si nécessaire, nous allons identifier les principales différences que vous devez connaître et décrire les atténuations que vous devez prendre en compte.

Voici les appareils et les outils abordés dans cette rubrique :

Expériences personnalisées et clavier efficace

Comme mentionné, la prise en charge du clavier est essentielle pour garantir que vos applications fonctionnent bien pour les utilisateurs avec différentes compétences, capacités et attentes. Nous vous recommandons de hiérarchiser les éléments suivants.

• Prise en charge de la navigation et de l’interaction au clavier
  • Assurez-vous que les éléments interactifs sont identifiés comme des points d'arrêt de tabulation (et que les éléments non interactifs ne le sont pas), et que l'ordre de navigation est logique et prévisible (voir Points d'arrêt de tabulation)
  • Définir le focus initial sur l’élément le plus logique (voir Focus initial)
  • Fournir une navigation par touches de direction pour les « navigations internes » (voir Navigation)
• Prise en charge des raccourcis clavier
  • Fournir des touches d’accélérateur pour les actions rapides (voir Accélérateurs)
  • Fournir des clés d’accès pour naviguer dans l’interface utilisateur de votre application (voir Clés d’accès)

Visuels de mise au point

UWP prend en charge une conception visuelle de focus unique qui fonctionne bien pour tous les types et expériences d’entrée.

Visuel de mise au point

• S’affiche lorsqu’un élément d’interface utilisateur reçoit le focus d’un clavier et/ou d’un boîtier de commande/télécommande
• Est rendu sous la forme d’une bordure mise en surbrillance autour de l’élément d’interface utilisateur pour indiquer qu’une action peut être effectuée
• Aide un utilisateur à naviguer dans une interface utilisateur d’application sans perdre
• Peut être personnalisé pour votre application (voir visuels de mise au point haute visibilité)

NOTE Le visuel de focus UWP n’est pas identique au rectangle de focus du Narrateur.

Taquets de tabulation

Pour utiliser un contrôle (y compris les éléments de navigation) avec le clavier, le contrôle doit avoir le focus. Un moyen pour un contrôle de recevoir le focus clavier est de le rendre accessible via la navigation par onglets en l’identifiant comme un point de tabulation dans l’ordre de tabulation de votre application.

Pour qu’un contrôle soit inclus dans l’ordre de tabulation, la propriété IsEnabled doit être définie sur true et la propriété IsTabStop doit être définie sur true.

Pour exclure spécifiquement un contrôle de l’ordre de tabulation, définissez la propriété IsTabStop sur false.

Par défaut, l’ordre de tabulation reflète l’ordre dans lequel les éléments d’interface utilisateur sont créés. Par exemple, si un StackPanel contient un Button, un Checkbox, et un TextBox, l’ordre de tabulation est Button, Checkboxet TextBox.

Vous pouvez remplacer l’ordre de tabulation par défaut en définissant la propriété TabIndex .

L’ordre de tabulation doit être logique et prévisible

Un modèle de navigation au clavier bien conçu, à l’aide d’un ordre de tabulation logique et prévisible, rend votre application plus intuitive et aide les utilisateurs à explorer, découvrir et accéder aux fonctionnalités plus efficacement et plus efficacement.

Tous les contrôles interactifs doivent avoir des tabulations (sauf s'ils se trouvent dans un groupe), tandis que les contrôles non interactifs, comme les étiquettes, ne doivent pas.

Évitez un ordre de tabulation personnalisé qui entraîne des sauts du focus dans votre application. Par exemple, une liste de contrôles dans un formulaire doit avoir un ordre de tabulation qui passe du haut au bas et de la gauche à droite (en fonction des paramètres régionaux).

Pour plus d’informations sur la personnalisation des taquets de tabulation, reportez-vous à la section Accessibilité du clavier pour plus de détails.

Essayez de coordonner l’ordre de tabulation et l’ordre visuel

La coordination de l’ordre de tabulation et de l’ordre visuel (également appelé ordre de lecture ou ordre d’affichage) permet de réduire la confusion pour les utilisateurs lors de leur navigation dans l’interface utilisateur de votre application.

Essayez de classer et de présenter les commandes, contrôles et contenu les plus importants en premier dans l’ordre de tabulation et l’ordre visuel. Toutefois, la position d’affichage réelle peut dépendre du conteneur de disposition parent et de certaines propriétés des éléments enfants qui influencent la disposition. Plus précisément, les dispositions qui utilisent une métaphore de grille ou une métaphore de table peuvent avoir un ordre visuel assez différent de l’ordre de tabulation.

NOTE L’ordre visuel dépend également des paramètres régionaux et de la langue.

Focus initial

Le focus initial spécifie l’élément d’interface utilisateur qui reçoit le focus lorsqu’une application ou une page est lancée ou activée pour la première fois. Lorsque vous utilisez un clavier, c’est à partir de cet élément que l’utilisateur commence à interagir avec l’interface utilisateur de votre application.

Pour les applications UWP, le focus initial est défini sur l’élément avec le tabIndex le plus élevé qui peut recevoir le focus. Les éléments enfants des contrôles de conteneur sont ignorés. Dans une égalité, le premier élément de l’arborescence visuelle obtient le focus.

Définir le focus initial sur l’élément le plus logique

Définissez le focus initial sur l’élément d’interface utilisateur pour la première action, ou principale, que les utilisateurs sont les plus susceptibles de prendre lors du lancement de votre application ou de la navigation vers une page. Voici quelques exemples :

• Application photo où le focus est défini sur le premier élément d’une galerie
• Application musicale où le focus est défini sur le bouton lecture

Ne définissez pas le focus initial sur un élément qui expose un résultat potentiellement négatif, voire désastreux.

Ce niveau de fonctionnalité doit être le choix d’un utilisateur. La définition du focus initial sur un élément avec un résultat significatif peut entraîner une perte de données ou un accès au système involontaire. Par exemple, ne définissez pas le focus sur le bouton Supprimer lors de la navigation vers un e-mail.

Pour en savoir plus sur l'override de l'ordre de tabulation, consultez Focus navigation.

Navigation

La navigation au clavier est généralement prise en charge via les touches Tab et les touches fléchées.

Par défaut, les contrôles UWP suivent ces comportements de clavier de base :

• Les touches de tabulation naviguent entre les contrôles actionnables/actifs dans l’ordre de tabulation.
• Maj + Tab permet de naviguer les contrôles dans l'ordre de tabulation inverse. Si l’utilisateur a accédé à l’intérieur du contrôle à l’aide de la touche de direction, le focus est défini sur la dernière valeur connue dans le contrôle.
• Les touches de direction déclenchent la « navigation interne » propre au contrôle. Lorsque l’utilisateur active la « navigation interne », les touches de direction ne naviguent pas hors d’un contrôle. Certains exemples comprennent notamment :
  • La touche Flèche vers le haut/Flèche vers le bas déplace le focus à l’intérieur de ListView et MenuFlyout
  • Modifier les valeurs actuellement sélectionnées pour Slider et RatingsControl
  • Déplacer le curseur à l’intérieur TextBox
  • Développer/réduire les éléments à l’intérieur de TreeView

Utilisez ces comportements par défaut pour optimiser la navigation au clavier de votre application.

Utiliser la « navigation interne » avec des ensembles de contrôles associés

La fourniture d’une navigation par touches de direction dans un ensemble de contrôles associés renforce leur relation au sein de l’organisation globale de l’interface utilisateur de votre application.

Par exemple, le ContentDialog contrôle présenté ici fournit une navigation interne par défaut pour une ligne horizontale de boutons (pour les contrôles personnalisés, consultez la section Groupe de contrôles ).

L’interaction avec une collection de boutons connexes est facilitée avec la navigation par touches de direction

Si les éléments sont affichés dans une seule colonne, la touche flèche haut/bas navigue dans les éléments. Si les éléments sont affichés dans une seule ligne, la touche flèche droite/gauche navigue dans les éléments. Si les éléments couvrent plusieurs colonnes, les quatre touches fléchées permettent de naviguer.

Définir un taquet de tabulation unique pour une collection de contrôles en relation

En définissant un seul taquet de tabulation pour une collection de contrôles connexes ou complémentaires, vous pouvez réduire le nombre d’taquets de tabulation globaux dans votre application.

Par exemple, les images suivantes affichent deux contrôles empilés ListView . L'image à gauche montre la navigation par touches de direction utilisée avec un point de tabulation pour naviguer entre les ListView contrôles, tandis que l'image à droite montre comment la navigation entre les éléments enfants pourrait être facilitée et rendue plus efficace en supprimant la nécessité de traverser les contrôles parents avec une touche de tabulation.

L’interaction avec deux contrôles ListView empilés peut être facilitée et plus efficace en éliminant l’arrêt de tabulation et la navigation avec simplement des touches de direction.

Consultez la section Groupe de contrôles pour découvrir comment appliquer les exemples d’optimisation à l’interface utilisateur de votre application.

Interaction et commande

Une fois qu’un contrôle a le focus, un utilisateur peut interagir avec lui et appeler toutes les fonctionnalités associées à l’aide d’une entrée clavier spécifique.

Entrée de texte

Pour les contrôles spécifiquement conçus pour la saisie de texte, tels que TextBox et RichEditBox, toutes les entrées de clavier sont destinées à entrer ou naviguer dans le texte, ce qui prend la priorité sur d'autres commandes de clavier. Par exemple, le menu déroulant d’un AutoSuggestBox contrôle ne reconnaît pas la touche Espace comme commande de sélection.

Touche d’espace

Quand elle n’est pas en mode entrée de texte, la touche Espace appelle l’action ou la commande associée au contrôle prioritaire (tout comme un appui tactile ou un clic avec une souris).

Entrer la clé

La clé Entrée peut effectuer diverses interactions utilisateur courantes, en fonction du contrôle avec focus :

• Active les contrôles de commande tels qu’un Button ou Hyperlink. Pour éviter toute confusion entre les utilisateurs finaux, la touche Entrée active également les contrôles qui ressemblent à des contrôles de commande tels que ToggleButton ou AppBarToggleButton.
• Affiche l’interface utilisateur du sélecteur pour les contrôles tels que ComboBox et DatePicker. La clé Entrée valide également et ferme l’interface utilisateur du sélecteur.
• Active les contrôles de liste tels que ListView, GridViewet ComboBox.
  • La touche Entrée effectue l’action de sélection comme clé d’espace pour les éléments de liste et de grille, sauf s’il existe une action supplémentaire associée à ces éléments (ouverture d’une nouvelle fenêtre).
  • Si une action supplémentaire est associée au contrôle, la touche Entrée effectue l’action supplémentaire et la touche Espace effectue l’action de sélection.

NOTE La touche Entrée et la touche Espace n’effectuent pas toujours la même action, mais souvent.

Touche Échap

La touche Échap permet à un utilisateur d’annuler l’interface utilisateur temporaire (ainsi que toutes les actions en cours dans cette interface utilisateur).

Voici quelques exemples de cette expérience :

• L'utilisateur ouvre un ComboBox avec une valeur sélectionnée et utilise les touches de direction pour déplacer la sélection vers une nouvelle valeur. Appuyer sur la touche Échap ferme ComboBox et réinitialise la valeur sélectionnée à sa valeur d’origine.
• L’utilisateur appelle une action de suppression permanente pour un e-mail et est invité ContentDialog à confirmer l’action. L’utilisateur décide qu’il ne s’agit pas de l’action prévue et appuie sur la touche Échap pour fermer la boîte de dialogue. Lorsque la touche Échap est associée au bouton Annuler , la boîte de dialogue est fermée et l’action est annulée. La touche Échap affecte uniquement l'interface utilisateur temporaire ; elle ne permet pas de fermer ou de revenir en arrière dans l'interface utilisateur de l'application.

Clés d’accueil et de fin

Les touches Accueil et Fin permettent à un utilisateur de faire défiler jusqu’au début ou à la fin d’une région d’interface utilisateur.

Voici quelques exemples de cette expérience :

• Pour ListView et GridView contrôles, la touche Accueil déplace le focus sur le premier élément et le fait défiler dans l’affichage, tandis que la touche De fin déplace le focus sur le dernier élément et le fait défiler dans l’affichage.
• Pour un ScrollView contrôle, la touche Accueil fait défiler vers le haut de la région, tandis que la touche De fin fait défiler vers le bas de la région (le focus n’est pas modifié).

Touches de page vers le haut et de page vers le bas

Les touches page permettent à un utilisateur de faire défiler une région d’interface utilisateur par incréments discrets.

Par exemple, pour ListView et GridView les contrôles, la touche Page vers le haut fait défiler la région vers le haut par une « page » (généralement la hauteur de la fenêtre d’affichage) et déplace le focus vers le haut de la région. Sinon, la touche Page vers le bas fait défiler la région vers le bas par une page et déplace le focus vers le bas de la région.

Touche F6

La touche F6 permet à un utilisateur de parcourir des volets ou des sections importantes de votre application ou interface utilisateur. Maj-F6 effectue généralement des cycles vers l’arrière (voir accessibilité du clavier).

Il s’agit souvent de repères et de titres, mais n’ont pas besoin de correspondre directement.

Par exemple:

• Dans Edge, appuyez sur F6 pour parcourir la barre d’onglets, la barre d’adresses/la barre d’application et le contenu de la page.
• Dans l’Explorateur de fichiers, appuyez sur F6 pour parcourir les sections de l’application.
• Sur le bureau, appuyez sur F6 pour parcourir les parties de la barre des tâches et du bureau.

Raccourcis clavier

Outre l’implémentation de la navigation et de l’activation du clavier, il est également recommandé d’implémenter des raccourcis clavier tels que les raccourcis clavier et les touches d’accès pour des fonctionnalités importantes ou fréquemment utilisées.

Les raccourcis clavier peuvent faciliter l’utilisation de votre application en fournissant à la fois une prise en charge améliorée de l’accessibilité et une efficacité améliorée pour les utilisateurs du clavier.

Un raccourci est une combinaison de clavier qui améliore la productivité en fournissant un moyen efficace pour l’utilisateur d’accéder aux fonctionnalités de l’application. Il existe deux types de raccourci :

• Les accélérateurs sont des raccourcis qui appellent une commande d’application. Votre application peut ou non fournir une interface utilisateur spécifique qui correspond à la commande. Les accélérateurs sont généralement constitués de la touche Ctrl plus une lettre.
• Les touches d’accès rapide sont des raccourcis qui définissent le focus sur une interface utilisateur spécifique dans votre application. Les touches d’accès se composent généralement de la touche Alt et d’une touche de lettre.

Fournir des raccourcis clavier cohérents qui prennent en charge des tâches similaires entre les applications les rend beaucoup plus utiles et puissants et aide les utilisateurs à les mémoriser.

Accélérateurs

Les accélérateurs aident les utilisateurs à effectuer des actions courantes dans une application beaucoup plus rapidement et efficacement.

Exemples d’accélérateurs :

• Appuyez sur Ctrl+ N n’importe où dans l’application Courrier pour lancer un nouvel élément de courrier.
• Appuyez sur Ctrl + E n’importe où dans Microsoft Edge (et de nombreuses applications du Microsoft Store) lance la recherche.

Les accélérateurs présentent les caractéristiques suivantes :

• Ils utilisent principalement des séquences de touches Ctrl et Fn (les touches de raccourci système Windows utilisent également Alt + touches non alphanumériques et la touche Windows).
• Ils sont attribués uniquement aux commandes les plus couramment utilisées.
• Ils sont destinés à être mémorisés et sont documentés uniquement dans les menus, les info-bulles et l’aide.
• Elles ont un effet dans l’ensemble de l’application, lorsqu’elles sont prises en charge.
• Ils doivent être attribués de manière cohérente, car ils sont mémorisés et non directement documentés.

Clés d’accès

Consultez la page Clés d’accès pour plus d’informations détaillées sur la prise en charge des clés d’accès avec UWP.

Les touches d’accès aident les utilisateurs présentant des handicaps moteurs à appuyer sur une touche à la fois pour agir sur un élément spécifique de l’interface utilisateur. En outre, les touches d’accès peuvent être utilisées pour communiquer des touches de raccourci supplémentaires pour aider les utilisateurs avancés à effectuer rapidement des actions.

Les clés d’accès présentent les caractéristiques suivantes :

• Ils utilisent la touche Alt et une touche alphanumérique.
• Ils sont principalement destinés à l’accessibilité.
• Elles sont documentées directement dans l’interface utilisateur, adjacentes au contrôle, par le biais de conseils clés.
• Ils n’ont effet que dans la fenêtre active et accèdent à l’élément de menu ou au contrôle correspondant.
• Les clés d’accès doivent être attribuées de manière cohérente aux commandes couramment utilisées (en particulier les boutons de validation), dans la mesure du possible.
• Ils sont localisés.

Raccourcis clavier courants

Le tableau suivant est un petit exemple de raccourcis clavier fréquemment utilisés.

Pour obtenir la liste complète des raccourcis système Windows, consultez les raccourcis clavier pour Windows. Pour connaître les raccourcis d’application courants, consultez les raccourcis clavier pour les applications Microsoft.

Expériences avancées

Dans cette section, nous abordons quelques-unes des expériences d’interaction clavier plus complexes prises en charge par les applications UWP, ainsi que certains comportements que vous devez savoir quand votre application est utilisée sur différents appareils et avec différents outils.

Groupe de contrôles

Vous pouvez regrouper un ensemble de contrôles connexes ou complémentaires dans un « groupe de contrôles » (ou zone directionnelle), qui active la « navigation interne » à l’aide des touches de direction. Le groupe de contrôle peut être constitué d'un seul taquet de tabulation, ou vous pouvez spécifier plusieurs taquets de tabulation dans le groupe de contrôle.

Navigation par touches de direction

Les utilisateurs s’attendent à prendre en charge la navigation par touches de direction lorsqu’il existe un groupe de contrôles similaires associés dans une région d’interface utilisateur :

• AppBarButtons dans un CommandBar
• ListItems ou GridItems à l’intérieur de ListView ou GridView
• Buttons à l'intérieur de ContentDialog

Les contrôles UWP prennent en charge la navigation par défaut par touches de direction. Pour les dispositions personnalisées et les groupes de contrôles, utilisez cette option XYFocusKeyboardNavigation="Enabled" pour fournir un comportement similaire.

Envisagez d’ajouter la prise en charge de la navigation par touches de direction lors de l’utilisation des contrôles suivants :

Taquets de tabulation

En fonction des fonctionnalités et de la disposition de votre application, la meilleure option de navigation pour un groupe de contrôles peut être un seul taquet de tabulation avec une navigation de flèche vers des éléments enfants, plusieurs taquets de tabulation ou une combinaison.

Utiliser plusieurs taquets de tabulation et touches fléchées pour les boutons

Les utilisateurs de l’accessibilité s’appuient sur des règles de navigation au clavier bien établies, qui n’utilisent généralement pas de touches de direction pour naviguer dans une collection de boutons. Toutefois, les utilisateurs sans déficience visuelle peuvent sentir que le comportement est naturel.

Dans ce cas, un exemple de comportement UWP par défaut est le ContentDialog. Bien que les touches de direction puissent être utilisées pour naviguer entre les boutons, chaque bouton est également un point de tabulation.

Affecter un taquet d’onglet unique à des modèles d’interface utilisateur familiers

Dans les cas où votre disposition suit un modèle d’interface utilisateur bien connu pour les groupes de contrôles, l’affectation d’un seul taquet de tabulation au groupe peut améliorer l’efficacité de la navigation pour les utilisateurs.

Voici quelques exemples :

• RadioButtons
• Multiples ListViews qui ressemblent et se comportent comme un seul ListView
• Toute interface utilisateur faite pour ressembler à la grille des vignettes (par exemple, les vignettes du menu Démarrer)

Spécification du comportement du groupe de contrôles

Utilisez les API suivantes pour prendre en charge le comportement du groupe de contrôle personnalisé (toutes sont décrites plus en détail plus loin dans cette rubrique) :

• XYFocusKeyboardNavigation active la navigation par touches de direction entre les contrôles
• TabFocusNavigation indique s’il existe plusieurs taquets de tabulation ou un seul taquet de tabulation
• FindFirstFocusableElement et FindLastFocusableElement définissent le focus sur le premier élément avec la clé d’accueil et le dernier élément avec la clé de fin

L’image suivante montre un comportement de navigation au clavier intuitif pour un groupe de boutons radio associés. Dans ce cas, nous vous recommandons un seul taquet de tabulation pour le groupe de contrôles, la navigation interne entre les boutons radio à l’aide des touches fléchées, la touche Home liée au premier bouton radio et la touche End liée au dernier bouton radio.

Clavier et Narrateur

Le Narrateur est un outil d’accessibilité de l’interface utilisateur destiné aux utilisateurs clavier (d’autres types d’entrée sont également pris en charge). Toutefois, les fonctionnalités du Narrateur dépassent les interactions clavier prises en charge par les applications UWP et des soins supplémentaires sont nécessaires lors de la conception de votre application UWP pour le Narrateur. (La page de base du Narrateur vous guide tout au long de l’expérience utilisateur du Narrateur.)

Voici quelques-unes des différences entre les comportements du clavier UWP et celles prises en charge par le Narrateur :

• Combinaisons de touches supplémentaires pour la navigation vers les éléments d’interface utilisateur qui ne sont pas exposés par le biais de la navigation au clavier standard, telles que le verrou caps + touches de direction pour lire les étiquettes de contrôle.
• Navigation vers les éléments désactivés. Par défaut, les éléments désactivés ne sont pas exposés par le biais de la navigation au clavier standard.
• Contrôlez les « vues » pour une navigation plus rapide en fonction de la granularité de l’interface utilisateur. Les utilisateurs peuvent accéder à des éléments, des caractères, des mots, des lignes, des paragraphes, des liens, des titres, des tableaux, des repères et des suggestions. La navigation au clavier standard expose ces objets sous la forme d’une liste plate, ce qui peut rendre la navigation fastidieuse, sauf si vous fournissez des touches de raccourci.

Étude de cas – Contrôle AutoSuggestBox

Le bouton de recherche du AutoSuggestBox n'est pas accessible via la navigation standard avec les touches Tab et flèches, car l'utilisateur peut appuyer sur la touche Entrée pour soumettre la requête de recherche. Toutefois, il est accessible via le Narrateur lorsque l’utilisateur appuie sur Majs Lock + une touche de direction.

Avec le clavier, les utilisateurs appuient sur la touche Entréepour envoyer une requête de recherche

Clavier, pavé de jeu et contrôle à distance

Les pavés de jeu et les contrôles à distance prennent en charge de nombreux comportements et expériences de clavier UWP. Toutefois, en raison de l’absence de différentes options de touche disponibles sur un clavier, le pavé de jeu et le contrôle à distance manquent de nombreuses optimisations du clavier (le contrôle à distance est encore plus limité que le pavé de jeu).

Pour plus d'informations sur la prise en charge de la manette de jeu et de la télécommande par UWP, consultez la section "Interactions avec le pavé de jeu et la télécommande".

Voici quelques mappages de touches entre clavier, pavé de jeu et contrôle à distance.

Voici quelques différences clés que vous devez connaître lors de la conception de votre application UWP à utiliser avec le pavé de jeu et l’utilisation du contrôle à distance :

• L’entrée de texte exige que l’utilisateur appuie sur A pour activer un contrôle de texte.

• La navigation focus n’est pas limitée aux groupes de contrôle, les utilisateurs peuvent naviguer librement vers n’importe quel élément d’interface utilisateur focusable dans l’application.

  NOTE Le focus peut se déplacer vers n’importe quel élément d’interface utilisateur focusable dans la direction de la touche, sauf s’il se trouve dans une interface utilisateur de superposition ou si l’engagement de focus est spécifié, ce qui empêche le focus d’entrer/quitter une région jusqu’à ce qu’il soit engagé/désengagé avec le bouton A. Pour plus d’informations, consultez la section de navigation directionnelle .

• Les boutons D-pad et stick gauche sont utilisés pour déplacer le focus entre les contrôles et pour la navigation interne.

  NOTE Le boîtier de commande et le contrôle à distance accèdent uniquement aux éléments qui se trouvent dans le même ordre visuel que la touche directionnelle enfoncée. La navigation est désactivée dans cette direction lorsqu’aucun élément suivant ne peut recevoir le focus. Selon la situation, les utilisateurs du clavier n’ont pas toujours cette contrainte. Pour plus d’informations, consultez la section Optimisation du clavier intégrée .

Navigation directionnelle

La navigation directionnelle est gérée par une classe d’assistance du Gestionnaire de focus UWP, qui prend la touche directionnelle enfoncée (touche de direction, pavé D) et tente de déplacer le focus dans la direction visuelle correspondante.

Contrairement au clavier, lorsqu’une application désactive le mode souris, la navigation directionnelle est appliquée dans l’ensemble de l’application pour le boîtier de commande et le contrôle à distance. Pour plus d’informations sur l’optimisation de la navigation directionnelle, consultez le Boîtier de commande et les interactions de contrôle à distance .

NOTE La navigation à l’aide de la touche Tab du clavier n’est pas considérée comme une navigation directionnelle. Pour plus d’informations, consultez la section Taquets de tabulation .

Optimisation du clavier intégrée

Selon la disposition et les contrôles utilisés, les applications UWP peuvent être optimisées spécifiquement pour l’entrée au clavier.

L’exemple suivant montre un groupe d’éléments de liste, d’éléments de grille et d’éléments de menu qui ont été affectés à un seul taquet de tabulation (voir la section Taquets de tabulation ). Lorsque le groupe a le focus, la navigation interne est effectuée avec les touches de direction dans l’ordre visuel correspondant (voir la section Navigation ).

Navigation à l'aide de la flèche directionnelle pour une seule colonne

Navigation par flèches de ligne unique

Navigation à plusieurs colonnes/flèches de ligne

Enveloppement homogène des éléments de la liste et de la grille

La navigation directionnelle n’est pas toujours la méthode la plus efficace pour parcourir plusieurs lignes et colonnes d’éléments List et GridView.

NOTE Les éléments de menu sont généralement des listes de colonnes uniques, mais des règles de focus spéciales peuvent s’appliquer dans certains cas (voir l’interface utilisateur contextuelle).

Les objets List et Grid peuvent être créés avec plusieurs lignes et colonnes. Il s'agit généralement de l'ordre par lignes (où les éléments remplissent d'abord la ligne entière avant de remplir la ligne suivante) ou de l'ordre par colonnes (où les éléments remplissent d'abord la colonne entière avant de remplir la colonne suivante). L’ordre principal de ligne ou de colonne dépend de la direction de défilement et vous devez vous assurer que l’ordre des éléments n’est pas en conflit avec cette direction.

Dans l’ordre principal des lignes (où les éléments se remplissent de gauche à droite, en haut en bas), lorsque le focus se trouve sur le dernier élément d’une ligne et que la flèche droite est enfoncée, le focus est déplacé vers le premier élément de la ligne suivante. Ce même comportement se produit dans l’inverse : lorsque le focus est défini sur le premier élément d’une ligne et que la touche flèche gauche est enfoncée, le focus est déplacé vers le dernier élément de la ligne précédente.

Dans l’ordre principal des colonnes (où les éléments se remplissent en haut en bas, à gauche à droite), lorsque le focus se trouve sur le dernier élément d’une colonne et que l’utilisateur appuie sur la flèche bas, le focus est déplacé vers le premier élément de la colonne suivante. Ce même comportement se produit dans l’inverse : lorsque le focus est défini sur le premier élément d’une colonne et que la touche flèche haut est enfoncée, le focus est déplacé vers le dernier élément de la colonne précédente.

Interface utilisateur de popup

Comme mentionné, vous devez essayer de vérifier que la navigation directionnelle correspond à l’ordre visuel des contrôles dans l’interface utilisateur de votre application.

Certains contrôles (tels que le menu contextuel, le menu de débordement de la barre de commandes et le menu de suggestion automatique) affichent un popup de menu dans une position et une direction (vers le bas par défaut) par rapport au contrôle principal et l'espace disponible sur l'écran. Notez que la direction d’ouverture peut être affectée par divers facteurs au moment de l’exécution.

Pour ces contrôles, lorsque le menu est ouvert pour la première fois (et qu’aucun élément n’a été sélectionné par l’utilisateur), la touche de direction bas définit toujours le focus sur le premier élément, tandis que la touche flèche haut définit toujours le focus sur le dernier élément du menu.

Si le dernier élément a le focus et que la flèche bas est enfoncée, le focus se déplace vers le premier élément du menu. De même, si le premier élément a le focus et que la flèche haut est enfoncée, le focus se déplace vers le dernier élément du menu. Ce comportement est appelé vélo et est utile pour naviguer dans des menus contextuels qui peuvent s’ouvrir dans des directions imprévisibles.

Nous vous recommandons d’émuler ces mêmes comportements dans vos contrôles personnalisés. Vous trouverez un exemple de code sur l’implémentation de ce comportement dans la documentation de navigation du focus programmatique.

Tester votre application

Testez votre application avec tous les appareils d’entrée pris en charge pour vous assurer que les éléments d’interface utilisateur peuvent être accédés de manière cohérente et intuitive et qu’aucun élément inattendu n’interfère avec l’ordre de tabulation souhaité.

Articles connexes

• Événements clavier
• Identifier les appareils d’entrée
• Répondre à la présence du clavier tactile
• exemple de visuels de Focus
• Spécificités du contrôle NavigationView pour la navigation au clavier
• Accessibilité du clavier

Appendice

Clavier logiciel

Un clavier logiciel s’affiche à l’écran et est utilisé au lieu du clavier physique pour taper et entrer des données à l’aide de la touche tactile, de la souris, du stylet/stylet ou d’un autre appareil pointant. Sur les appareils de jeu, les touches individuelles doivent être sélectionnées en déplaçant l'indicateur de focus ou en utilisant des touches de raccourci sur une manette de jeu ou une télécommande.

Clavier tactile

Clavier tactile Windows 11

Selon l’appareil, le clavier tactile s’affiche lorsqu’un champ de texte ou un autre contrôle de texte modifiable se concentre, ou lorsque l’utilisateur l’active manuellement via le Centre de notification :

Si votre application définit le focus par programmation sur un contrôle d’entrée de texte, le clavier tactile n’est pas appelé. Cela élimine les comportements inattendus qui ne sont pas initiés directement par l’utilisateur. Toutefois, le clavier se masque automatiquement lorsque le focus est déplacé par programme vers un contrôle d’entrée non texte.

Le clavier tactile reste généralement visible pendant que l’utilisateur navigue entre les contrôles d’un formulaire. Ce comportement peut varier en fonction des autres types de contrôle dans le formulaire.

Voici une liste de contrôles non modifiables qui peuvent recevoir le focus pendant une saisie de texte à l’aide du clavier tactile sans fermer le clavier. Plutôt que de désorienter inutilement l’interface utilisateur et potentiellement désorienter l’utilisateur, le clavier tactile reste en vue, car l’utilisateur est susceptible de revenir en arrière entre ces contrôles et l’entrée de texte avec le clavier tactile.

• Case à cocher
• Zone de liste déroulante
• Case d’option
• Barre de défilement
• Tree
• Élément d’arborescence
• Menu
• Barre de menus
• Élément de menu
• Barre d'outils
• Liste
• Élément de liste

Voici des exemples de différents modes pour le clavier tactile. La première image est la disposition par défaut, la seconde est la disposition développée (qui peut ne pas être disponible dans toutes les langues).

Clavier tactile en mode de disposition par défaut

Clavier tactile en mode disposition étendue

Les interactions avec le clavier réussies permettent aux utilisateurs d’accomplir des scénarios d’application de base à l’aide uniquement du clavier ; autrement dit, les utilisateurs peuvent atteindre tous les éléments interactifs et activer les fonctionnalités par défaut. Un certain nombre de facteurs peuvent affecter le degré de réussite, notamment la navigation au clavier, les touches d’accès pour l’accessibilité et les touches d’accélérateur (ou raccourci) pour les utilisateurs avancés.

Clavier visuel

Comme le clavier tactile, le clavier visuel (OSK) est un visuel, un clavier logiciel utilisé au lieu du clavier physique pour taper et entrer des données à l’aide de la touche tactile, de la souris, du stylet ou d’un autre appareil pointant (un écran tactile n’est pas obligatoire). Le kit OSK est fourni pour les systèmes qui n’ont pas de clavier physique ou pour les utilisateurs dont les déficiences de mobilité les empêchent d’utiliser des périphériques d’entrée physique traditionnels. L'OSK émule la plupart, si ce n'est la totalité, des fonctionnalités d’un clavier physique.

L'OSK peut être activé à partir de la page Clavier dans les paramètres Facilité d'accès >.

NOTE La clé OSK a la priorité sur le clavier tactile, ce qui ne s’affiche pas si la clé OSK est présente.

Clavier visuel

Clavier à l'écran Xbox One

Pour plus d’informations, consultez Utiliser le clavier visuel pour taper.