Assurer la compatibilité avec la navigation via le clavier

En plus des méthodes de saisie logicielle, telles que les claviers à l'écran, Android est compatible avec les claviers physiques connectés à l'appareil. Un clavier offre un mode pratique de saisie de texte et un moyen pour les utilisateurs de naviguer et d'interagir avec votre application. Bien que la plupart des appareils portables tels que les téléphones utilisent le mode tactile comme mode d'interaction principal, les tablettes et les appareils similaires sont populaires, et de nombreux utilisateurs aiment y connecter des accessoires de clavier.

À mesure que de plus en plus d'appareils Android proposent ce type d'expérience, il est important d'optimiser votre application pour qu'elle prenne en charge les interactions via un clavier. Ce document explique comment améliorer la navigation avec un clavier.

Tester votre application

Les utilisateurs peuvent déjà naviguer dans votre application à l'aide d'un clavier, car le système Android active la plupart des comportements nécessaires par défaut.

Tous les widgets interactifs fournis par le framework Android (comme Button et EditText) peuvent être sélectionnés. Cela signifie que les utilisateurs peuvent naviguer à l'aide de dispositifs de commande tels qu'une croix directionnelle ou un clavier, et que chaque widget s'illumine ou change d'apparence lorsqu'il est sélectionné.

Pour tester votre application, procédez comme suit:

  1. Installez votre application sur un appareil doté d'un clavier physique.

    Si vous ne possédez pas d'appareil physique avec clavier, connectez un clavier Bluetooth ou un clavier USB.

    Vous pouvez également utiliser l'émulateur Android:

    1. Dans AVD Manager, cliquez sur New Device (Nouvel appareil) ou sélectionnez un profil existant, puis cliquez sur Clone (Cloner).
    2. Dans la fenêtre qui s'affiche, assurez-vous que les options Clavier et D-Pad sont activées.
  2. Pour tester votre application, utilisez uniquement la touche Tabulation pour naviguer dans votre UI. Assurez-vous que chaque commande de l'interface utilisateur est sélectionnée comme prévu.

    Recherchez les cas où le focus se déplace de manière inattendue.

  3. Recommencez au début de votre application et parcourez l'UI à l'aide de commandes de direction telles que les touches fléchées du clavier. Dans chaque élément pouvant être sélectionné de votre UI, appuyez sur Haut, Bas, Gauche et Droite.

    Recherchez les cas où le focus se déplace de manière inattendue.

Si la navigation à l'aide de la touche Tabulation ou des commandes de direction ne fonctionne pas comme prévu, spécifiez l'emplacement du focus dans votre mise en page, comme indiqué dans les sections suivantes.

Gérer la navigation par onglet

Lorsqu'un utilisateur navigue dans votre application à l'aide de la touche Tabulation du clavier, le système transmet le focus de saisie entre les éléments en fonction de l'ordre dans lequel ils apparaissent dans la mise en page. Par exemple, si vous utilisez une mise en page relative et que l'ordre des éléments à l'écran est différent de celui du fichier, vous devrez peut-être spécifier manuellement l'ordre de mise au point.

Par exemple, dans la mise en page suivante, deux boutons sont alignés sur la droite et un champ de texte est aligné à gauche du deuxième bouton. Pour transmettre la sélection du premier bouton au champ de texte, puis au deuxième bouton, la mise en page doit définir explicitement l'ordre de sélection pour chacun des éléments sélectionnables avec l'attribut android:nextFocusForward.

<androidx.constraintlayout.widget.ConstraintLayout ...>
    <Button
        android:id="@+id/button1"
        android:nextFocusForward="@+id/editText1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        ... />
    <Button
        android:id="@+id/button2"
        android:nextFocusForward="@+id/button1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button1"
        ... />
    <EditText
        android:id="@id/editText1"
        android:nextFocusForward="@+id/button2"
        app:layout_constraintBottom_toBottomOf="@+id/button2"
        app:layout_constraintRight_toLeftOf="@id/button2
        ...  />
    ...
</androidx.constraintlayout.widget.ConstraintLayout>

Désormais, au lieu que le focus passe de button1 à button2, puis à editText1, il se déplace de manière appropriée en fonction de l'apparence à l'écran: de button1 à editText1, puis à button2.

Gérer la navigation directionnelle

Les utilisateurs peuvent également naviguer dans votre application à l'aide des touches fléchées d'un clavier, qui se comportent de la même manière que lors de la navigation avec un pavé directionnel ou un trackball. Le système fournit une "meilleure estimation" de la vue à mettre en avant dans une direction donnée en fonction de la mise en page des vues à l'écran. Cependant, il arrive que le système ne fasse pas la bonne supposition.

Si le système ne transmet pas la sélection à la vue appropriée lorsque vous naviguez dans une direction donnée, spécifiez la vue qui doit recevoir la sélection à l'aide des attributs suivants:

Chaque attribut désigne la vue suivante à mettre en surbrillance lorsque l'utilisateur navigue dans cette direction, comme spécifié par l'ID de la vue. Ce processus est illustré dans l'exemple suivant:

<Button
    android:id="@+id/button1"
    android:nextFocusRight="@+id/button2"
    android:nextFocusDown="@+id/editText1"
    ... />
<Button
    android:id="@id/button2"
    android:nextFocusLeft="@id/button1"
    android:nextFocusDown="@id/editText1"
    ... />
<EditText
    android:id="@id/editText1"
    android:nextFocusUp="@id/button1"
    ...  />

Ressources supplémentaires

Consultez les ressources associées suivantes :