Partage via

Accessibilité du clavier

  • Article

La création de l’accessibilité du clavier (pour le matériel traditionnel, modifié ou d’émulation du clavier) dans votre application fournit aux utilisateurs aveugles, ayant une faible vision, des handicaps moteurs ou peu ou pas d’utilisation de leurs mains, la possibilité de naviguer et d’utiliser les fonctionnalités complètes de votre application. En outre, les utilisateurs sans handicap peuvent choisir le clavier pour la navigation en raison de préférences ou d’efficacité.

Si votre application ne fournit pas d’accès au clavier approprié, les utilisateurs aveugles ou ayant des problèmes de mobilité peuvent avoir des difficultés à utiliser votre application.

Navigation au clavier entre les éléments de l’interface utilisateur

Pour interagir avec un contrôle à l’aide du clavier, le contrôle doit avoir le focus. Pour recevoir le focus (sans utiliser de pointeur), le contrôle doit être accessible via la navigation par onglet. Par défaut, l’ordre de tabulation des contrôles est identique à l’ordre dans lequel ils sont ajoutés à une surface de conception, déclarée en XAML ou ajoutées par programmation à un conteneur.

En règle générale, l’ordre de tabulation par défaut est basé sur la façon dont les contrôles sont définis en XAML, en particulier dans l’ordre dans lequel les contrôles sont parcourus par les lecteurs d’écran. Toutefois, l’ordre par défaut ne correspond pas nécessairement à l’ordre visuel. La position d’affichage réelle peut dépendre du conteneur de disposition parent et de différentes propriétés des éléments enfants qui peuvent affecter la disposition.

Pour vous assurer que votre application dispose d’un ordre de tabulation optimal, testez le comportement vous-même. Si vous utilisez une grille ou une table pour votre disposition, l’ordre dans lequel les utilisateurs peuvent lire l’écran par rapport à l’ordre de tabulation peut être très différent. Ce n’est pas toujours un problème, mais veillez simplement à tester les fonctionnalités de votre application par le biais de l’interface tactile et du clavier pour vérifier que votre interface utilisateur est optimisée pour les deux méthodes d’entrée.

Vous pouvez faire correspondre l’ordre de tabulation à l’ordre visuel en ajustant le code XAML ou en remplaçant l’ordre de tabulation par défaut. L’exemple suivant montre comment utiliser la propriété TabIndex avec une disposition Grid qui utilise la navigation sous forme d’onglet de colonne première.

<Grid>
  <Grid.RowDefinitions>...</Grid.RowDefinitions>
  <Grid.ColumnDefinitions>...</Grid.ColumnDefinitions>

  <TextBlock Grid.Column="1" HorizontalAlignment="Center">Groom</TextBlock>
  <TextBlock Grid.Column="2" HorizontalAlignment="Center">Bride</TextBlock>

  <TextBlock Grid.Row="1">First name</TextBlock>
  <TextBox x:Name="GroomFirstName" Grid.Row="1" Grid.Column="1" TabIndex="1"/>
  <TextBox x:Name="BrideFirstName" Grid.Row="1" Grid.Column="2" TabIndex="3"/>

  <TextBlock Grid.Row="2">Last name</TextBlock>
  <TextBox x:Name="GroomLastName" Grid.Row="2" Grid.Column="1" TabIndex="2"/>
  <TextBox x:Name="BrideLastName" Grid.Row="2" Grid.Column="2" TabIndex="4"/>
</Grid>

Dans certains cas, vous pouvez exclure un contrôle spécifique de l’ordre de tabulation. Cela s’effectue généralement en rendant le contrôle non actif en définissant sa propriété IsEnabled sur false. Un contrôle désactivé est automatiquement exclu de l’ordre de tabulation.

Si vous souhaitez exclure un contrôle interactif de l’ordre de tabulation, vous pouvez définir la propriété IsTabStop sur false.

Par défaut, les éléments d’interface utilisateur qui prennent en charge le focus sont généralement inclus dans l’ordre de tabulation. Certaines exceptions à ceci incluent certains types d’affichage de texte (tels que RichTextBlock) qui prennent en charge le focus pour la sélection de texte et l’accès au Presse-papiers, mais ne sont pas dans l’ordre de tabulation, car ils sont des éléments de texte statiques. Ces contrôles ne sont pas interactifs de manière conventionnelle (ils ne peuvent pas être appelés et ne nécessitent pas d’entrée de texte, mais prennent en charge le modèle de contrôle Texte qui prend en charge la recherche et l’ajustement des points de sélection dans le texte). Les contrôles de texte seront toujours détectés par les technologies d’assistance et lisent à haute voix dans les lecteurs d’écran, mais qui s’appuient sur des techniques autres que l’ordre de tabulation.

