Rendre les images accessibles dans les applications iOS est un processus relativement simple : il suffit de fournir une description du contenu de l'image, et c'est tout. Sous Android, en revanche, l'attribut « description du contenu » associe une description textuelle à un contrôle, à un ImageView ou à d'autres objets pouvant recevoir le focus qui, sans cela, n'auraient aucun contenu. Il existe une grande ambiguïté quant à la décision de rendre ou non une image accessible à un utilisateur de TalkBack.
Afin de dissiper une partie de la confusion qui entoure l'accessibilité des images, nous allons répondre aux questions suivantes :
- Pourquoi les images sous Android doivent-elles comporter une description du contenu ?
- Quand dois-je fournir une description du contenu d'une image ?
- Dans quels cas ne dois-je PAS fournir de description du contenu d'une image ?
- Comment rédiger des descriptions de contenu pour les vues d'images au format XML ?
- Comment rédiger des descriptions de contenu pour les éléments d'image modulaires ?
Pourquoi les images sous Android doivent-elles comporter des descriptions de contenu ?
Le service d'accessibilité Android considère que les images dépourvues de description de contenu ne sont pas importantes pour l'accessibilité ; par conséquent, il n'est pas possible de les sélectionner à l'aide de TalkBack. Sans description de contenu, les utilisateurs de TalkBack passent à côté d'informations précieuses que ces images pourraient leur apporter.
Avant d'entrer davantage dans les détails, voyons d'abord comment les images sous Android peuvent être classées à des fins d'accessibilité :
- Des images qui fournissent des informations
- Images décoratives qui se trouvent généralement à côté d'un autre élément de l'interface utilisateur
Quand dois-je fournir une description du contenu d'une image sous Android ?
Une description du contenu est indispensable pour les images qui fournissent des informations (par exemple, des images interactives, informatives, etc.). Par exemple, dans la capture d'écran ci-dessous, l'image située en haut présente des informations importantes qui doivent être transmises à l'utilisateur de TalkBack. Dans de tels cas, il est très important de fournir une description du contenu de l'image.
Dans quels cas ne dois-je PAS fournir de description du contenu d'une image sous Android ?
Pour les images décoratives qui se trouvent généralement à côté d'un autre élément de l'interface utilisateur, il n'est pas nécessaire de fournir une description du contenu.
Prenons par exemple une liste d'éléments disposés les uns sous les autres, chaque élément de la liste comportant un texte suivi d'une image en forme de chevron. Dans ce cas, le texte précédant l'image fait office d'étiquette. L'image en forme de chevron n'apporte aucune information supplémentaire.
De plus, il est préférable de veiller à ce que chaque élément de la liste regroupe à la fois le texte et l'image, afin que chaque élément de la liste puisse être sélectionné individuellement, comme le montre la capture d'écran ci-dessous. Cela permet de créer une association visuelle pour les utilisateurs malvoyants et évite aux utilisateurs non voyants d'avoir à gérer des informations redondantes.
Remarque : on pourrait faire valoir que le linter d'Android Studio signale que l'image située à côté de l'élément devrait comporter une description de contenu ; toutefois, dans le cas d'une liste où le texte et l'image seront regroupés lorsque TalkBack se positionnera sur l'élément, il n'est pas nécessaire de fournir une description de contenu pour l'image décorative.
Comment rédiger des descriptions de contenu pour les vues d'images au format XML ?
Dans les vues de type XML, l'ajout de descriptions de contenu est assez simple :
<androidx.appcompat.widget.AppCompatImageView android:id="@+id/img_1" android:layout_width="140dp" android:layout_height="wrap_content" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toStartOf="@+id/txt_1" android:contentDescription="@string/image_content_description" android:src="@drawable/circle_outline" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" />
On peut également le faire en Kotlin :
val img = findViewById<AppCompatImageView>(R.id.img_1) img.contentDescription = "Purple Circle"
Comment rédiger des descriptions de contenu pour les « Image Composables » ?
Jetpack Compose propose des API très simples pour définir une description du contenu d'une image. Pour les composables de type image, vous pouvez fournir directement la description du contenu via l'API du composable image, comme le montre l'extrait de code ci-dessous.
Image(
painterResource(id = R.drawable.ic_axe_con),
contentDescription = "Axe Con, Créer des expériences accessibles",
modifier = Modifier.constrainAs(image) {
top.linkTo(parent.top)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
)
Informations en double
Veillez tout particulièrement, lorsque vous ajoutez des descriptions de contenu, à ce qu'elles soient concises et uniques. Si la description d'une image reprend le texte qui l'accompagne, cela peut prêter à confusion pour l'utilisateur de TalkBack.
Par exemple, dans la capture d'écran ci-dessous, nous pouvons définir la description du contenu de l'image comme « Cercle violet » plutôt que simplement « cercle ». La description « Cercle violet » décrit l'aspect du cercle dessiné à l'écran et fournit ainsi des informations plus précises à l'utilisateur de TalkBack.
Conclusion
Sous Android, il est facile de rendre les images accessibles aux utilisateurs de TalkBack en utilisant l'attribut « content-description » ou l'API. Il est toutefois très important de bien comprendre quand les utiliser.
Voici quelques derniers rappels :
- Lorsque des images sont utilisées à des fins décoratives ou qu'un texte sert de légende à l'image, il est recommandé de les encapsuler.
- Il convient d'ajouter des descriptions de contenu aux images qui fournissent des informations utiles à l'utilisateur.
- Évitez de fournir des informations redondantes à l'utilisateur de TalkBack afin d'éviter toute confusion. Il est recommandé d'éviter d'utiliser des mots tels que « image » ou « photo » lors de la rédaction des descriptions de contenu pour les images ; il suffit en effet de décrire simplement les informations que l'image transmet à un utilisateur voyant.
- La description dynamique du contenu des images doit être fournie via les API impératives Android et les API Compose.
N'oubliez pas que l'outil de vérification Lint d'Android Studio peut afficher un avertissement pour tout élément `ImageView` ne comportant pas de description de contenu ; c'est donc à vous de déterminer s'il est nécessaire d'en créer une.
Enfin, n’oubliez pas que l’utilisation de TalkBack pour tester votre application reste le meilleur moyen de vérifier si vous avez correctement utilisé les descriptions de contenu.
