Android développer - Navigation au clavier & Switch Access

Accéder aux éléments interactifs #

Cible : tout le monde et en particulier les personnes déficientes motrices ou cognitives.
Quand : lors de la conception et lors du développement.

La navigation avec Switch Access ou avec clavier est très utile pour les personnes qui présentent des difficultés motrices ou cognitives. Cette navigation permet de passer d’élément interactif en élément interactif (élément sur lequel on peut effectuer une action).

Pour gérer la navigation au clavier et avec Switch Access, il faut s’assurer de 2 choses :

  • Permettre le focus sur les éléments interactifs : la navigation au clavier ne concerne que les éléments interactifs. Si, par exemple, votre application possède des vues custom cliquables, il faut s’assurer que ces vues soient "focusables" en positionnant l’attribut focusable à true.
  • Gérer l’affichage du focus : tout élément interactif peut recevoir le focus, il faut donc que le state_focused soit défini et permette de distinguer d’un seul coup d’œil quel élément a le focus.

À noter : Android Pie (9, API 28), introduit un focus spécifique au lecteur d’écran permet d’éviter les effets de bords entre le focus du lecteur d’écran (screenReaderFocusable) et le focus clavier (focusable). La navigation clavier n’est pas sensible au screenReaderFocusable.

À vérifier :

  • À la navigation au clavier et avec Switch Access, il est possible de déterminer visuellement l’élément qui a le focus
  • Toutes les fonctionnalités sont accessibles avec la navigation au clavier et avec Switch Access
  • Tous les éléments interactifs sont bien mis en surbrillance avec la navigation au clavier et avec Switch Access
  • Il n'y a que les éléments interactifs qui sont mis en surbrillance avec la navigation au clavier et avec Switch Access

Exemple :
Exemple de sélecteur qui prend en compte l’état state_focused :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<!-- Non focused states -->
	<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/draw_unselected_selector" />
	<item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/draw_selected_selector" />
 
	<!-- Focused states -->
	<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/draw_unselected_focused_selector" />
	<item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/draw_selected_focused_selector" />
 
	<!-- Pressed -->
	<!-- Non focused states -->
	<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/draw_unselected_pressed_selector" />
	<item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/draw_selected_pressed_selector" />
 
	<!-- Focused states -->
	<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/draw_unselected_pressed_selector" />
	<item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/draw_selected_pressed_selector" />
</selector>

Exemple d'une vue focusable avec la navigation au clavier

<View android:focusable="true"
              android:layout_width="0px"
              android:layout_height="0px" />

Exemple d'une vue non focusable avec la navigation au clavier mais focusable au toucher.

<View android:focusableInTouchMode="true" 
              android:layout_width="0px"
              android:layout_height="0px" />

Référence WCAG :

Ordonner la navigation au clavier #

Cible : tout le monde et en particulier les personnes déficientes motrices qui utilisent un clavier pour naviguer.
Quand : lors de la conception et lors du développement.

Description :

La navigation au clavier et avec Switch Access, pour être compréhensible et facile d'utilisation, doit proposer un ordre cohérent et compréhensible de navigation. Il est donc important de gérer l’ordre du focus : à travers les options nextFocusDown, nextFocusUp, nextFocusRight et nextFocusLeft, vous pouvez spécifier quelle vue doit prendre le focus selon l’utilisation des flèches tab, bas, haut, droit et gauche.

À noter : nextFocusDown, nextFocusUp, nextFocusRight, nextFocusLeft, focusable ainsi que d’autres options de gestion du focus sont accessibles directement dans le XML ou dans le code à travers les méthodes correspondantes.

Pour plus d’information sur la gestion du focus sous Android.

À vérifier :

  • L’ordre de navigation au clavier (et avec Switch Access) est logique et cohérent.
  • Les éléments sont regroupés lorsqu'ils sont liés (exemple : contenu au sein d'un item cliquable d'une liste)
  • Il est possible de scroller dans une liste déroulante pour accéder à l'ensemble du contenu
  • Vous n'êtes à aucun moment piégé dans une partie de l'écran (ce qu'on appelle un piège clavier)

Exemple

<EditText
    android:id="@+id/et1"
    android:nextFocusDown="@+id/et2"
    android:nextFocusUp="@+id/et2"
    ....../>

<EditText
    android:id="@+id/et2"
    android:nextFocusDown="@+id/et1"
    android:nextFocusUp="@+id/et1"
    ...../>

Référence WCAG :