Si vous ajustez les valeurs TabIndex ou utilisez l’ordre par défaut, ces règles s’appliquent :

  • Si TabIndex n’est pas défini sur un élément, la valeur par défaut est Int32.MaxValue et l’ordre de tabulation est basé sur l’ordre de déclaration dans les collections XAML ou enfants.
  • Si TabIndex est défini sur un élément :
    • Les éléments d’interface utilisateur avec TabIndex égal à 0 sont ajoutés à l’ordre de tabulation en fonction de l’ordre de déclaration dans des collections XAML ou enfants.
    • Les éléments d’interface utilisateur avec TabIndex supérieur à 0 sont ajoutés à l’ordre de tabulation en fonction de la valeur TabIndex.
    • Les éléments d’interface utilisateur avec TabIndex inférieurs à 0 sont ajoutés à l’ordre de tabulation et apparaissent avant une valeur nulle.

L’extrait de code suivant montre une collection d’éléments avec différents paramètres TabIndex (B est affectée à la valeur d’Int32.MaxValue, ou 2 147 483 647).

<StackPanel Background="#333">
  <StackPanel Background="#FF33FF">
    <Button>A</Button>
    <Button TabIndex="2147483647">B</Button>
    <Button>C</Button>
  </StackPanel>
  <StackPanel Background="#33FFFF">
    <Button TabIndex="1">D</Button>
    <Button TabIndex="1">E</Button>
    <Button TabIndex="0">F</Button>
  </StackPanel>
</StackPanel>

Cela entraîne l’ordre de tabulation suivant :

  1. F
  2. D
  3. E
  4. A
  5. B
  6. C

Navigation au clavier entre les volets d’application avec F6

Un volet d’application est une zone logique d’interface utilisateur importante et associée dans une fenêtre d’application (par exemple, les volets Microsoft Edge incluent la barre d’adresses, la barre de signets, la barre d’onglets et le volet de contenu). La touche F6 peut être utilisée pour naviguer entre ces volets, où des groupes d’éléments enfants sont ensuite accessibles à l’aide de la navigation au clavier standard.

Bien que la navigation au clavier puisse fournir une interface utilisateur compatible avec l’accès, l’interface utilisateur accessible nécessite souvent quelques étapes supplémentaires. En règle générale, cela inclut les éléments suivants :

  • Écoutez F6 pour naviguer entre les sections importantes de votre interface utilisateur.
  • Ajout de raccourcis clavier pour les actions courantes dans votre interface utilisateur.
  • Ajout de clés d’accès à des contrôles importants dans votre interface utilisateur.

Pour plus d’informations sur l’implémentation des raccourcis et des touches d’accès, consultez les raccourcis clavier ci-dessous et les touches d’accès.

Optimiser pour F6

F6 permet aux utilisateurs du clavier de naviguer efficacement entre les volets de l’interface utilisateur sans tabulation à travers des centaines de contrôles potentiellement.

Par exemple, F6 dans Microsoft Edge cycles entre la barre d’adresses, la barre de signets, la barre d’onglets et le volet de contenu. Comme une page web peut avoir des centaines de contrôles tabables, F6 peut faciliter l’accès des utilisateurs du clavier à la barre d’onglets et à la barre d’adresse sans utiliser de raccourcis spécifiques à l’application.

Le cycle d’onglet F6 peut également correspondre à des repères ou des en-têtes dans le contenu, même s’il n’a pas besoin de correspondre exactement. F6 doit se concentrer sur les grandes régions distinctes de votre interface utilisateur, tandis que les repères peuvent être plus granulaires. Par exemple, vous pouvez marquer une barre d’application et sa zone de recherche comme repères, mais inclure uniquement la barre d’application elle-même dans le cycle F6.

Important

Vous devez implémenter la navigation F6 dans votre application, car elle n’est pas prise en charge en mode natif.

Dans la mesure du possible, les régions du cycle F6 doivent avoir un nom accessible : via un point de repère ou en ajoutant manuellement un AutomationProperties.Name à l’élément « racine » de la région.

