touches d'accès

Touches d'accès sont des raccourcis clavier qui améliorent l'utilisabilité et l'accessibilité de vos applications Windows en fournissant un moyen intuitif aux utilisateurs de naviguer et d'interagir rapidement avec l'interface utilisateur d'une application via un clavier au lieu d'un appareil pointeur (par exemple, tactile ou une souris).

L'application Windows fournit une prise en charge intégrée dans les contrôles de plateforme pour les touches d'accès basées sur le clavier et les commentaires associés de l'interface utilisateur via des indications visuelles appelées info-touches.

Pour plus d’informations sur l’appel d’actions courantes dans une application Windows avec des raccourcis clavier, consultez la rubrique Touches d’accélérateur .

Pour créer vos propres raccourcis clavier personnalisés, consultez la rubrique événements clavier .

Aperçu

Une touche access est une combinaison de la touche Alt et d’une ou plusieurs touches alphanumériques, parfois appelées mnemonique , généralement enfoncées séquentiellement, plutôt que simultanément.

Les badges de raccourci sont affichés à côté des contrôles qui prennent en charge les touches d'accès lorsque l'utilisateur appuie sur la touche Alt. Chaque raccourci clavier contient les touches alphanumériques qui activent le contrôle associé.

Appuyez sur la touche Alt pour initialiser la fonctionnalité de touche d'accès et affichez toutes les combinaisons de touches actuellement disponibles dans les info-bulles de touches. Les frappes suivantes sont gérées par le framework de touches d'accès, qui rejette les touches non valides jusqu'à ce qu'une touche d'accès valide soit enfoncée, ou bien que les touches Entrée, Échap, Tab ou Flèche soient enfoncées pour désactiver les touches d'accès et redonner la gestion des frappes à l'application.

Les applications Microsoft Office offrent une prise en charge étendue des touches d'accès. L’image suivante montre l’onglet Accueil de Word avec les touches d’accès activées (remarquez la prise en charge des nombres et des séquences de touches multiples).

badges

badges KeyTip pour touches d'accès dans Microsoft Word

Pour ajouter une clé access à un contrôle, utilisez la propriété AccessKey. La valeur de cette propriété spécifie la séquence de la touche d'accès, le raccourci (si un seul alphanumérique) et l'info-bulle de touche.

<Button Content="Accept" AccessKey="A" Click="AcceptButtonClick" />

Quand utiliser des clés d'accès

Nous vous recommandons de spécifier des touches d'accès partout où cela est approprié dans votre interface utilisateur et de les prendre en charge dans tous les contrôles personnalisés.

1. Access touches rendent votre application plus accessible pour les utilisateurs handicapés moteurs, y compris ceux qui peuvent appuyer sur une seule touche à la fois ou avoir des difficultés à utiliser une souris.

   Une interface utilisateur de clavier bien conçue est un aspect important de l’accessibilité logicielle. Il permet aux utilisateurs présentant des déficiences visuelles ou qui ont certains handicaps moteurs de naviguer dans une application et d’interagir avec ses fonctionnalités. Ces utilisateurs peuvent ne pas être en mesure d’utiliser une souris et s’appuient plutôt sur différentes technologies d’assistance telles que les outils d’amélioration du clavier, les claviers à l’écran, les agrandisseurs d’écran, les lecteurs d’écran et les utilitaires d’entrée vocale. Pour ces utilisateurs, la couverture complète des commandes est cruciale.

2. Les touches d'accès rendent votre application plus accessible pour les utilisateurs qui préfèrent interagir par le biais du clavier.

   Les utilisateurs expérimentés ont souvent une préférence forte pour l’utilisation du clavier, car les commandes basées sur le clavier peuvent être entrées plus rapidement et ne nécessitent pas qu’elles suppriment leurs mains du clavier. Pour ces utilisateurs, l’efficacité et la cohérence sont cruciales ; l’exhaustivité est importante uniquement pour les commandes les plus fréquemment utilisées.

Définir l'étendue de la clé d'accès

Lorsqu'il existe de nombreux éléments sur l'écran qui prennent en charge les touches d'accès, nous vous recommandons de limiter les touches d'accès pour réduire la charge cognitive. Cela réduit le nombre de touches de access sur l’écran, ce qui les rend plus faciles à localiser et améliore l’efficacité et la productivité.

Par exemple, Microsoft Word fournit deux étendues de touches d'accès : une étendue principale pour les onglets du Ruban et une étendue secondaire pour les commandes de l’onglet sélectionné.

Les images suivantes illustrent les deux étendues des clés d'accès dans Word. La première montre les clés de access primaires qui permettent à un utilisateur de sélectionner un onglet et d’autres commandes de niveau supérieur, et la deuxième montre les touches de access secondaires pour l’onglet Accueil.

Touches d'accès principales dans Microsoft Word

Clés d'accès secondaires dans Microsoft Word

