Android développer - Écran de saisie

Avoir des champs de saisie explicites #

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

Description :

Lier les champs de saisie avec leurs labels apporte une vocalisation supplémentaire qui permet à l’utilisateur de comprendre ce qu'il faut remplir lorsqu’il arrive sur un champ de saisie.

Il existe 2 grandes techniques pour réaliser cette liaison :

  • labelFor : permet de spécifier à une vue qu’elle est le label d’une autre vue. Cette méthode prend en paramètre l’id de la vue que l’on labellise. On peut utiliser cette méthode avec quasiment tout type de champ de saisie. Utilisable depuis le xml android:labelFor ou le code setLabelFor.
  • TextInputLayout : permet de lier directement le champ de texte avec son label au sein d'un même layout, ce qui aura pour effet de vocaliser correctement le champ tout en le rendant plus jolie.

De plus, il est essentiel d'indiquer à l'utilisateur, pour une bonne compréhension de l'écran de saisie, les différents champs obligatoires, le format attendu, ou encore les erreurs commises sur de potentiels champs.

À vérifier :

  • Les champs de saisie doivent être liés à un label si celui-ci est visible, sinon un hint est présent.
  • Les champs obligatoires sont identifiables
  • Le format de données des champs "complexe" est indiqué à l'utilisateur

Exemple


<TextView
   android:id="@+id/usernameLabel" ...
   android:text="@string/username"
   android:labelFor="@+id/usernameEntry" />

<EditText
   android:id="@+id/usernameEntry" ... />

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/addressLine"
   android:hint="@string/adress" ... >

<com.google.android.material.textfield.TextInputEditText
   ... />

</com.google.android.material.textfield.TextInputLayout>


// Avec Jetpack Compose
var username by remember { mutableStateOf("") }
TextField(
        value = username,
        onValueChange = { username = it },
	label = { Text("Field") }
    )

Référence WCAG :