Android développer - Navigation générale

Avoir des zones de clic suffisamment grandes #

Cible : pour tous et en particulier les personnes avec des déficiences motrices
Quand : dès la phase de conception et lors du développement.

Description :

Une taille insuffisante pour la zone d’action d’un composant peut empêcher certains utilisateurs de profiter pleinement de l’application. Cela peut engendrer des frustrations qui peuvent conduire à la désinstallation de l’application. Chaque élément cliquable de l’application doit donner à l’utilisateur une taille suffisante pour sa zone d’action.

Certaines exceptions sont cependant à noter :

  • Si l'action proposée a un équivalent dans l'écran qui respecte la taille requise
  • Si l'élément cliquable fait partie d'une zone ou d'un bloc de texte (ce qui est fréquemment le cas des liens notamment).

À vérifier :

  • La zone de clic a une taille d'au minimum 48 dp
  • La zone de clic a une marge autour de l'élément d'au moins 8 dp
  • Les erreurs de clic peuvent être annulées en déplaçant son doigt hors de la zone cliquable avant de relâcher

Exemples valide :

Exemple simple  :

<Button 
    android:text="Click"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:margin="8dp"
/>

// Avec Jetpack Compose
Button(
        onClick = {
            println("Click")
        },
        modifier = Modifier
            .padding(8.dp) //margin
            .border(1.dp, Color.Black)
            .width(48.dp)
            .height(48.dp)
    ) {
        Text(text = "Click!")
    }

Exemple avec padding  :

<Button 
    android:text="Click"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:padding="4dp"
    android:margin="8dp"
/>

// Avec Jetpack Compose
Button(
        onClick = {
            println("Click")
        },
        modifier = Modifier
            .padding(8.dp) //margin
            .border(1.dp, Color.Black)
            .padding(4.dp) //padding
            .width(40.dp)
            .height(40.dp)
    ) {
        Text(text = "Click!")
    }

Exemples non-valide :

<Button 
    android:text="Click"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:margin="4dp"
/>
<Button 
    android:text="Click"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:margin="8dp"
/>

// Avec Jetpack Compose
Button(
        onClick = {
            println("Click")
        },
        modifier = Modifier
            .padding(8.dp) //margin
            .border(1.dp, Color.Black)
            .width(40.dp)
            .height(40.dp)
    ) {
        Text(text = "Click!")
    }

Référence WCAG :



Proposer des textes lisibles #

Cible : tout le monde et en particulier les personnes ayant des déficiences visuelles, et les personnes dyslexiques.
Quand : dès la phase de conception et lors du développement.

Description :

Le texte peut poser des problèmes de lisibilité lorsque celui-ci présente une police d'écriture avec de l'empâtement ou que sa taille du texte est trop petite. Il est notamment recommandé d'utiliser une taille minimum de 14sp pour les textes.

À vérifier :

  • La police d'écriture est sans serif
  • Les textes sont suffisamment grands pour être lus confortablement
  • Il n'y a pas d'italique utilisé

Exemple valide :

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="sans-serif" 
    android:textSize="14sp"
    android:text="Exemple"
/>

// Avec Jetpack Compose
Text(
        text = "Exemple",
	fontFamily = FontFamily.SansSerif,
        fontSize = 14.sp
    )

Exemple non valide :

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="sans-serif" 
    android:textStyle="italic" 
    android:textSize="14sp"
    android:text="Exemple"
/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="sans-serif" 
    android:textSize="10sp"
    android:text="Exemple"
/>

// Avec Jetpack Compose
Text(
        text = "Exemple",
        fontSize = 14.sp,
        fontStyle = FontStyle.Italic,
	fontFamily = FontFamily.SansSerif
    )

Référence WCAG :



Rendre adaptable les limites de temps qui provoquent un changement de contexte #

Cible : tout le monde et en particulier les personnes ayant des déficiences visuelles et/ou motrices.
Quand : dès la phase de conception et lors du développement.

Description :

Sur certaines applications, il arrive que le contexte change après un certain délai. C'est le cas par exemple pour les lecteurs vidéo : il est fréquent que les boutons de contrôles associés à la vidéo disparaissent après une dizaine de secondes sans interaction.

Cette évolution automatique de l'interface pose cependant un problème pour l'accessibilité, une personne ayant peut-être besoin de plus de temps pour interagir avec les éléments. Ce délai doit donc pouvoir être adapté selon le besoin de chaque utilisateur.

Une option d'accessibilité nommée Time to take action existe depuis Android 10, et permet de définir son propre timeout depuis les paramètres d'accessibilité. Il est ainsi possible d'exploiter cette option par le biais de la fonction getRecommendedTimeoutMillis(). Cette méthode prend en charge les délais d'expiration définis par l'utilisateur pour les éléments d'interface utilisateur interactifs et non interactifs. La valeur de retour est influencée à la fois par les préférences de l'utilisateur (Time to take action) et les API du service d'accessibilité.

Cependant, tous les téléphones n'utilisant pas nécessairement une version d'Android récente, il est recommandé de proposer directement au sein de l'application un paramétrage de ce délai.

À vérifier :

  • Une limite de temps a son délai paramétrable

Référence WCAG :

Événements d’accessibilité & custom views #

Cible : tout le monde et en particulier les personnes ayant des déficiences visuelles et/ou motrices.
Quand : lors du développement.

Description :
Il existe sous Android un bon nombre d’événements liés à l’API d’accessibilité. Vous pouvez manipuler ces événements au même titre que d’autres événements. Ils permettent d’enrichir des composants custom insuffisamment accessibles. L’utilisation des événements d’accessibilité est assez rare dans les applications non dédiées à l’accessibilité, les autres options étant généralement suffisantes. Cependant, il faut savoir qu’ils existent et permettent de surcharger la vocalisation d’un composant.

Pour plus d’informations, nous vous invitons à regarder les liens ci-dessous.

Liens :

À vérifier :

  • Les custom views réagissent convenablement à l'accessibilité



WebView #

Cible : tout le monde et en particulier les personnes ayant des déficiences visuelles et/ou motrices.
Quand : lors du développement.

Description :
Les WebView ont un traitement un peu particulier sous Android. Pour commencer, si on veut qu’une page soit accessible, il faut que le contenu HTML le soit, à savoir qu’il respecte les normes internationales sur le sujet : les WCAG2. Pour connaître ces règles et apprendre les techniques de développement pour un web accessible, nous vous invitons à visiter la section de notre site consacrée au sujet : recommandations accessibilité pour le web.

Côté Android, il faut s’assurer que la WebView autorise le JavaScript : mWebView.getSettings().setJavaScriptEnabled(true);
Dans ces conditions, la page affichée à travers la WebView réagit convenablement à l’API d’accessibilité.

À vérifier :

  • Les WebView réagissent convenablement à l'accessibilité