Les clés d'accès peuvent être dupliquées pour les éléments dans différents contextes. Dans l’exemple précédent, « 2 » est la clé d'accès pour Annuler dans l’étendue primaire, ainsi que pour « Italique » dans l’étendue secondaire.

Ici, nous montrons comment définir une étendue de clé d'accès.

<CommandBar x:Name="MainCommandBar" AccessKey="M" >
    <AppBarButton AccessKey="G" Icon="Globe" Label="Go"/>
    <AppBarButton AccessKey="S" Icon="Stop" Label="Stop"/>
    <AppBarSeparator/>
    <AppBarButton AccessKey="R" Icon="Refresh" Label="Refresh" IsAccessKeyScope="True">
        <AppBarButton.Flyout>
            <MenuFlyout>
                <MenuFlyoutItem AccessKey="A" Icon="Globe" Text="Refresh A" />
                <MenuFlyoutItem AccessKey="B" Icon="Globe" Text="Refresh B" />
                <MenuFlyoutItem AccessKey="C" Icon="Globe" Text="Refresh C" />
                <MenuFlyoutItem AccessKey="D" Icon="Globe" Text="Refresh D" />
            </MenuFlyout>
        </AppBarButton.Flyout>
    </AppBarButton>
    <AppBarButton AccessKey="B" Icon="Back" Label="Back"/>
    <AppBarButton AccessKey="F" Icon="Forward" Label="Forward"/>
    <AppBarSeparator/>
    <AppBarToggleButton AccessKey="T" Icon="Favorite" Label="Favorite"/>
    <CommandBar.SecondaryCommands>
        <AppBarToggleButton Icon="Like" AccessKey="L" Label="Like"/>
        <AppBarButton Icon="Setting" AccessKey="S" Label="Settings" />
    </CommandBar.SecondaryCommands>
</CommandBar>

CommandBar primaire et les clés d'accès prises en charge

clés d'accès secondaires pour CommandBar

étendue secondaire et touches d'accès prises en charge CommandBar

Éviter les collisions de clés d'accès

Les conflits de touches d'accès se produisent lorsque deux éléments de la même portée ont des touches d'accès en double ou commencent par les mêmes caractères alphanumériques.

Le système résout les clés access dupliquées en traitant la clé access du premier élément ajouté à l’arborescence visuelle, ignorant tous les autres.

Lorsque plusieurs touches d'accès commencent par le même caractère (par exemple, « A », « A1 » et « AB »), le système traite la touche d'accès à un seul caractère et ignore toutes les autres touches.

Évitez les collisions à l’aide de clés d'accès uniques ou en scindant les commandes.

Choisissez les clés d'accès

Tenez compte des éléments suivants lors du choix des clés access :

• Utilisez un caractère unique pour réduire les séquences de touches et prendre en charge les touches d’accélérateur par défaut (Alt+AccessKey)
• Éviter d’utiliser plus de deux caractères
• Éviter les collisions de clés d'accès
• Évitez les caractères difficiles à différencier d’autres caractères, tels que la lettre « I » et le nombre « 1 » ou la lettre « O » et le nombre « 0 ».
• Utilisez des précédents connus d’autres applications populaires telles que Word (« F » pour « Fichier », « H » pour « Accueil », etc.)
• Utilisez le premier caractère du nom de la commande ou un caractère avec une association proche de la commande qui aide à rappeler
  • Si la première lettre est déjà affectée, utilisez une lettre aussi proche que possible de la première lettre du nom de commande (« N » pour Insertion)
  • Utilisez une consonne distinctive à partir du nom de commande (« W » pour l’affichage)
  • Utilisez une voyelle à partir du nom de la commande.

Localiser les clés d'accès

Si votre application va être localisée dans plusieurs langues, vous devez également envisager de localiser les touches d’accès. Par exemple, pour « H » pour « Home » dans en-US et « I » pour « Incio » dans es-ES.

Utilisez l’extension x :Uid dans le balisage pour appliquer des ressources localisées comme indiqué ici :

<Button Content="Home" AccessKey="H" x:Uid="HomeButton" />

Les ressources de chaque langue sont ajoutées aux dossiers String correspondants dans l’project :

Dossiers de chaînes de ressources en anglais et en espagnol

Les clés d'accès localisées sont spécifiées dans votre fichier resources.resw des projets.

Spécifier la propriété AccessKey spécifiée dans le fichier resources.resw

Pour plus d’informations, consultez Traduction des ressources d’interface utilisateur

Positionnement des Keytips

Les touches sont affichées sous forme de badges flottants par rapport à leur élément d’interface utilisateur correspondant, en tenant compte de la présence d’autres éléments d’interface utilisateur, d’autres info-bulles et du bord de l’écran.

En règle générale, l’emplacement des étiquettes de touche par défaut est suffisant et offre une prise en charge intégrée pour une interface utilisateur adaptative.

Exemple de placement automatique de touches de raccourci

Toutefois, si vous avez besoin d’un contrôle supplémentaire sur le positionnement des touches d'accès rapide, nous vous recommandons de suivre les étapes suivantes :