Maj-F6 doit faire un cycle dans la direction opposée.

Navigation au clavier dans un élément d’interface utilisateur

Pour les contrôles composites, il est important de garantir une navigation interne appropriée entre les éléments contenus. Un contrôle composite peut gérer l’élément enfant actif pour réduire la surcharge liée à la prise en charge de tous les éléments enfants. Le contrôle composite est inclus dans l’ordre de tabulation et gère les événements de navigation au clavier lui-même. De nombreux contrôles composites ont déjà une logique de navigation interne intégrée à leur gestion des événements. Par exemple, la traversée de touches de direction des éléments est activée par défaut sur les contrôles ListView, GridView, ListBox et FlipView.

Alternatives au clavier aux actions et événements de pointeur pour des éléments de contrôle spécifiques

Les éléments d’interface utilisateur qui peuvent être cliqués doivent également être invoquables via le clavier. Pour utiliser le clavier avec un élément d’interface utilisateur, l’élément doit avoir le focus (seules les classes qui dérivent du focus de prise en charge du contrôle et de la navigation par onglet).

Pour les éléments d’interface utilisateur qui peuvent être appelés, implémentez des gestionnaires d’événements clavier pour la barre d’espace et les touches Entrée. Cela garantit la prise en charge de l’accessibilité du clavier de base et permet aux utilisateurs d’atteindre tous les éléments d’interface utilisateur interactifs et d’activer les fonctionnalités à l’aide du clavier uniquement.

Lorsqu’un élément ne prend pas en charge le focus, vous pouvez créer votre propre contrôle personnalisé. Dans ce cas, pour activer le focus, vous devez définir la propriété IsTabStop sur true et vous devez fournir une indication visuelle de l’état visuel prioritaire avec un indicateur de focus.

Toutefois, il peut être plus facile d’utiliser la composition du contrôle afin que la prise en charge des taquets de tabulation, du focus et des pairs et modèles Microsoft UI Automation soient gérés par le contrôle dans lequel vous choisissez de composer votre contenu. Par exemple, au lieu de gérer un événement appuyé sur un pointeur sur une image, encapsulez cet élément dans un bouton pour obtenir la prise en charge du pointeur, du clavier et du focus.

<!--Don't do this.-->
<Image Source="sample.jpg" PointerPressed="Image_PointerPressed"/>

<!--Do this instead.-->
<Button Click="Button_Click"><Image Source="sample.jpg"/></Button>

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.

Un raccourci est une combinaison de clavier qui offre 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 rapide sont généralement constituées de la touche Alt plus une lettre.

Fournissez toujours un moyen simple pour les utilisateurs qui s’appuient sur les lecteurs d’écran et d’autres technologies d’assistance pour découvrir les touches de raccourci de votre application. Communiquez les touches de raccourci à l’aide d’info-bulles, de noms accessibles, de descriptions accessibles ou d’une autre forme de communication à l’écran. Au minimum, les touches de raccourci doivent être bien documentées dans le contenu de l’aide de votre application.

Vous pouvez documenter les touches d’accès via des lecteurs d’écran en définissant la propriété jointe AutomationProperties.AccessKey sur une chaîne qui décrit la touche de raccourci. Il existe également une propriété jointe AutomationProperties.AcceleratorKey pour documenter les touches de raccourci non mnémoniques, bien que les lecteurs d’écran traitent généralement les deux propriétés de la même façon. Essayez de documenter les touches de raccourci de plusieurs façons, à l’aide d’info-bulles, de propriétés d’automatisation et de la documentation d’aide écrite.

L’exemple suivant montre comment documenter les touches de raccourci pour la lecture multimédia, la pause et les boutons d’arrêt.

<Grid KeyDown="Grid_KeyDown">

  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>

  <MediaElement x:Name="DemoMovie" Source="xbox.wmv"
    Width="500" Height="500" Margin="20" HorizontalAlignment="Center" />

  <StackPanel Grid.Row="1" Margin="10"
    Orientation="Horizontal" HorizontalAlignment="Center">

    <Button x:Name="PlayButton" Click="MediaButton_Click"
      ToolTipService.ToolTip="Shortcut key: Ctrl+P"
      AutomationProperties.AcceleratorKey="Control P">
      <TextBlock>Play</TextBlock>
    </Button>

    <Button x:Name="PauseButton" Click="MediaButton_Click"
      ToolTipService.ToolTip="Shortcut key: Ctrl+A"
      AutomationProperties.AcceleratorKey="Control A">
      <TextBlock>Pause</TextBlock>
    </Button>

    <Button x:Name="StopButton" Click="MediaButton_Click"
      ToolTipService.ToolTip="Shortcut key: Ctrl+S"
      AutomationProperties.AcceleratorKey="Control S">
      <TextBlock>Stop</TextBlock>
    </Button>
  </StackPanel>
