Navigation au focus

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 au focus 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). Elle correspond à la navigation que l’on peut faire avec un clavier Bluetooth lié à un smartphone.

Pour gérer la navigation au focus, il faut s’assurer de 2 choses :

  • Permettre le focus sur les éléments interactifs : la navigation au focus 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 focus, il est possible de déterminer visuellement l’élément qui a le focus
  • Toutes les fonctionnalités sont accessibles avec la navigation au focus
  • Tous les éléments interactifs sont bien mis en surbrillance avec la navigation au focus
  • Il n'y a que les éléments interactifs qui sont mis en surbrillance avec la navigation au focus

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 focus #

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 focus, 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 focus 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)

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 :