1. Principe d’association évident : l’utilisateur peut associer facilement le contrôle à la touche de raccourci.

   a. L'étiquette d'accès doit être proche de l'élément qui a la touche d'accès (qui en est le propriétaire).
   b. L’info-bulle doit éviter de couvrir les éléments activables qui ont des touches d'accès.
   c. Si une étiquette de touche ne peut pas être placée près de son propriétaire, elle doit le recouvrir. 

2. Découvrabilité : l’utilisateur peut rapidement découvrir le contrôle avec le conseil de touche.

   a. L’étiquette de touche ne chevauche jamais d’autres étiquettes de touche.  

3. Balayage facile : L'utilisateur peut parcourir facilement les raccourcis clavier.

   a. Les touches d’accès doivent être alignées les unes avec les autres et avec l’élément d’interface utilisateur. b. Les touches d’accès doivent être regroupées autant que possible. 

Position relative

Utilisez la propriété KeyTipPlacementMode pour personnaliser l’emplacement de l’info-bulle par élément ou par groupe.

Les modes de placement sont les suivants : haut, bas, droite, gauche, masqué, centre et auto.

Modes de placement d’info-clé

La ligne centrale du contrôle est utilisée pour calculer l’alignement vertical et horizontal du keytip.

L’exemple suivant montre comment définir le placement d’une keytip pour un groupe de contrôles à l’aide de la propriété KeyTipPlacementMode du conteneur StackPanel.

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" KeyTipPlacementMode="Top">
  <Button Content="File" AccessKey="F" />
  <Button Content="Home" AccessKey="H" />
  <Button Content="Insert" AccessKey="N" />
</StackPanel>

Compensations

Utilisez les propriétés KeyTipHorizontalOffset et KeyTipVerticalOffset d'un élément pour un contrôle encore plus précis de la position de l'indicateur de touche.

La propriété KeyTipHorizontalOffset indique la distance à laquelle déplacer l'étiquette de raccourci vers la gauche ou la droite.

Définir des décalages verticaux et horizontaux des keytips pour un bouton

<Button
  Content="File"
  AccessKey="F"
  KeyTipPlacementMode="Bottom"
  KeyTipHorizontalOffset="20"
  KeyTipVerticalOffset="-8" />

Alignement du bord de l’écran {#screen-edge-alignment . ListParagraph}

L’emplacement d’une info-bulle est automatiquement ajusté en fonction du bord de l’écran pour vous assurer que l’info-bulle est entièrement visible. Lorsque cela se produit, la distance entre le point d’alignement du contrôle et du raccourci clavier peut différer des valeurs spécifiées pour les décalages horizontaux et verticaux.

Les touches d’accès sont automatiquement positionnées en fonction du bord de l’écran

Style d’info-clé

Nous vous recommandons d’utiliser la prise en charge intégrée des indicatifs de touche pour les thèmes de la plateforme, y compris le haut contraste.

Si vous devez spécifier vos propres styles d’info-clés, utilisez des ressources d’application telles que KeyTipFontSize (taille de police), KeyTipFontFamily (famille de polices), KeyTipBackground (arrière-plan), KeyTipForeground (premier plan), KeyTipPadding (remplissage), KeyTipBorderBrush(Couleur de bordure) et KeyTipBorderThemeThickness (épaisseur de bordure).

Options de personnalisation des astuces-clavier

Cet exemple montre comment modifier ces ressources d’application :

<Application.Resources>
 <SolidColorBrush Color="DarkGray" x:Key="MyBackgroundColor" />
 <SolidColorBrush Color="White" x:Key="MyForegroundColor" />
 <SolidColorBrush Color="Black" x:Key="MyBorderColor" />
 <StaticResource x:Key="KeyTipBackground" ResourceKey="MyBackgroundColor" />
 <StaticResource x:Key="KeyTipForeground" ResourceKey="MyForegroundColor" />
 <StaticResource x:Key="KeyTipBorderBrush" ResourceKey="MyBorderColor"/>
 <FontFamily x:Key="KeyTipFontFamily">Consolas</FontFamily>
 <x:Double x:Key="KeyTipContentThemeFontSize">18</x:Double>
 <Thickness x:Key="KeyTipBorderThemeThickness">2</Thickness>
 <Thickness x:Key="KeyTipThemePadding">4,4,4,4</Thickness>
</Application.Resources>

Touches d'accès et Narrateur

L’infrastructure XAML expose les propriétés Automation qui permettent UI Automation clients de découvrir des informations sur les éléments de l’interface utilisateur.

Si vous spécifiez la propriété AccessKey sur un contrôle UIElement ou TextElement, vous pouvez utiliser la propriété AutomationProperties.AccessKey pour obtenir cette valeur. Les clients d’accessibilité, tels que le Narrateur, lisent la valeur de cette propriété chaque fois qu’un élément se concentre.

Articles connexes

• Interactions avec le clavier
• Accélérateurs clavier

Échantillons

• galerie WinUI 3