</Grid>

Important

La définition de AutomationProperties.AcceleratorKey ou AutomationProperties.AccessKey n’active pas les fonctionnalités du clavier. Cela indique uniquement quelles clés doivent être utilisées pour l’infrastructure UI Automation, puis peuvent être transmises aux utilisateurs via des technologies d’assistance.

La gestion des clés est implémentée dans code-behind, et non en XAML. Vous devez toujours joindre des gestionnaires pour les événements KeyDown ou KeyUp sur le contrôle approprié afin d’implémenter réellement le comportement du raccourci clavier dans votre application. En outre, la décoration de texte souligné pour une clé d’accès n’est pas fournie automatiquement. Vous devez souligner explicitement le texte de la clé spécifique dans votre mise en forme de soulignement inline si vous souhaitez afficher le texte souligné dans l’interface utilisateur.

Par souci de simplicité, l’exemple précédent omet l’utilisation de ressources pour les chaînes telles que « Ctrl+A ». Toutefois, vous devez également prendre en compte les touches de raccourci lors de la localisation. La localisation des touches de raccourci est pertinente, car le choix de la touche à utiliser comme touche de raccourci dépend généralement de l’étiquette de texte visible de l’élément.

Pour plus d’informations sur l’implémentation des touches de raccourci, consultez les touches de raccourci dans les instructions d’interaction de l’expérience utilisateur Windows.

Implémentation d’un gestionnaire d’événements clés

Les événements d’entrée (tels que les événements clés) utilisent un concept d’événement appelé événements routés. Un événement routé peut monter en bulles via les éléments enfants d’un contrôle composite parent, de sorte que le contrôle parent peut gérer des événements pour plusieurs éléments enfants. Ce modèle d’événement est pratique pour définir des actions de touche de raccourci pour un contrôle qui contient plusieurs éléments enfants, dont aucun ne peut avoir le focus ou faire partie de l’ordre de tabulation.

Par exemple, le code qui montre comment écrire un gestionnaire d’événements de clé qui inclut la vérification des modificateurs tels que la touche Ctrl, consultez interactions clavier.

Navigation au clavier pour les contrôles personnalisés

Nous vous recommandons d’utiliser les touches de direction comme raccourcis clavier pour naviguer entre les éléments enfants dans les cas où les éléments enfants ont une relation spaciale entre eux. Si les nœuds d’arborescence ont des sous-éléments distincts pour la gestion de l’activation de expand-collapse et de nœud, utilisez les touches de direction gauche et droite pour fournir la fonctionnalité expand-collapse du clavier. Si vous avez un contrôle orienté qui prend en charge la traversée directionnelle dans le contenu du contrôle, utilisez les touches de direction appropriées.

En règle générale, vous implémentez la gestion des clés personnalisées pour les contrôles personnalisés en incluant un remplacement des méthodes OnKeyDown et OnKeyUp dans le cadre de la logique de classe.

Exemple d’état visuel pour un indicateur de focus

Comme mentionné précédemment, tout contrôle personnalisé qui prend en charge le focus doit avoir un indicateur de focus visuel. En règle générale, cet indicateur de focus est simplement un rectangle décrivant le rectangle englobant du contrôle. Le rectangle pour le focus visuel est un élément homologue de la composition du contrôle dans un modèle de contrôle, mais est initialement défini avec une valeur de visibilité de Collapsed , car le contrôle n’est pas encore concentré. Lorsque le contrôle obtient le focus, un état visuel est appelé qui définit spécifiquement la visibilité du visuel focus sur Visible. Une fois le focus déplacé ailleurs, un autre état visuel est appelé et la visibilité devient réduite.

Tous les contrôles XAML focusables affichent un indicateur de focus visuel approprié lorsqu’ils sont concentrés. Les utilisateurs sélectionnés peuvent également affecter l’apparence de l’indicateur (en particulier si l’utilisateur utilise un mode contraste élevé). Si vous utilisez les contrôles XAML dans votre interface utilisateur (et que vous ne remplacez pas les modèles de contrôle), vous n’avez rien à faire pour obtenir des indicateurs de focus visuel par défaut. Toutefois, si vous envisagez de retempser un contrôle ou si vous êtes curieux de savoir comment les contrôles XAML fournissent leurs indicateurs de focus visuel, le reste de cette section explique comment cela est effectué en XAML et dans la logique de contrôle.

Voici un exemple de code XAML qui provient du modèle XAML par défaut d’un bouton.

XAML

<ControlTemplate TargetType="Button">
...
    <Rectangle
      x:Name="FocusVisualWhite"
      IsHitTestVisible="False"
      Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
      StrokeEndLineCap="Square"
      StrokeDashArray="1,1"
      Opacity="0"
      StrokeDashOffset="1.5"/>
    <Rectangle
      x:Name="FocusVisualBlack"
      IsHitTestVisible="False"
      Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
      StrokeEndLineCap="Square"
      StrokeDashArray="1,1"
      Opacity="0"
      StrokeDashOffset="0.5"/>
...
</ControlTemplate>

Jusqu’à présent, ce n’est que la composition. Pour contrôler la visibilité de l’indicateur de focus, vous définissez des états visuels qui basculent la propriété Visibility . Cette opération s’effectue à l’aide de VisualStateManager et de la propriété jointe VisualStateManager.VisualStateGroups, comme appliqué à l’élément racine qui définit la composition.

<ControlTemplate TargetType="Button">
  <Grid>
    <VisualStateManager.VisualStateGroups>
       <!--other visual state groups here-->
       <VisualStateGroup x:Name="FocusStates">
         <VisualState x:Name="Focused">
           <Storyboard>
             <DoubleAnimation
               Storyboard.TargetName="FocusVisualWhite"
               Storyboard.TargetProperty="Opacity"
               To="1" Duration="0"/>
             <DoubleAnimation
               Storyboard.TargetName="FocusVisualBlack"
               Storyboard.TargetProperty="Opacity"
               To="1" Duration="0"/>
         </VisualState>
         <VisualState x:Name="Unfocused" />
         <VisualState x:Name="PointerFocused" />
       </VisualStateGroup>
     <VisualStateManager.VisualStateGroups>
<!--composition is here-->
   </Grid>
</ControlTemplate>

Notez comment un seul des états nommés ajuste la visibilité directement alors que les autres sont apparemment vides. Avec les états visuels, dès que le contrôle utilise un autre état à partir du même VisualStateGroup, toutes les animations appliquées par l’état précédent sont immédiatement annulées. Étant donné que la visibilité par défaut de la composition est réduite, le rectangle n’apparaît pas. La logique de contrôle contrôle contrôle cela en écoutant les événements de focus tels que GotFocus et en modifiant les états avec GoToState. Souvent, cela est déjà géré pour vous si vous utilisez un contrôle par défaut ou la personnalisation en fonction d’un contrôle qui a déjà ce comportement.

Accessibilité du clavier et appareils sans clavier matériel

Certains appareils ne disposent pas d’un clavier matériel dédié et s’appuient sur un panneau d’entrée réversible (SIP) à la place. Les lecteurs d’écran peuvent lire l’entrée de texte à partir du sip de texte et les utilisateurs peuvent découvrir où se trouvent leurs doigts, car le lecteur d’écran peut détecter que l’utilisateur analyse les touches et lit le nom de clé analysé à haute voix. En outre, certains concepts d’accessibilité orienté clavier peuvent être mappés aux comportements de technologie d’assistance associés qui n’utilisent pas du tout un clavier. Par exemple, même si une touche SIP n’inclut pas de touche Tab, le Narrateur prend en charge un mouvement tactile qui équivaut à appuyer sur la touche Tab, de sorte que l’utilisation d’un ordre de tabulation utile dans les contrôles d’une interface utilisateur est toujours crticale pour l’accessibilité. Le Narrateur prend également en charge de nombreux autres mouvements tactiles, notamment les touches de direction pour naviguer dans des contrôles complexes (voir commandes clavier du Narrateur et mouvements tactiles).

Exemples

Conseil

Ouvrez l’application galerie WinUI 3 et consultez la prise en charge de l’accessibilité du clavier en action.

L’application WinUI 3 Gallery comprend des exemples interactifs de la plupart des contrôles et des fonctionnalités WinUI 3. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.